📖 Library

Library with latest short posts and courses.

Latest Tips & Tricks

• 2018-09-15

  Web Accessibility Handbook by Hong Kong Government

  Web Accessibility Handbook

  Some examples on making the web more accessible

  Read more →

• 2018-09-14

  Row and 12-columns grid

  Traditionally, we divide our layout into rows. Inside each row, there are 12 columns.

  

  1. Rows are the space lay out from top to bottom.
  2. Columns are the space inside each row, lay out fro left to right.
  3. All content are put into columns.

  Read more →

• 2018-02-23

  Useful link: 7 Practical Tips for Cheating at Design

  Link: 7 Practical Tips for Cheating at Design

  Read more →

• 2018-01-06

  Differences between `auto-fill` and `auto-fit`

  The difference happens when there are not enough content to fill up all columns.

  When the screen is wide enough to fill in more "minmax(200px, 1fr)" columns, auto-fill will fill extra empty 200px width columns.

  When it is auto-fit, extra column works only where there is content there. So there won’t be any extra empty columns in auto-fit.

  

  Read more →

• 2018-01-04

  Block-grid layout with CSS Grid

  In this example, we create the block-grid effect by using CSS grid grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)).

  Read more →

• 2017-05-10

  Flexbox block-grid example

  I created an example that demonstrates block-grid by using Flexbox.

  https://codepen.io/makzan/pen/VbQdWJ/

  Read more →

Courses