Table of Contents
Grid & Flexbox Review
Introduction
Jen Kramer sets expectations for what is covered in Advanced CSS Layouts, and gives a tour of the Github course repository.Flexbox Review Exercise
Students are instructed to complete the first exercise, which is a review of both Flexbox, and CSS Grid that includes span syntax, number syntax, and grid area syntax.Flexbox Review Commentary
Jen highlights why it's important to separate HTML from CSS from JavaScript into defined roles due to both maintainability and accessibility.Flexbox Review Solution
Jen reviews the solution for the Flexbox portion of the exercise.CSS Grid Review Solution
Jen reviews the solutions for the CSS Grid portion exercise that included span syntax, number syntax, and grid area syntax.CSS Flexbox & Grid Review Q&A
Jen answers a clarifying questions from the audience, then goes on to discuss which method covered in the previous exercise should be chosen by a developer, suggests a resource for further reading on usecases, and foreshadows the discussion of using margin versus justify-content's space-between attribute when utilizing Flexbox.
Pure CSS Off-Canvas Menu
Off-Canvas Menu Setup
Jen introduces the Off-Canvas Menu by giving a tour of what the existing code is doing, and adding context for the tools being used for the course.Off-Canvas Menu HTML
Jen adds HTML to incorporate the Off-Canvas Menu into the page.ARIA Attributes for Accessibility
Jen demonstrates how to make the Off-Canvas Menu more accessible by adding screen reader directions in the HTML.Aligning Navigation Items
Jen positions the hamburger menu on the page, adds screen reader specific CSS, and creates a color change on hover.Off-Canvas Menu Styling
Jen adds styling to the navigation item container, adds movement to the menu with a transition, and adds styling to both the list and the links.Click Events with CSS
Jen uses the :target pseudo-class to apply styles to the menu when the id is selected, then uses an immediate sibling selector to close the menu when another point on the page is selected while the menu is open.Media Query Breakpoint Styles
Jen differentiates the styling for devices larger than mobile by allowing the navigation bar to flow across the page when it's large enough.
CSS Calc() & Custom Properties
CSS Calc()
Jen introduces CSS Calc(), a method to calculate values in CSS. The browser support for the method are discussed, in addition to the benefits and syntax quirks. How to use the method with Sass is also touched on.CSS Custom Properties
Jen introduces CSS custom properties that work with inheritance and the cascade to allow users to define values that can be used elsewhere in the code. The current browser support is discussed, as well as the syntax for using a custom property.Sass vs CSS Custom Properties
Jen introduces how Sass compiles, then compares it to CSS custom properties. Using a Codepen, Jen demonstrates how scoping affects the ability to declare custom variables, and how this differs from Sass. A discussion is held on when Sass could still be more a appropriate tool than custom properties.Refactoring a Layout: Calc() & Custom Properties
Jen builds off an original exercise using Flexbox from the course, CSS Grid and Flexbox, by refactoring it to use CSS custom properties and the Calc() method.Refactoring a Layout: Applying Custom Properties
Jen demonstrates the power of custom properties by utilizing the cascade to recalculate the flex-basis based off of the width set on individual columns in the media queries. The gap between the columns and rows is then implemented by applying another custom property that calculates itself based on the other custom properties.Refactoring a Grid System: Bootstrap is Dead
Jen reviews what was accomplished by refactoring the layout with custom properties and the CSS Calc() method.
Complex Layouts
Applying Custom Properties & CSS Calc()
Jen introduces the home page exercise, which is a real-life application of custom properties and the CSS Calc() method to a webpage with more a more complex grid layout.Identifying Patterns & Creating a Grid
Jen breaks down the problem by pointing out the specific patterns that occur in the HTML code, then uses this to write the CSS that utilizes the custom properties from the previous example. It's also demonstrated how to insert default values into custom properties as a fallback. Once the general selector's custom properties are set, Jen completes the largest media query, and fixes the gap calculation to be nicer to look at on the page.Responsive Column Reordering
Jen demonstrates how to use the custom width property and ordering to have a column reorder itself underneath the other columns with very few lines of code. Students are instructed to attempt the last media query by themselves before continuing.Responsive Element Items
Jen demonstrates how to target items within an element using the custom properties that were already written to lay out differently when the breakpoints on the page are reached.Article Layout Exercise
Students are instructed to use custom properties and CSS Calc() to create a webpage matching an example image from starter code in chapter 5 of the course repository.Article Layout Solution
Jen reviews a possible solution to the article layout exercise.
Font Sizes
Type Scale
Jen introduces the problem of how to choose type that scales well, then navigates to a website called Type Scale that calculates the a family of sizes based on factors such as the base size, font, scale, and weight.Custom Properties Type Scale
Jen addresses type sizes with CSS Calc() and custom properties to demonstrate how to utilize both to quickly and effectively change the type scale between mobile and desktop with far less code.Type Scale Exercise
Students are instructed to adjust the type on the home page to match an example image from the starter code in chapter 8 the course repository.Type Scale Solution
Jen reviews a possible solution to the type scale exercise.
Tables & Forms
Basic HTML for Tables
Jen briefly reviews the standard HTML of a table, then adds basic HTML elements such as a caption, head of the table, and accessibility attributes toBasic CSS for Tables
Jen adds a screen reader and the accessibility requirements associated with it, then adds table borders and differentiates the rows with color.:before & :after
Jen uses a double colon followed by a "before" or "after" keyword that creates a pseudo-element that is the first or last child of the selected element. The pseudo-elements are used to create labels and units on the table items.Table Title & Media Queries
Jen constructs the styling for the title of the table, then constructs a media query that makes the table more readable.Responsive Tables Layout Exercise
Students are instructed to recreate a table from the starter code, and the images given in chapter 10 of the course repository. The key to the exercise is to combine the page and table layouts so that they both work correctly. Students must override some of the layout settings in this challenge.Responsive Tables Layout Solution
Jen reviews a possible solution to the responsive tables layout exercise.Responsive Forms Exercise
Students are instructed to recreate a form using the starter code and provided example images in chapter 11 of the course repository. To complete the exercise, ideas of how to structure the HTML in pattern, flexbox, custom properties, Calc(), and other concepts are all utilized.Responsive Forms Solution
Jen reviews a possible solution to the responsive forms exercise.