# Web Development with HTML & CSS (Self-Paced)

Canonical URL: <https://www.graduateschool.edu/courses/web-development-course-online>

## Overview

In this coding class, you’ll learn to build websites using HTML and CSS—the core coding languages for creating webpages.

 

Through hands-on practice, you’ll code websites from the ground up and take them all the way to being live online. You’ll follow best practices for structuring and tagging webpage content with HTML, and apply CSS to style and format that content.

 

With HTML, you’ll create pages featuring text, images, and more. Using CSS, you’ll design and style the content, create centered page layouts, add background images, style navigation menus, and make your site responsive with media queries so it adapts to different screen sizes. Finally, you’ll learn how to upload your files via FTP to make your site live. We’ll provide ready-to-use text and images so you can focus entirely on coding.

## What you'll learn

- Start learning how to build websites by hand-coding HTML & CSS
- Mark up content (text, images, lists, links, etc.) using HTML (Hypertext Markup Language)
- Style the content using CSS (Cascading Style Sheets) by setting font, size, color, spacing, width, and much more
- Create multi-page websites with text, images, & more
- Adapt the layout for different-sized screens 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

## Pricing

**Tuition:** $975