# Web Development with HTML & CSS

Canonical URL: <https://training-nyc.com/courses/web-development-level-1>

## Overview

This web development class is an excellent way for beginners to get a jump start on developing websites using HTML and CSS.

Learn best practices for structuring the content of your webpages with HTML, and then styling the content with CSS.

Using HTML, you’ll create webpages with text, images, lists, videos, and more. With CSS, you’ll style the content and make the page responsive, so it adapts to various screen sizes. By the end of the course, you'll learn how to deploy your sites via FTP.

We provide you with the content so you can focus on the coding. In this course, you’ll get hands-on experience programming websites from scratch, from the first line of code all the way to deployment.

## What you'll learn

- Build websites with HTML and CSS
- Create multi-page websites with text, images, and more
- Upload your files using FTP to deploy your site

## 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
- Sep 8, 2026 – Sep 10, 2026 — NYC

## Pricing

**Tuition:** $975

Payment options: GI Bill accepted.