Discover Classes. Earn 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 at Noble Desktop.

  • Intermediate
  • 18 and older
  • $975
  • Interactive Online Classroom
  • 21 hours over 3 sessions

Start Dates (3)

  • $975
  • Interactive Online Classroom
  • 21 hours over 3 sessions
20 seats left
Book
Show all 3 sessions
  • Mon, Apr 15 at 10:00am - 5:00pm
  • Tue, Apr 16 at 10:00am - 5:00pm
  • Wed, Apr 17 at 10:00am - 5:00pm
20 seats left
Book
Show all 3 sessions
  • Mon, Jul 15 at 10:00am - 5:00pm
  • Tue, Jul 16 at 10:00am - 5:00pm
  • Wed, Jul 17 at 10:00am - 5:00pm
20 seats left
Book
Show all 3 sessions
  • Mon, Oct 28 at 10:00am - 5:00pm
  • Tue, Oct 29 at 10:00am - 5:00pm
  • Wed, Oct 30 at 10:00am - 5:00pm
Showing 13 of 3

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.

Remote Learning

This course is available for "remote" learning and will be available to anyone with access to an internet device with a microphone (this includes most models of computers, tablets). Classes will take place with a "Live" instructor at the date/times listed below.

Upon registration, the instructor will send along additional information about how to log-on and participate in the class.

Also available in-person in NYC

Syllabus

Section 1

Normalize.css, Default Box Model, & More

  • Using normalize.css
  • Grouping CSS selectors using a comma separator
  • Fluid, hi-res images
  • Constraining the width of content
  • Visualizing the box model (margin, padding, and border) in Chrome’s DevTools
  • Fixing spacing issues around images
  • CSS shorthand for the background property

Font-Weight, Font-Style, & Unitless Line-Height

  • Adding custom web fonts from Google Fonts
  • Using font-weight & font-style
  • Unitless line-height

Box Model: Content-Box vs. Border-Box

  • How border-box is different than content-box
  • Best practice for applying border-box to everything

Intro to SVG (Scalable Vector Graphics)

  • Adding SVG to a webpage
  • Sizing SVG
  • Web Servers: Configuring a .htaccess file for SVG & gzip

Section 2

Embedding SVG

  • Embedding SVG (instead of linking)
  • Styling SVG using CSS
  • Using currentColor

SVG Sprites

  • Defining the SVG sprite
  • Using a sprite
  • Styling sprites

CSS Position Property

  • The static value & the normal document flow
  • The relative value
  • The absolute value
  • The dynamic duo: relative parent, absolute child
  • The fixed value

Creating a Fixed Navbar & RGBA Color

  • Creating a fixed navbar on wider screens
  • RGBA color

Section 3

CSS Background Gradients & Gradient Patterns

  • CSS background gradients
  • Creating a striped background using gradients

Multiple Backgrounds & Viewport Sizing Units (vw)

  • Multiple backgrounds on a single element
  • Colorizing a photo by overlaying a transparent gradient
  • Using viewport sizing units (vw)

Creating Columns with Inline-Block & Calc()

  • Displaying content as columns using inline-block
  • Using CSS calc()

CSS Variables (Custom Properties)

  • Defining & using CSS variables
  • The power of inheritance

Section 4

Relational Selectors

  • Adjacent selectors
  • Using first-child & last-child
  • Using first-of-type
  • Using nth-child
  • Direct child/descendant selectors

Pseudo-Elements & the Content Property

  • Using pseudo-elements
  • The content property
  • Seeing pseudo-elements in Chrome’s DevTools

Attribute Selectors

  • Adding link icons with attribute selectors
  • “Ends with” attribute selector
  • “Begins with” attribute selector
  • “Contains” attribute selector

Styling Forms with Attribute Selectors

  • Styling form elements
  • Targeting inputs with attribute selectors
  • The ::placeholder pseudo element

Relative Sizes: Em and Rem

  • Em units
  • Rem units

Section 5

Flix: Creating a Scrollable Area

  • Creating a horizontal scrollable area
  • Optimizing the scrolling for iOS touch devices

Flix: Media Queries for Retina/HiDPI Graphics

  • Using media queries to load hi-res images for Retina/HiDPI displays

Responsive Images

  • Img srcset
  • The picture element

Off-Screen Side Nav Using Only CSS

  • Responsive off-screen navigation
  • Toggling the navigation with a checkbox
  • CSS transitions

Section 6

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

Hiding & Showing: Display, Visibility, & Opacity

  • Removing an element from the normal document flow with display: none
  • Hiding/showing elements with visibility
  • Hiding/showing elements with opacity
  • How display, visibility, & opacity differ

CSS Transitions

  • Transition-property & transition-duration
  • Transition shorthand & the all keyword
  • Transitioning position coordinates
  • Adding easing with transition-timing-function
  • Custom easing with Ceaser

CSS Transforms with Transitions

  • Testing transforms using the DevTools
  • Adding a scale transform & transitioning it
  • Transform origin
  • Rotate & skew transforms
  • 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]"

Reviews of Classes at Noble Desktop (372)

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 Online educator.

Noble Desktop

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