Discover Classes. Earn 10% Rewards.

Advanced HTML & CSS

Enhance your web design skills with an in-depth exploration of advanced styling techniques and powerful CSS features. Harness the full potential of HTML and CSS to create visually stunning webpages with gradient effects, shadows, and transparent colors. Take your coding expertise to the next level.

  • Intermediate
  • 18 and older
  • $975
  • Earn 10% Rewards
  • Price Lock
  • 185 Madison Ave, New York, NY & Virtually Online
  • 21 hours over 3 sessions
Book at School

Express Checkout – $975


Proceed to Checkout

No Booking Fees. Lowest Price Guaranteed. Earn 10% Rewards.

Give as a Gift

Start Dates (2)

  • $975/person
  • 21 hours over 3 sessions
20 left
Book
Show all 3 sessions
  • Mon, Apr 14 at 10:00am - 5:00pm
  • Tue, Apr 15 at 10:00am - 5:00pm
  • Wed, Apr 16 at 10:00am - 5:00pm
20 left
Book
Show all 3 sessions
  • Mon, Jul 14 at 10:00am - 5:00pm
  • Tue, Jul 15 at 10:00am - 5:00pm
  • Wed, Jul 16 at 10:00am - 5:00pm
Showing 12 of 2

Class Description

Description

What you'll learn in this html class:

From more advanced ways to visually style content, to better ways of targeting elements with CSS, this course will supercharge your CSS skills.

Take control over the layout of your webpages by learning about an alternate box-model called border-box, use vector graphics (SVG), and create visual effects such as CSS gradients, shadows, transparent colors (with RGBA), and more. Gain a deeper understanding of how positioning works (relative, absolute, fixed), target elements with advanced CSS selectors, and learn the power of CSS variables. You’ll better optimize your pages 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.

This course has a Prerequisite: 

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

Learn more about Advanced HTML & CSS at Noble Desktop.

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

Refund Policy

  • Students may cancel up to 14 days before the class/program start date and receive a refund, less the registration fee (10% of the undiscounted course price). 
  • Cancellations within 14 days are not permitted, but students may reschedule up to three business days before the class start date.
  • For cancellations and reschedules, please email us at [email protected]

In any event where a customer wants to cancel their enrollment and is eligible for a full refund, a 5% processing fee will be deducted from the refund amount.

Reviews of Classes at Noble Desktop (390)

Questions & Answers (0)

Get quick answers from CourseHorse and past students.

Similar Classes

Noble Desktop

Noble Desktop is a renowned educational institution that specializes in providing comprehensive training in various creative and technology-related fields. Established in 1990 and headquartered in New York City, Noble Desktop has earned a stellar reputation for its high-quality courses and innovative...

Read more about Noble Desktop

CourseHorse Approved

This school has been carefully vetted by CourseHorse and is a verified NYC educator.

Noble Desktop

Noble Desktop

All classes at this location

We are located in New York City on 34th street and Madison Avenue, a few blocks from Penn Station, Port Authority and Times Square. You may also attend this class live online (virtual training) via Zoom. We will reach out with additional information, including the Zoom info and class files.

Also available virtually online

Reviews of Noble Desktop at coursehorse.com

Give This Course as a Gift Card

  • Thousands of classes
  • No expiration
  • Unique and memorable gifts for any occasion
  • Personalized
  • Explore a passion, gain a new skill, discover a new hobby, engage in a memorable experience
  • Instant delivery
  • Lock in a price with the Inflation Buster Gift Card Price Adjuster™

Buy a Gift Card

Book this Class as a Group Event

Booking this class for a group? Find great private group events

Or see all Coding Group Events

Explore group events and team building activities ranging from cooking, art, escape rooms, trivia, and more.

CourseHorse Gift Cards

  • Creative & unique gift for any occasion
  • Thousands of classes & experiences
  • No expiration date
  • Instant e-delivery (or choose a date)
  • Add a personalized message
  • Lock in a price with the Inflation Buster Gift Card Price Adjuster™
Buy a Gift Card
gift card with the CourseHorse logo gift card with the CourseHorse logo
Loading...