Discover Classes. Earn Rewards.

Advanced HTML & CSS

Expand your CSS skills and take control over webpage layouts with Advanced HTML & CSS. Learn about visual styling, targeting elements, alternate box models, vector graphics, visual effects, and more. This course builds upon the foundations of Web Development with HTML & CSS and is perfect for those looking to enhance their web design abilities.

  • Level Advanced
  • Age 18 and older
  • Price $975
  • Location Interactive Online Classroom
Advanced HTML & CSS

Start Dates (2)

  • $975
  • Interactive Online Classroom
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
Save to WishList Purchase a Gift Card

Class Description

Description

What you'll learn in this html class:

In this hands-on class, you’ll expand your knowledge of what CSS & HTML can do, enabling you to create well-designed webpages.

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.

Learn more about Advanced HTML & CSS at NYC Career Centers.

  

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 11 business days before the class/program start date and receive a refund, less the registration fee (10% of the undiscounted course price).
  • Cancellations within 11 business days are not permitted, but students may reschedule up to 4 business days before the class start date.

For cancellations and reschedules, please email us at [email protected]

Reviews of Classes at NYC Career Centers (679)

Questions & Answers (0)

Get quick answers from CourseHorse and past students.

Similar Classes

NYC Career Centers

Since 1988, Career Centers has been a leader in software training courses for individuals and businesses, including Microsoft Excel, VBA, PowerPoint, SQL Server, Adobe Photoshop, InDesign, Illustrator, and AutoCAD.

Our courses are instructor-led in small class sizes, located in our state-of-the-art training...

Read more about NYC Career Centers

CourseHorse Approved

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

NYC Career Centers

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