GDWD 105 Coding Examples Hub

Loosely organized into Weeks. Keep in mind that every class dynamic is different, and you may find yourself ahead or behind some weeks.

Week 1 - Intro to HTML

• Basic HTML Elements
  (headings, paragraphs, and text styling)

  Preview HTML

• Just Headings

  Preview HTML

• Just Paragraphs and Text Styling Tags

  Preview HTML

• Intermediate HTML Elements I
  (lists, images, and attributes)

  Preview HTML

• Just Lists

  Preview HTML

• Just Images

  Preview HTML

• Intermediate HTML Elements II
  (anchors, hyperlinks, and ids)

  Preview HTML

• Just Anchors (External Links)

  Preview HTML

• Just Anchors (Internal Links)

  Preview HTML

• Semantic HTML Elements

  Preview HTML

Week 2 - Intro to CSS

• Basic CSS I
  (color and the box model)

  Preview HTML CSS

• Basic CSS II
  (cards, fonts, and floats)

  Preview HTML CSS

• Just Floats

  Preview HTML CSS

• Basic CSS Review
  (CSS font styling vs HTML, combined selectors, and pseudo-selectors)

  Preview HTML CSS

• CSS Position Autobiographies
  (a silly storybook intro to learning about CSS position values)

  Preview HTML CSS

Week 3 - Advanced CSS

• CSS Media Queries

  Preview HTML CSS

• Alternate Example

  Preview HTML CSS

• CSS Transitions

  Preview HTML CSS

• More CSS Transitions Examples

  Preview HTML CSS

• CSS Position and Google Fonts

  Preview HTML CSS

• CSS Flexbox - Basics

  Preview HTML CSS

• Flex Container Properties Cheatsheet

  Preview

• CSS Flexbox - Content Layouts

  Preview HTML CSS

• Responsive Flexbox Example
  (complex, with detailed comments)

  Preview HTML CSS

• HTML Tables

  Preview HTML CSS

Week 4 - More Advanced CSS

• CSS Grids

  Preview HTML CSS

• Just Grid Layout - with Areas

  Preview HTML CSS

• Just Grid Layout - with Lines

  Preview HTML CSS

• Responsive Grid Layout - with Areas

  Preview HTML CSS

• Heros (HTML + CSS)

  Preview HTML CSS

• background-image Cheatsheet

  Preview

• Bootstrap (Web Framework)

  Preview HTML

Week 5 - Forms

• HTML Forms (with CSS styling)

  Preview HTML CSS

• FB Signup Form (starter demo)

  Preview HTML CSS

Week 6 - Putting It All Together

• Mock Final Eval (GOOD LUCK!)

Week 7-9 - Only WordPress from Here

Appendix - Extra Content

• HTML Audio Elements

  Preview HTML

• HTML Video Elements

  Preview HTML CSS

• CSS Animation - Basic

  Preview HTML CSS