Advanced HTML & CSS

Section 1

Starting a New Website from Scratch & Emmet Shortcuts

• Creating a new HTML page with Emmet shortcuts
• Adding content & styling it

Variable Fonts (from Google Fonts) & Unitless Line-Height

• Adding custom web fonts from Google Fonts
• Using font-weight
• Unitless line-height

Styling the Navbar

• Styling the Navbar
• Hover & Focus Link Styles

CSS Box Model: Content-Box vs. Border-Box

• How border-box is different than content-box
• Visualizing the box model in Chrome’s DevTools
• Fixing spacing issues around images
• Flexible padding: using percentage amounts

Section 2

SVG Sizing (Width & Height) and Embedding SVG

• How Width & Height Affect Sizing of SVG
• Embedding SVG (instead of linking)
• Styling SVG using CSS
,
• Using currentColor

CSS Position Property

• Static position & the normal document flow
• Relative position
• Absolute position
• The dynamic duo: relative parent, absolute child
• Fixed position

Fixed Position Navbar, RGBA, & Backdrop Filters

• Creating a fixed navbar on wide & tall screens
• RGBA color
• Blurring & desaturating a background with CSS backdrop filters

Improvements for Mobile Devices

• Preventing mobile text size adjustment
• Preventing a fixed navbar on short screens
• Dealing with the iPhone’s dynamic island (or notch)
• CSS calc()

Section 3

Background Gradients & Text Gradients

• CSS background gradients
• CSS text gradients

Multiple Backgrounds, Viewport Sizing (vw), & Clamp

• Multiple backgrounds on a single element
• Colorizing a photo by overlaying a transparent gradient
• Using viewport sizing units (vw)
• Using Clamp to set a min & max font size

Creating Columns with Flexbox

• Displaying content as columns using Flexbox
• Vertical alignment with Flexbox

Pseudo-Elements & the Content Property

• Using pseudo-elements
• The content property
• Seeing pseudo-elements in Chrome’s DevTools