# Web Development with HTML & CSS

Canonical URL: <https://www.nobledesktop.com/classes/coding-classes-new-york-city-nyc>

## Overview

In this coding class, you’ll learn how to develop websites with HTML and CSS, the languages used to create websites and web applications.

You’ll gain hands-on experience coding websites from scratch, all the way through uploading to make the site live. You’ll learn best practices for structuring and tagging the content of your webpages with HTML and styling the content with CSS.

With HTML, you’ll learn how to create webpages with text, images, and more. With CSS, you’ll style the content, create centered page layouts, add background images, style navigation, and make the pages responsive so they adapt to various screen sizes using media queries. To make the site go live, you’ll upload files via FTP. We provide you with prepared content (text and images) so you can focus on coding.

## What you'll learn

- Start learning to build websites by hand-coding HTML and CSS
- Markup content (text, images, lists, links, etc.) using HTML (Hypertext Markup Language)
- Style the content using CSS (Cascading Style Sheets), setting font, size, color, spacing, width, and more
- Create multi-page websites with text, images, and more
- Adapt the layout for different screen sizes to create responsive webpages
- Use web browser developer tools to look behind the scenes and experiment with code changes
- Upload your website files using FTP to make the site live

## Curriculum

### Section 1

#### Coding Basics: Intro to HTML Syntax

- Basic tags: HTML, head, title, & body
- Headings, paragraphs, & lists

#### Tags & Attributes: Strong, Em, Doctype, Lang, & Meta

- Strong & em tags
- Doctype
- Lang attribute
- Meta tag & unicode character set

#### Coding Links: Absolute & Relative URLs

- Anchor tags & hrefs
- Linking to other websites
- Linking to pages within a website
- Opening a link in a new browser window/tab

#### Adding Images

- Break tag
- Image tag & source attribute
- Using width, height, & alt attributes

### Section 2

#### Intro to Cascading Style Sheets (CSS)

- Style tag
- Tag selectors
- Font-size, font-family, color, & line-height properties
- Hexadecimal color codes

#### CSS Class Selectors

- Class attribute
- CSS class selectors
- Span tag
- CSS opacity

#### Div Tags, ID Selectors, & Basic Page Formatting

- Dividing up content with the div tag
- Assigning IDs to divs
- Setting width & max-width
- CSS background-color
- Adding padding inside a div
- Centering content
- CSS borders
- CSS shorthand & the DRY principle

#### Browser Developer Tools & Validating HTML

- Opening the DevTools in Chrome
- Editing HTML in the DevTools Elements panel
- Enabling, disabling, & editing CSS in the DevTools
- Using DevTools to fine-tune your CSS
- Hexadecimal shorthand
- Checking for errors: validating your code

### Section 3

#### HTML Semantic Elements & the Document Outline

- Using headings to product a good document outline
- Header, nav, aside, & footer elements
- Articles & sections
- Main element
- Figure & figcaption elements

#### Revolution Travel: Page Layout

- Organizing content into semantic sections
- Adding images
- Tagging headings

#### The Box Model

- What is the box model?
- Setting width
- Adding a hero image
- Fluid-width images
- Setting a default font for the page
- Margin & padding spacing
- Centering divs

#### Coding Links: Images & Page Jumps

- Anchor tags & relative URLs
- Wrapping links around images
- External links (using the target attribute)
- Links within a page

### Section 4

#### Styling Links

- Styling the anchor tag
- The :link, :visited, :hover, :focus, & :active pseudo-classes
- Ordering link styles

#### Styling the Navigation

- Semantically correct navigation
- Overriding default list styles
- CSS navigation styles
- Using descendant selectors

#### Specificity, Shared CSS, & Centering Content

- CSS specificity
- Overriding other link rules
- Moving embedded styles into an external CSS file
- Sharing styles across a site
- Text-align property

#### Setting the Viewport Meta Tag

- Disabling mobile browser text size adjustment
- Viewport meta tag
- device-width
- initial-scale
- maximum-scale

### Section 5

#### Starting a New Site & CSS Background Images

- Setting a default font
- Removing default page margin
- Linking to an external style sheet
- CSS background images
- background-position
- background-repeat
- background-size

#### Adding Custom Fonts (using Google Fonts)

- How to use Google Fonts
- Safe fallbacks in the font stack
- Improving line-height & margin for text legibility

#### Page Layout: Fine-Tuning with the Box Model

- Removing the extra space below an image
- Setting a max-width
- Outer & inner wrappers
- The difference between ID & class selectors

### Section 6

#### Navigation Bar Layout: Intro to Flexbox

- Coding & styling semantically correct navigation
- Intro to using Flexbox for layout

#### Hipstirred: Hi-Res Images

- Retina or HiDPI graphics (@2x images)
- Setting HTML or CSS size to half the image’s native size
- Code pixels vs. hardware pixels

#### Creating Columns: Intro to CSS Grid & Media Queries

- Creating a 2-column layout with CSS Grid
- Finding an appropriate breakpoint
- Using a media query to change the layout at a specific screen size

## Schedule
- Jun 29, 2026 – Jul 1, 2026 — NYC
- Jun 29, 2026 – Jul 1, 2026 — NYC
- Sep 8, 2026 – Sep 10, 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

Payment options: GI Bill accepted.