# Advanced HTML & CSS Course (Self-Paced)

Canonical URL: <https://www.graduateschool.edu/courses/advanced-html-css-self-paced>

## Overview

This course builds on your existing CSS knowledge by introducing more advanced styling techniques and smarter ways to target and control elements on the page. You’ll move beyond the fundamentals to create cleaner layouts, richer visual designs, and more flexible, maintainable styles.

You’ll learn how to manage layouts using the border box model, work with SVG graphics, and create visual effects such as gradients, shadows, and RGBA transparency. The course also deepens your understanding of positioning with relative, absolute, and fixed values, advanced selectors, and CSS variables. In addition, you’ll optimize layouts with responsive images using media queries, img srcset, and the picture element. Designed as the next step after foundational HTML and CSS training, this class fits seamlessly into a web design or web development bootcamp sequence.

## What you'll learn

- Master advanced CSS techniques such as positioning, complex selectors, relative sizing units (px, em, rem), and the calc() function
- Design polished visual styles with multiple background images, RGBA transparency, gradients, shadows, and related effects
- Work with SVG graphics in a variety of ways and style them directly using CSS
- Build responsive images with img srcset and the picture element to improve performance across devices
- Use CSS variables to create cleaner, more flexible, and easier-to-maintain stylesheets
- Create mobile-friendly off-screen navigation menus using only CSS
- Add motion and interactivity with CSS transitions and transforms

## Prerequisites

Students should have HTML and CSS coding experience equivalent to our [Web Development with HTML & CSS](/courses/coding-html-css) class.

## Curriculum

### 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

## Pricing

**Tuition:** $975