# Web Development with HTML & CSS Course

Canonical URL: <https://www.graduateschool.edu/courses/coding-html-css>

## Overview

In this coding class, you’ll learn how to create websites using HTML and CSS, the core languages for building web pages and applications. Through hands-on practice, you’ll code websites from scratch and take them all the way to being live online. You’ll master best practices for structuring and tagging webpage content with HTML and styling it with CSS.

With HTML, you’ll build pages with text, images, and other elements. With CSS, you’ll style layouts, add background images, design navigation, and make pages responsive with media queries for different screen sizes. To publish your site, you’ll learn how to upload files via FTP. All necessary content, including text and images, will be provided so you can focus on learning to code.

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

## Pricing

**Tuition:** $975

Payment options: GI Bill accepted.