Advanced CSS Layouts
Table of Contents
Grid & Flexbox Review
IntroductionJen Kramer sets expectations for what is covered in Advanced CSS Layouts, and gives a tour of the Github course repository.
Flexbox Review ExerciseStudents 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 SolutionJen reviews the solution for the Flexbox portion of the exercise.
CSS Grid Review SolutionJen reviews the solutions for the CSS Grid portion exercise that included span syntax, number syntax, and grid area syntax.
CSS Flexbox & Grid Review Q&AJen 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 SetupJen 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 HTMLJen adds HTML to incorporate the Off-Canvas Menu into the page.
ARIA Attributes for AccessibilityJen demonstrates how to make the Off-Canvas Menu more accessible by adding screen reader directions in the HTML.
Aligning Navigation ItemsJen positions the hamburger menu on the page, adds screen reader specific CSS, and creates a color change on hover.
Off-Canvas Menu StylingJen 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 CSSJen 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 StylesJen 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 PropertiesJen 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 PropertiesJen 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 PropertiesJen 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 PropertiesJen 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 DeadJen reviews what was accomplished by refactoring the layout with custom properties and the CSS Calc() method.
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 GridJen 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 ReorderingJen 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 ItemsJen 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 ExerciseStudents 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 SolutionJen reviews a possible solution to the article layout exercise.
Type ScaleJen 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 ScaleJen 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 ExerciseStudents 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 SolutionJen reviews a possible solution to the type scale exercise.
Tables & Forms
Basic HTML for TablesJen briefly reviews the standard HTML of a table, then adds basic HTML elements such as a caption, head of the table, and accessibility attributes to
Basic CSS for TablesJen adds a screen reader and the accessibility requirements associated with it, then adds table borders and differentiates the rows with color.
:before & :afterJen 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 QueriesJen constructs the styling for the title of the table, then constructs a media query that makes the table more readable.
Responsive Tables Layout ExerciseStudents 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 SolutionJen reviews a possible solution to the responsive tables layout exercise.
Responsive Forms ExerciseStudents 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 SolutionJen reviews a possible solution to the responsive forms exercise.
Wrapping UpJen wraps up the course by discussing the limitations to the techniques discussed today, why the theme of today has been the death of Bootstrap, why Bootstrap may still be useful, and a review of why the techniques learned in the course are useful. Jen takes questions from the audience on further resources for learning, and whether moving concerns such as margin and padding to the CSS is better than the utility classes in Bootstrap.