PNL Learn

HTML and CSS Basics

Structure and style your first real web page.

Start from nothing and finish with real, accessible web pages. You will learn what happens between typing a URL and seeing a page, write a complete HTML document from the doctype down, mark up headings, lists and landmarks so browsers and screen readers understand them, link pages together and add images with honest alt text, then style it all with CSS: selectors, the cascade, specificity and inheritance, and the box model that decides how big everything is. Every exercise runs in a live preview beside the editor, is checked against the page the browser actually builds, and must pass automated accessibility checks. The course ends with four small projects: a recipe page, a profile card, an article page and a price list.

BeginnerHTML and CSS7 lessons77 exercisesAbout 4.5 h
Create a free account

What you will learn

  • How the web works
  • HTML documents
  • Semantic structure
  • Links and images
  • CSS selectors
  • The cascade
  • The box model
  • Accessibility basics

Lessons

  1. 1

    How the Web Works

    Clients and servers, DNS, URLs, status codes, the three layers of a page and who writes the rules.

    13 exercises

  2. 2

    Your First HTML Document

    Elements, attributes and void elements, the boilerplate every page needs, and what the parser does with broken markup.

    10 exercises

  3. 3

    Text, Headings and Structure

    Headings in order, strong and em versus b and i, three kinds of list, and landmarks instead of div soup.

    12 exercises

  4. 4

    Links and Images

    Absolute, relative and fragment links, link text that says where it goes, safe new tabs, alt text, figures and image licensing.

    10 exercises

  5. 5

    CSS Rules, Selectors and the Cascade

    Rules and selectors, attaching CSS, combinators, specificity and source order, inheritance, defaults and the typos CSS ignores.

    12 exercises

  6. 6

    The Box Model

    Content, padding, border and margin; border-box sizing; collapsing margins; and block, inline, inline-block and none.

    11 exercises

  7. 7

    Putting It Together

    Four small projects from a brief: a recipe page, a profile card, an article page and a price list.

    9 exercises

How you practice

You practice in the browser and every exercise gives you feedback right away. This course uses these formats:

  • Code exercise: 19
  • Type the answer: 15
  • Fix the bug: 12
  • Multiple choice: 9
  • Fill in the blank: 7
  • Match the pairs: 6
  • Select all that apply: 3
  • Reorder lines: 3
  • Spot the bug: 3

Aligned to

CS2023ACM / IEEE-CS / AAAISource
  • Networking and Communication
    • NC-ApplicationsNetworked Applications
  • Specialized Platform Development
    • SPD-WebWeb Platforms
MDN Curriculum (core)MozillaSource
  • Web standards
    • 1.1How the web works
    • 1.2The HTML, CSS and JavaScript triangle
    • 1.3The web standards model
    • 1.4How browsers load webpages
  • Semantic HTML
    • 2.1Basic HTML syntax
    • 2.2Structuring documents
    • 2.3Lists
    • 2.5Links
  • CSS fundamentals
    • 3.1Basic CSS syntax
    • 3.2Selectors
    • 3.3The box model
    • 3.4Handling conflicts
WCAG 2.2 Level A and AAW3CSource
  • Perceivable
    • 1.1.1Non-text Content
    • 1.3.1Info and Relationships
  • Operable
    • 2.4.2Page Titled
    • 2.4.4Link Purpose (In Context)
    • 2.4.6Headings and Labels
  • Understandable
    • 3.1.1Language of Page
    • 3.1.2Language of Parts

Proto Node Labs is not affiliated with or endorsed by ACM / IEEE-CS / AAAI, Mozilla and W3C. Exam names are trademarks of their owners.