Front-end Training Courses

Recently, Our team opened a series of front-end training courses inside the company. These courses aimed to teach everyone the basics of front-end programming skills. We encouraged all interested colleagues especially back-end developers, iOS developers, Android developers to enroll in the courses. By offering a series of lessons featured with lively lectures, real-world cases, and hands-on exercises, we covered many practical topics like Basic HTML, SCSS Introduction, Exploring ECMAScript, Workflow of Front-end in Douban, etc.

Front-end technologies are widely used in desktop and mobile applications. Learning and applying fundamental concepts benefits for enhancing the efficiency of development and cooperation.

My topic was the Layouts for Mobile Screens. Here is an outline of my presentation. Although the following demos are simple, they helped me recall W3C standards. We had a lot of fun with CSS.

Table of contents:

Media Query

• Usage:

  <!-- CSS media query on a link element -->
  <link rel="stylesheet" media="(max-width: 800px)"
  href="example.css" />
  
  <!-- CSS media query within a stylesheet -->
  <style>
  @media (max-width: 800px) {
  }
  </style>

• Syntax:

  @media (min-width: 500px)
  @media only screen and (min-width: 500px)
  media_type: screen, print, tv, all
  media_feature: min-width, max-width, min-height,  max-height

• Example

  See the Pen media by Ian Gong (@ianwith) on CodePen.

Fluid Grids

1. fixed width

• px + float

  See the Pen px_float by Ian Gong (@ianwith) on CodePen.

• px + inline-block

  See the Pen px_inlineblock by Ian Gong (@ianwith) on CodePen.

2. percentage based

• % + float

  See the Pen percent_float by Ian Gong (@ianwith) on CodePen.

• % + inline-block

  See the Pen percent_inlineblock by Ian Gong (@ianwith) on CodePen.

Rem

• Syntax
  px — Absolute Lengths
  em — Relative Lengths (font size of the element)
  rem — Relative Lengths (font size of the root element)

• Example

  See the Pen rem by Ian Gong (@ianwith) on CodePen.

Flex

• Properties applied to flex items

  See the Pen flex_box by Ian Gong (@ianwith) on CodePen.

• Alignment along the main axis

  See the Pen alignment by Ian Gong (@ianwith) on CodePen.