Learning Centreby learnwhatyouwant.co.uk
Sign inStart learning
Back to Discover

Technology · Web development

Build Your First Website: HTML & CSS for Beginners

Learn to create professional-looking web pages from scratch using HTML and CSS. This practical course guides you through structuring content, styling layouts, and building a complete multi-page website – no prior coding experience needed.

540 min12 modulesBeginner friendly
Start this free course

Free to take. This course does not use any Learning Credits.

What you’ll be able to do

By the end of this course, you will be able to plan, code, and publish a responsive multi-page website using valid HTML5 and CSS3, applying modern design principles and best practices.

Course outline

A clear route from first principles to practical confidence

  1. 01

    Getting Started with Web Development

    • How the internet and websites work
    • Choosing and installing a code editor
    • Your first HTML file: structure and tags
    • Viewing your page in a browser
    • Organising your project folders
  2. 02

    HTML Foundations: Text and Structure

    • Headings, paragraphs, and line breaks
    • Lists: ordered, unordered, and nested
    • Adding emphasis with bold and italic
    • Creating links between pages
    • Using comments to document your code
  3. 03

    Images, Media, and Paths

    • Inserting images with alt text
    • Understanding relative and absolute file paths
    • Linking to downloadable files
    • Embedding videos from external sites
    • Best practices for image file sizes
  4. 04

    Introduction to CSS: Styling Text

    • What is CSS and how it works with HTML
    • Inline, internal, and external stylesheets
    • Colours: hex, RGB, and named colours
    • Changing fonts, sizes, and alignment
    • Using CSS comments for clarity
  5. 05

    CSS Selectors and the Box Model

    • Element, class, and ID selectors
    • Combining selectors for precision
    • The box model: margin, border, padding, content
    • Setting widths and heights
    • Using browser developer tools to inspect elements
  6. 06

    Page Layout with CSS

    • Display properties: block, inline, and inline-block
    • Floats and clearing floats
    • Introduction to Flexbox for simple layouts
    • Building a two-column page structure
    • Centering content horizontally and vertically
  7. 07

    Navigation and Links in Practice

    • Styling navigation lists with CSS
    • Creating horizontal menus
    • Adding hover effects and active states
    • Linking to sections within a page
    • Making navigation responsive with media queries
  8. 08

    Working with Tables and Forms

    • Building a table: rows, cells, and headers
    • Styling tables with borders and stripes
    • Form elements: text fields, buttons, and labels
    • Grouping form fields with fieldsets
    • Basic form styling and alignment
  9. 09

    Responsive Design and Media Queries

    • What is responsive web design?
    • Setting the viewport meta tag
    • Using media queries for breakpoints
    • Making images and videos responsive
    • Testing your site on different devices
  10. 10

    Publishing Your Website Online

    • Choosing a domain name and hosting provider
    • Using FTP (File Transfer Protocol) to upload files
    • Testing your live site and fixing common issues
    • Introduction to version control with Git
    • Keeping your site updated and backed up
  11. 11

    Project: Build a Multi-Page Website

    • Planning your site structure and content
    • Creating a consistent header and footer
    • Building a homepage with hero section
    • Adding an about page and contact form
    • Reviewing and refining your final project
  12. 12

    Next Steps and Further Resources

    • Exploring CSS frameworks like Bootstrap
    • Introduction to JavaScript for interactivity
    • Finding free design resources and templates
    • Joining web developer communities
    • Building a portfolio to showcase your work