Advanced HTML & CSS

This course takes your CSS skills further by teaching more advanced styling techniques and more efficient ways to target and control elements on the page. You’ll move beyond the basics to create cleaner layouts, richer visuals, and more flexible designs.

Learn how to manage layouts using the border-box model, work with SVG graphics, and create visual effects such as gradients, shadows, and transparent colors with RGBA. You’ll gain a stronger understanding of positioning with relative, absolute, and fixed values, use advanced CSS selectors, and take advantage of CSS variables. The course also covers optimizing layouts with responsive images using media queries, img srcset, and the picture element. This class builds on foundational HTML and CSS skills and serves as the next step in the web design and web development bootcamp sequence.

What You Will Learn

• Master advanced CSS concepts including positioning, complex selectors, absolute and relative sizing units (px, em, rem), and the calc() function
• Create sophisticated visual styles using multiple background images, RGBA transparency, gradients, shadows, and more
• Work with SVG graphics in multiple ways and learn how to style them directly with CSS
• Build responsive images using img srcset and the picture element for optimized performance
• Use CSS variables to write cleaner, more flexible, and maintainable code
• Create mobile-friendly off-screen navigation menus using only CSS
• Add motion and interactivity with CSS transitions and transforms

Course Outline

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

This course is available for 30 days. You can choose when to start your access period. Once you activate, you will have 30 days to complete it (access the course materials, quizzes, projects and videos). You may request one extension of seven (7) days. Other extension requests will be evaluated on a case-by-case basis. Videos are not downloadable.