Skip to content
Courses

Web Basics: HTML and CSS

Level
Junior High · Grades 7–9
Difficulty
Beginner
Duration
10 modules
Curriculum
30 lessons

Curriculum

10 units
  1. 01Getting to Know the Web and Setting Up Your ToolsYou will understand how a browser displays a web page, know the roles of HTML and CSS, then set up VS Code and create your first HTML file.3 lessonsShow contents
  2. 02The Basic Structure of an HTML DocumentYou will be able to write a correct HTML document skeleton and organise page content with headings, paragraphs, and text emphasis.3 lessonsShow contents
    • Tags, Elements, and Attributes: The Building Blocks of HTML45 minLocked
    • Building a Class Profile Page with Headings and Paragraphs1 hLocked
    • HTML Structure Recap and a Code Clean-Up Exercise45 minLocked
  3. 03Lists, Links, and ImagesYou will be able to create ordered and unordered lists, connect several pages with links, and show images with good alternative text.3 lessonsShow contents
    • Ordered Lists, Unordered Lists, and How Links Work45 minLocked
    • Making a Hobby Page with Lists, an Image, and Links Between Pages1 hLocked
    • Recap: File Paths, Links, and Alternative Text45 minLocked
  4. 04Tables and FormsYou will be able to present data in tidy tables and build forms with various kinds of input fields that have clear labels.3 lessonsShow contents
    • Tables for Data, Forms for Input45 minLocked
    • Building a Cleaning Duty Timetable and a Club Sign-Up Form1 hLocked
    • Tables and Forms Recap and a League Table Challenge45 minLocked
  5. 05Semantic HTML and AccessibilityYou will be able to structure pages with semantic tags such as header, nav, main, and footer so they are easier to understand for people, search engines, and screen readers.3 lessonsShow contents
    • Why Semantic Tags Matter to Visitors45 minLocked
    • Refactoring a Page Full of divs into a Semantic Structure1 hLocked
    • Semantics Recap and an Accessibility Checklist45 minLocked
  6. 06Meet CSS: Selectors, Colours, and FontsYou will be able to link a CSS file to an HTML page, select elements with element, class, and id selectors, and set colours and fonts.3 lessonsShow contents
    • How CSS Selects and Styles Elements45 minLocked
    • Styling Your Profile Page with a style.css File1 hLocked
    • Basic CSS Recap and a Dark Theme Challenge45 minLocked
  7. 07The Box Model and SpacingYou will be able to explain the box model, control spacing with padding and margin, add borders, and inspect element sizes with DevTools.3 lessonsShow contents
    • The Box Model: Content, Padding, Border, and Margin45 minLocked
    • Making a Profile Card with Padding, Borders, and Rounded Corners1 hLocked
    • Box Model Recap and a Size Calculation Exercise45 minLocked
  8. 08Layout with FlexboxYou will be able to arrange elements in a row or a column with Flexbox, then build a tidy navigation menu and a row of cards.3 lessonsShow contents
    • Flexbox Concepts: Container, Items, and Axes45 minLocked
    • Building a Navigation Bar and a Row of Cards with Flexbox1 hLocked
    • Flexbox Recap and a Photo Gallery Challenge45 minLocked
  9. 09Responsive Design and CSS GridYou will be able to make pages that work well on both phones and laptops using the viewport meta tag, media queries, relative units, and CSS Grid, then test them in DevTools.3 lessonsShow contents
    • One Site for Phones and Laptops: Viewport and Media Queries45 minLocked
    • Building a Responsive Gallery with Grid and Testing It in Device Mode1 hLocked
    • Responsive Design Recap and a Timetable Page Challenge45 minLocked
  10. 10Final Project: A Personal Portfolio SiteYou will plan, build, test, and present a personal portfolio site with several pages that are semantic, tidy, and responsive.3 lessonsShow contents
    • Planning Your Portfolio: Content, Sketches, and Folder Structure45 minLocked
    • Building and Testing the Portfolio Site Step by Step1 hLocked
    • Presenting Your Portfolio and Reflecting on Your Learning50 minLocked

Prerequisites

No special prerequisites.

Tools and materials

VS Code, a browser

Final project

A personal portfolio site

Mentor

ES

EduSTEAM Team