Web Development with HTML & CSS

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