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

Section 4

Attribute Selectors

• Adding link icons with attribute selectors
• “Ends with” attribute selector
• “Begins with” attribute selector
• “Contains” attribute selector

Relational Selectors

• Using first-child & last-child
• Using first-of-type
• Using nth-child
• Direct child/descendant selectors

CSS Variables (Custom Properties)

• Defining & using CSS variables
• The power of inheritance

Light & Dark Modes using CSS

• Styling webpages for light & dark modes
• Previewing light & dark modes in Chrome DevTools
• “Alt” text for embedded SVGS

Section 5

Creating Forms with HTML

• Creating a form & text inputs with labels
• Adding an email input, submit button, textarea, & select menu
• Fieldset, legend, & radio buttons
• Checkbox vs radio button

Styling Forms (with Attribute Selectors)

• Styling form elements
• Targeting inputs with attribute selectors

Relative Sizes: Em and Rem

• Em units
• Rem units

Section 6

Off-Screen Side Nav Using Only CSS

• Responsive off-screen navigation
• Toggling the navigation with a checkbox
• CSS transitions

Box-Shadow, Text-Shadow, & Z-Index

• Using the CSS box-shadow property
• Changing an element’s default stack order with position and z-index
• Inset shadows
• Adding drop shadows to text with CSS text-shadow
• Layering multiple text-shadows for a detached outline effect

CSS Transitions

• Using CSS transitions to animate elements on hover
• Adding easing
• Custom easing with Ceaser

CSS Transforms with Transitions

• Testing transforms using the DevTools
• Adding a scale transform & transitioning it
• Transform origin
• Adding a rotate transform
• Using the translate transform to nudge elements