Discover Classes. Earn Rewards.

Advanced HTML & CSS

at Noble Desktop - Midtown

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.

Course Details
Price $975
Start Date

Mon, Apr 15, 10:00am - Apr 17, 5:00pm Eastern Time ( 3 sessions )
Next start dates ( 1)

20 seats left Need more seats? See group options for 8+

Location Midtown, Manhattan
185 Madison Ave 3rd Floor
At E 34th St
New York, New York 10016
(Map)
Important
Class Level Intermediate
Age Requirements 18 and older
Average Class Size 15
Purchase Options
Book at School
Or
Book Now

No Booking Fees. Lowest Price Guaranteed. Earn Rewards.

Give as a Gift Save to WishList

6 people wishlisted

Start Dates (2)

Noble Desktop
185 Madison Ave, New York, NY
TBD
$975
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
Noble Desktop
185 Madison Ave, New York, NY
TBD
$975
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
Save to WishList Purchase a Gift Card

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

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 (370)

Questions & Answers (0)

Get quick answers from CourseHorse and past students.

Similar Classes

School: Noble Desktop

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

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

Ready to take this class?
BOOK NOW

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

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
  • Choose from thousands of classes & experiences
  • No expiration date
  • Instant e-delivery (or choose a date)
  • Add a personalized message
Buy a Gift Card
gift card with the CourseHorse logo gift card with the CourseHorse logo
Loading...