# Advanced HTML & CSS

Canonical URL: <https://www.nobledesktop.com/classes/web-development-level2>

## 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](/classes/coding-classes-new-york-city-nyc), and is the second class in our [web design & web development bootcamps](/topics/web-development-certificates-nyc).

## What you'll learn

- Master important CSS concepts such as positioning, advanced CSS selectors, relative 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

## Prerequisites

Students should have HTML and CSS coding experience equivalent to our [Web Development with HTML & CSS](/classes/coding-classes-new-york-city-nyc) class.

## Curriculum

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

## Schedule
- Jul 6, 2026 – Jul 8, 2026 — NYC
- Sep 14, 2026 – Sep 16, 2026 — NYC

## Instructors

### Dan Rodney — School Director, Instructor, & Senior Course Developer

Dan Rodney has been a designer and web developer for over 20 years, creating coursework and leading innovative training initiatives at Noble Desktop. He teaches courses covering Figma, HTML & CSS, Adobe Photoshop, InDesign, Illustrator, and Power BI. Dan has also been at the forefront of integrating AI into design and business workflows, spearheading Noble Desktop’s latest AI course offerings. In addition to teaching and curriculum development, he writes custom scripts for InDesign (Make Book Jacket, Proper Fraction Pro, and more) and works with automation and AI-driven tools in his free time. You can find Dan on X (Twitter), LinkedIn, Facebook, and at danrodney.com.

Learn more about [Dan Rodney's](/dan-rodney) background and expertise.

### Brian McClain — Program Director & Senior Instructor

Brian McClain is an experienced instructor, curriculum developer, and web developer. Brian served as Director for a coding bootcamp before joining Noble Desktop in 2022, where he is now a lead instructor and course developer for both JavaScript and Python. He teaches Web Development, JavaScript, Python for Data Science, Machine Learning, and AI. Prior to Noble, he taught Python Data Science and Machine Learning as an Adjunct Professor of Computer Science at Westchester County College.

Brian is also an active industry professional in the field of generative AI app development. His website and iOS app, Artmink, provides appraisals of art and antiques from user-uploaded images.

### Colin Jaffe — Instructor

Colin Jaffe is a programmer, writer, and teacher with a passion for creative code, customizable computing environments, and simple puns. He loves teaching code, from the fundamentals of algorithmic thinking to the business logic and user flow of application building—he particularly enjoys teaching JavaScript, Python, API design, and front-end frameworks.

Colin has taught code to a diverse group of students since learning to code himself, including young men of color at All-Star Code, elementary school kids at The Coding Space, and marginalized groups at Pursuit.

Colin lives in Brooklyn with his wife, two kids, and many intricate board games.

### Greyson Frazier — Instructor

Greyson Frazier is a Software Engineer with over a decade of experience building applications using JavaScript, React, Node.js, Angular, TypeScript, Java, AWS, Tailwind, and Next.js. He holds a Bachelor of Science in Computer Science from Rutgers University and previously worked as a software engineer at Capital One, where he developed scalable, enterprise-level applications.

Greyson is an experienced instructor who has previously taught at Code Immersives and Coding Temple. He is passionate about creating hands-on, supportive learning environments and has developed curriculum designed to make complex technical concepts approachable and practical for students.

Based in Bloomfield, NJ, Greyson stays current with evolving web development frameworks, particularly React and Next.js, and is dedicated to helping students develop the skills needed to succeed in today’s technology landscape.

### Chett Tiller — Instructor

Chett Tiller is an experienced web developer who has brought his expertise with React, Node, and full-stack development to multiple companies over his career. After transitioning six years ago to an instructor, first at the Flatiron School and now at Noble Desktop, Chett has brought his passion for full-stack engineering to hundreds of students and guided them on their journeys from fledgling developers to their first job offers.

When Chett isn't busy teaching students or writing curriculum, he builds online products for local volunteer organizations and dabbles in game development.

## FAQ

### Do I need to bring anything to the class?


No. We provide computers (Mac or PC) with a coding editor installed. Choose your operating system at checkout.

## Pricing

**Tuition:** $975