Jen Kramer
AnnieCannons
Course Description
Learn the essential CSS layout techniques for building responsive, beautiful web applications. You'll get hands-on practice using CSS Grid for two-dimensional, grid-based layouts and Flexbox for styling one-directional flow. You'll master using these techniques together along with responsive images to build real-world, responsive web layouts!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: October 26, 2021
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 13 minutes
Jen Kramer introduces the course by providing some personal teaching background, a brief demonstration of the material to be covered, and discusses the final project to be completed at the end of the course. Course resources including the course website and GitHub repository are also provided in this segment.
Jen discusses the background of responsive web design, its guiding principles: grid-based layouts, images that resize, and CSS media queries; and how the original ideas of responsive web design hold up today.
Flexbox
Section Duration: 32 minutes
Jen discusses the history of Flexbox, the intended use of Flexbox, disadvantages, helpful terminology, and how to decide on the media queries for projects.
Jen walks-through the starting contents of the Flexbox properties CodePen, the different HTML elements involved, CSS stylings, and briefly discusses the border-box model. The CSS box-sizing property determines what values are included when calculating the width of a pages content.
Jen demonstrates the effects of different Flexbox properties on a parent component including: display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content. Student questions regarding why there is a gap between the two rows, if it's possible to wrap a limited number of number of items, and if align-items is used with columns are covered in this segment.
Jen demonstrates the effects of Flexbox properties for child components including: order, flex-basis, and briefly discusses flex-grow and flex-shrink. Student questions regarding what the difference between width of 30% and flex-basis of 30% is, the difference between stretch in Flexbox and min-height or max-height, and the thought process between choosing between flex-direction row and column, are also covered in this segment.
Flexbox Grid System
Section Duration: 42 minutes
Jen discusses the background of the Flexbox grid system, an example of grid system HTML and CSS, and walks-through the provided HTML and CSS of the Flexbox grid system CodePen. Also provided is a walk-through of adding the CodePen's starting div elements and the CSS for the corresponding row class.
Jen discusses how the value of flex-basis for figure was calculated, demonstrates how to calculate flex-basis for examples spanning two, three, and four figures, and how to change the order of figures. Student questions regarding if the gap variable is only used for horizontal spacing and if the order should be changed if there are focusable elements for accessibility.
Jen demonstrates how to add media queries to make a grid system mobile-first by adjusting the Flexbox styling based on the size of the viewport. A student's question regarding if the same result could be achieved by using flex-direction: column to allow the use of align: justify is also covered in this segment.
Students are instructed to use the Flexbox grid system to complete the CodePen exercise by placing all five figures on the same row with a 2% gap between each box and If the window is less than 850px, have 3 boxes on one row and 2 boxes on the second row while maintaining the 2% gap between each box in the first row.
Jen walks-through the solution to the Flexbox grid system exercise. A student's question regarding if the calc function could be used within flex-basis is also covered in this segment.
Flexbox Practice
Section Duration: 41 minutes
Jen walks-through how to overlay a transparent figure caption on an image using absolute and relative positioning. Student questions regarding if changing the value of flex-grow could be used between changing media queries, how figcaption is with accessibility in mind, and if figure works for the thumbnail of a video are also covered in this segment.
Jen discusses the goals of a three part Flexbox exercise, provides the GitHub repository for setup locally, the contents of each part of the exercise, and instructions for each section's completion. Some advanced, but not required, CSS features, such as shape-outside, are also available in the Flexbox exercises.
Jen provides a short exercise to practice creating a collections Flexbox layout that matches the given images for desktop, tablet, and mobile sizes. A walkthrough of the solution and some possible variations to the collections section is then provided. Student questions regarding why position relative is needed, what the difference between min-width and max-width in media queries is, and what the effect of object position and object fit is are also covered in this segment.
Jen provides a short exercise to practice creating a mission statement that aligns above the previously created collections section for each viewport size accordingly. A walkthrough of the solution, some possible variations, and a demonstration of the built-in FireFox shape-outside tool is also provided in this segment.
Jen provides a short exercise to practice creating a footer for the previously created mission and collections sections that flexes with each viewport size. A walkthrough of the solution and some possible variations to the footer section is also provided in this segment.
Flexbox Header & Navbar
Section Duration: 31 minutes
Jen live codes the HTML to create a header with navigation and centered logo for the page previously built in the Flexbox exercises. A student's question regarding why a footer would display in the middle of the page is also covered in this segment.
Jen walks-through adding styling to the header and navigation links for desktop viewport dimension including removing the top padding or margin above the header, centering the logo, and removing the list styling. The benefits of setting links to display block are also covered in this segment.
Jen live codes the header and navbar styling for the tablet viewport dimension, discusses the difference between rem and em units, and aligns the logo above the navigation links. A student's question regarding if order could be set for a dynamic CMS to guarantee the logo is centered is also covered in this segment.
Jen walks-through adding styling for the mobile version of the header and navbar, changing the navigation links to red and white buttons, and overriding the button coloring for the logo item. How cascade and specificity affect CSS declarations and why a hover state was added to a mobile view is also briefly discussed in this segment.
Responsive Images & Picture Element
Section Duration: 47 minutes
Jen discusses the background of responsive images, the meaning of content choices, different image format types, pixel density, and image display dimensions. A brief overview of the history of responsive images is also discussed in this segment.
Jen discusses the best practices when using responsive images, only one image should load, what code not to use such as hidden images, what code to use cautiously, and which tags are user defined images compared to browser defined. The difference between landscape and portrait, variables that are author known and browser known, responsive background images, and a walk-through of example code is also covered in this segment.
Jen briefly discusses the code provided in the banner demo file and where the different sized images were generated. A demonstration of what happens when different browsers are allowed to choose what image is displayed based on the view port size is also provided in this segment.
Jen walks-through using a free resource to generate multiple sizes of an image, the corresponding HTML5 img tag code, and picture tag code. A walkthrough of implementing the generated img tag code and a student's question regarding if there are any platform agnostic APIs for generating images are also covered in this segment.
Jen demonstrates implementing a hero image using a picture element which allows the author to control which images are used at which viewport sizes. Adding modifications to the hero image CSS to remove the image jumps is also demonstrated in this segment.
Students are instructed to complete the previously built website by implementing a final "popular prints" section with Flexbox that matches the provided png files for each viewport size.
Jen walks-through the solution to the final Flexbox exercise.
CSS Grid
Section Duration: 37 minutes
Jen provides an overview of Grid, including why to use Grid instead of Flexbox, the history, browser support, markup, CSS syntax, and tracking parents and children. Grid has additional syntax including: span notations, named lines, named grid template areas, and multiple shorthand and longhand variations for CSS properties.
Jen discusses the provided HTML and CSS in the Grid layout demo and demonstrates the CSS syntax for positioning div elements on a line-based Grid layout. Grid will infer the total number of columns and rows until all items are placed. This segment completes the first portion of the Mondrian painting demo used in Rows & Columns Practice.
Jen provides a short exercise to practice assigning grid-row and grid-column for the remaining div elements in the Mondrian painting demo. A walkthrough of the solution for each div element is then provided at the end of this segment.
Jen demonstrates how to set the width of columns and the height of rows using the CSS properties grid-template-columns and grid-template-rows. The corresponding background colors for each div element are then applied in this segment.
Jen demonstrates how to quickly complete the Mondrian painting demo by using a line-based grid layout with span notation. Using span notation will allow for the same grid layout while requiring less total code.
Grid System
Section Duration: 1 hour, 40 minutes
Jen walks-through how to create a Grid version of the desktop only layout used in the previous Flexbox grid system example. Using Grid to create this layout does not require any math and is less code to write overall. A student's question regarding what the value of the gap property represents is also covered in this segment.
Jen live codes a responsive Grid by adding media queries, new classes with an order property, and new classes with a grid-column property. New classes may overlap with old classes in order to override stylings.
Jen demonstrates how to use Grid's ability to overlap cells to quickly overlay a figure caption on top of a figure. Using Grid to overlay figure captions avoids having to use absolute and relative positioning, however, the two elements being overlaid with Grid must be siblings. A student's question regarding why three rows were used instead of two is also covered in this segment.
Jen walks-through how to alternate between overlapped images with grid, CSS animation properties, and keyframes. The keyframes percentage values represent the percent of time passed in the animation duration.
Students are instructed to, using CSS Grid, lay out the page as seen in the screenshots for desktop and mobile dimensions provided in the GitHub repository.
Jen walks-though the solution to the mosaic grid exercise.
Jen demonstrates how to create cells for featured content in Grid with two different methods. The first method is by applying a class with grid-row and grid-column with a larger span for emphasis. The second method is by using the grid-template-areas and grid-area properties to assign names to cells and cell names to classes.
Jen live codes the HTML markup for the first card to be used in a future Grid layout using heading, image, paragraph, and anchor tags; and provides a short exercise to practice coding HTML markup for cards. An article tag used to separate and indicate the card as one unit of information.
Jen demonstrates combining Flexbox and Grid properties to define and arrange cards on a Grid layout and apply a Grid layout on the contents of the cards. A walkthrough of CSS styling all of the different viewport sizes and suggestions for further styling is also provided in this segment.
Students are instructed to build an inside page with a Grid layout using any of material previously covered in the Grid section of this course. Students are allowed to copy the header and footer from the Flexbox portion of the course if so desired.
Jen walks-through a possible solution to the final CSS grid exercise.
Wrapping Up
Section Duration: 2 minutes
Jen wraps up the course by recommending resources for continued learning about HTML and CSS. A student's question regarding how to create a downloadable resumé is also covered in this segment.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops