HTML and CSS Lessons
This course covers everything you need to build websites in HTML and CSS. I highly recommend HTML and CSS as the first languages to learn if you are interested in becoming a developer.
You can work through the lessons in order or jump to any topic below. The lessons on this page came from the course material I use in teaching at Minnesota State. This course follows the general topic order of Web Development and Design Foundations with HTML5 by Terry Felke-Morris. It's not required, but students who want a physical textbook to read alongside the lessons will find it a good companion. You can pick up an older edition for a lower price on Amazon.com. (If you purchase the book through this link, I may earn a small commission at no extra cost to you.)
Google Ads
The costs of this website are partially offset by revenue from Google Ads.1. Introduction to Web Development
2. HTML Fundamentals
-
Lesson 2.1: Organizing Your Folders and Files
-
Lesson 2.2: The HTML Framework
-
Lesson 2.3: The Paragraph <p> and Break <br> Tags
-
Lesson 2.4: HTML Headings
-
Lesson 2.5: Making Lists with HTML
-
Lesson 2.6: HTML Semantic Elements
-
Lesson 2.7: HTML Entities: Special Characters
-
Lesson 2.8: HTML Links: The Anchor Tag <a>
-
Lesson 2.9: HTML Indentation and Comments
3. CSS Fundamentals
-
Lesson 3.01: Introduction to CSS
-
Lesson 3.02: How CSS Cascades
-
Lesson 3.025: CSS Selectors, Properties, and Values
-
Lesson 3.03: Three Ways to Add CSS to Your HTML
-
Lesson 3.04: Attaching an External Stylesheet
-
Lesson 3.05: CSS Colors
-
Lesson 3.06: RGBA Colors
-
Lesson 3.07: Font Families and Google Fonts
-
Lesson 3.08: Font and Text Properties
-
Lesson 3.09: Classes and IDs
-
Lesson 3.10: CSS Indentation and Comments
-
Lesson 3.11: Module 3 Template: Putting It All Together (Optional)
4. Web Images
-
Lesson 4.1: Background vs. Embedded Images
-
Lesson 4.2: Organizing Your Image Files
-
Lesson 4.3: HTML Embedded Images
-
Lesson 4.4: CSS Background Images
-
Lesson 4.5: Preparing Images for Web Use
-
Lesson 4.6: Two Ways to Create a Hero Image
-
Lesson 4.7: Building a JavaScript Photo Gallery
-
Lesson 4.8: How to Create a Simple Logo
