Advanced HTML & CSS Online

This course includes

18 hours of project-based training from experts
Software Access
Answers from real instructors
Proprietary workbook included
Retake for free within 1 year
Verified digital certificate of completion
Learn at an accredited institution

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.

This course has a prerequisite

Students should have HTML and CSS coding experience equivalent to our Web Development with HTML & CSS class.

Tuition

Full Tuition

$975
Due before the class starts

This course includes

18 hours of project-based training from experts
Software Access
Answers from real instructors
Proprietary workbook included
Retake for free within 1 year
Verified digital certificate of completion
Learn at an accredited institution

Learning Experience Highlights

Training from government‑experienced instructors

Receive instruction from subject‑matter experts who bring proven government experience.

Specialized for government & DoD

Courses that are regularly updated based on feedback and industry developments, ensuring versions are mapped to federal competencies.

The instructor was wonderful and so knowledgeable. The course materials were extremely relevant to what my job is. I feel like I can be better because of this class.
— 2025 student

Three professionals sit in black chairs with laptops and notebooks, engaged in conversation against a red wall.

Real-world solutions

Directly addressing the day-to-day challenges of federal employees.

125+ departments & agencies served

Your trusted training partner, equipping public service professionals with the skills and knowledge to excel in their roles and drive meaningful impact.

100% Online. Start Anytime

24/7 access to our premium course videos and projects.
Industry experts are assigned as your course instructor. Message your instructor with any questions.
Participate in GSUSA online discussion forums — share ideas and receive additional support.
Hands-on quizzes and mini projects to test and reinforce concepts.

Earn a Certificate of Completion

Upon completion of this course, you’ll receive an official certificate testifying to your mastery of the curriculum. We’ll send you a link where you can download your certificate, share it online with your friends, post it to your professional network on LinkedIn, and view all your earned certificates. Congratulations on your achievement!

Shareable on

Sample credential for completion of Advanced HTML & CSS Course (Self-Paced)

A group of adult learners sits in a classroom, smiling and engaged in a government training session.

A government training instructor in a suit gestures while teaching in front of a whiteboard covered with notes and diagrams.

A person in professional attire holds a Graduate School USA folder, symbolizing participation in government training programs.

Advanced HTML & CSS Course (Self-Paced) Curriculum

What You'll Learn at a Glance

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

Course Syllabus

Download Syllabus PDF

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

Installments
	10% non-refundable deposit
$975.00	Total You Pay