What You will Learn?

• Intro
• Starting to think responsively
• CSS Units
• CSS Units - Percentage
• Controlling the width of images
• min-width and max-width
• CSS Units - The em unit
• The problem with ems
• The Solution: Rems
• Picking which unit to use
• ems and rems - an example
• Flexbox refresher and setting up some HTML
• Basic Styles and setting up the columns
• Adding the background color
• Setting the column widths
• Spacing out the columns
• Controlling the vertical position of flex items
• Media Query basics
• Making out layout responsive with flex-direction
• flex-direction explained
• Creating a navigation
• Using flexbox to start styling our navigation
• Making out navigation look good
• Adding the underline
• A more complicated navigation
• Making the navigation responsive
• Taking a look at the rest of the project
• Setting up the structure
• Featured article structure
• The home page - HTML for the recent articles
• Home Page - HTML for the aside
• Starting the CSS for our page
• Starting the layout - looking at the big picture
• Starting to think mobile first
• Styling the featured article
• Changing the visual order with flex box
• Playing with the title’s position, and the downsides of negative margins
• Changing the visual order with flex box
• Styling recent articles for large screens
• Setting up the widgets and talking breakpoints
• Using a new pseudo-class to wrap-up the homepage
• Creating the recent posts page
• Setting up the About Me page
• Fixing up some loose ends
• Important Note. The viewport meta tag
• Module wrap up
• Outro