CSS.POCE.2: Flexbox Personal Page


This is a summation of the responsive layout and Flexbox material so far. We'll make a fully-responsive page using Flexbox and media queries, in addition to other basic styles such as display and margin.


  1. 1.
    Begin with the starter code repo here. We will create the same personal page as in the sample page.​
  2. 2.
    Use Flexbox and media queries to achieve the responsive behaviour in the sample page.​
  3. 3.
    Begin with the mobile layout first and use media queries to apply layout styles needed for the larger layout sizes.
For mobile-first layouts we need to add the following meta tag in the HTML head. Read more about this tag here.​
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Reference solution

Click here to see the reference solution for this post class and here to see the code.