WEB102 · HTML and CSS Foundations

Categories: Cloud & Software
Wishlist Share

About Course

Build clean, accessible web pages with semantic HTML and style them with modern CSS, including the box model, Flexbox and Grid. You finish with a one-page site for a local business that you write by hand.

Explore · 4 hours · 4 lessons, a lab, an assessed assignment and a portfolio piece

Who it is for

Beginners who understand how the web works and want to create their first real pages without page builders.

Prerequisites

Complete WEB101 or have an equivalent understanding of browsers, URLs and HTTP.

What you will be able to do

  • Write a valid HTML document using semantic elements for structure and meaning.
  • Build an accessible form with labels, input types and basic built-in validation.
  • Apply CSS selectors, the cascade and the box model to control spacing and typography.
  • Lay out a page with Flexbox and Grid and check it with the browser's inspector.

Lessons

  • Lesson 1 · Semantic HTML: structure and meaning
  • Lesson 2 · Forms and accessibility
  • Lesson 3 · CSS fundamentals, Flexbox and Grid
  • Lesson 4 · Lab and assignment

Lab: Hand-code a one-page business site

You will create an index.html and a styles.css file for a fictional local business, using semantic sections, a services grid and a contact form. You will validate the HTML, inspect the box model in DevTools and fix at least two issues the validator or your own review reveals.

Free tools: VS Code (free) with the Live Server extension, or CodePen free plan; browser DevTools and the free W3C HTML validator

Assessed assignment

Build a one-page website for a small business of your choice, such as a pet groomer or an accounting office. The page must include a header with navigation, a hero section, a services section laid out with Grid, a testimonials or hours section laid out with Flexbox, a contact form with at least four labeled fields, and a footer. Pass the W3C validator with no errors and write a short README listing your semantic choices and colors.

Criterion Weight What excellent work looks like
Semantic, valid HTML 30% Uses header, nav, main, section, footer and headings in order; the validator reports no errors.
CSS quality and layout 30% Grid and Flexbox are used appropriately; spacing is consistent; styles are organized and reused, not repeated.
Accessible form and content 25% Every field has a label, images have meaningful alt text, and color contrast is readable.
README and presentation 15% The README clearly explains structure, colors and fonts, and the page looks finished.

Portfolio piece

A hand-coded, validated one-page site for a small business, kept in your code folder or a free GitHub repository.

Self-paced, 12-month access. Questions are answered in writing through the student panel. A completion record is issued when you finish the course.

Next step

Continue with WEB103 · JavaScript Fundamentals · 6 hours · $42.00

Continue to the next course

Prefer the whole program? Program in Full-Stack Web & Mobile Development · $378.00 (10% less than buying the courses separately)

Show More

What Will You Learn?

  • Write a valid HTML document using semantic elements for structure and meaning.
  • Build an accessible form with labels, input types and basic built-in validation.
  • Apply CSS selectors, the cascade and the box model to control spacing and typography.
  • Lay out a page with Flexbox and Grid and check it with the browser's inspector.

Course Content

WEB102 · HTML and CSS Foundations (4 h)
Build clean, accessible web pages with semantic HTML and style them with modern CSS, including the box model, Flexbox and Grid. You finish with a one-page site for a local business that you write by hand.

  • Lesson 1 · Semantic HTML: structure and meaning
  • Lesson 2 · Forms and accessibility
  • Lesson 3 · CSS fundamentals, Flexbox and Grid
  • Lesson 4 · Lab and assignment
  • WEB102 Assessment · HTML and CSS Foundations
Scroll to Top