Advanced HTML & CSS
via Noble Desktop
Affiliated with Course Report
Extend your webpage-building skills in Noble Desktop's Advanced HTML & CSS course. The curriculum develops more involved layout and styling techniques on top of an existing coding foundation. You practice organizing and refining webpage code so that designs can adapt more effectively to content requirements and different viewing sizes.
What's included with live classes
- Free course retake within one year to refresh the material and gain practice.
- Course workbook
- Class recordings
Overview
From more advanced ways to visually style content to more efficient ways to target elements with CSS, this course will elevate your CSS skills.
Take control of your webpage layout by learning an alternate box model called border-box, work with vector graphics (SVG), and create visual effects such as CSS gradients, shadows, transparent colors using RGBA, and more. Gain a deeper understanding of how positioning works (relative, absolute, and fixed), target elements with advanced CSS selectors, and learn the power of CSS variables. You’ll optimize your pages more effectively with responsive images using CSS media queries, img srcset, and the picture element.
This course builds upon Web Development with HTML & CSS, and is the second class in our web design & web development bootcamps.
Prerequisites
Students should have HTML and CSS coding experience equivalent to our Web Development with HTML & CSS class.
Schedule & enrollment
Find dates that fit your schedule, then book on Noble Desktop.
- Live tuition
- $975
- Course length
- 18 hours
All class times are Eastern (ET).
-
Dates
–
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
-
Dates
–
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
-
Dates
–
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
Confirm current dates and availability on Noble Desktop before booking. Enrollment opens in a new tab.
Self-paced tuition & enrollment
Learn through recorded lessons on your own schedule.
- Tuition
- $975
- Course length
- 18 hours
- Format
- Self-paced online
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.
Loading enrollment options…
Prefer to enroll directly? Open the course website.
Curriculum
What you'll learn
- Master important CSS concepts such as positioning, advanced CSS selectors, sizing units (px, em, rem), calc() and much more
- Learn sophisticated styling with multiple background images, transparent colors using RGBA, CSS gradients, shadows, and more
- Learn multiple ways to use and style SVG in webpages
- Code responsive images using img srcset and the picture element
- Learn CSS variables for cleaner, more flexible code
- Create mobile-optimized off-screen navigation menus using only CSS
- Create animated effects using CSS transitions and transforms
Course syllabus
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
Self-paced course
Learn through recorded lessons on your own schedule.
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.
View self-paced tuition & enrollmentThis 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.
Self-paced prerequisites
Students should have HTML and CSS coding experience equivalent to our Web Development with HTML & CSS class.
Self-paced curriculum
What you'll learn self-paced
- 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
Self-paced syllabus
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
What's included with self-paced
- Course workbook
Course Reviews
Is this course right for you?
Choose this continuation once you are comfortable writing basic HTML and CSS. Compare the introductory Web Development with HTML & CSS course if you still need practice with document structure, selectors, styling, and building a multipage website.