HTML and CSS Fundamentals for The Modern Web

Whether you call them “HTML and CSS” or “HTML5 and CSS3”, they are the same thing — the fundamental building blocks for making websites (for both desktop and mobile devices).  In this class we’ll cover both, starting with the fundamentals of how HTML tags work and how to properly build a valid HTML web page. We’ll also cover the basics of CSS and best practices for how to combine HTML and CSS for your websites.  Then we’ll cover some fun stuff: effects like rounded corners and animations. Plus useful concepts such as Flexbox and CSS grid, how to test your code, tools for debugging and much more!

This class will cover:

  1. What is HTML 5? -- A quick high-level intro to into what that term means
  2. Explanation of HTML5 and CSS3
    • Tags, attributes, and your first web page
  3. HTML5 Semantics, Structure, and Syntax
    • HTML5 vs XHTML vs HTML4
    • Proper syntax for building HTML pages
    • How to validate your web pages and check for errors
  4. Proper Semantic Markup
    • Section, Header, Footer, Aside, Nav, Div and Span tags
    • When to use which
    • Accounting for accessibility and SEO
  5. Using Images, Audio, and Video
    • Background images vs content.
    • Different supported file formats
    • Playing audio and video content in a web page
    • Loading YouTube content
  6. Scalable Vector Graphics (SVG)
    • Using code to create graphics in-line
    • Loading SVG files from various sources
  7. New Form Features
    • DataLists
    • New Input Types - Email, Tel, Color, etc
  8. Using CSS
    • Classes and IDs and when to use them
    • Supporting older browsers
    • Rounded Corners
    • Transformations
    • Drop Shadows
    • Gradients
    • RGBA coloring
    • CSS Animations
  9. Advanced selectors
    • Multiple classes
    • IDs
    • Pseudo selectors
    • Pseudo elements
    • Best practices
  10. CSS Positioning
    • Media Queries
    • Responsive Web Design
    • Supporting both desktop and mobile devices
    • 1, 2, and 3-column layouts
    • Flexbox
    • CSS Grid
  11. Custom Font Faces
    • Using local font files
    • Fonts via Google Fonts
    • Using Adobe TypeKit
    • Pros and Cons of each
  12. Debugging
    • Supporting older browsers
    • In-browser debugging tools
    • Debugging CSS
  13. Preparing For SEO and Accessibility
    • Tools and techniques for SEO
    • Best practices for ADA compliance and accessibility
  14. An Introduction to CSS Frameworks
    • Bootstrap
    • FontAwesome
    • Pros and cons