RizTech Academy logo
RizTech Academy

Web UI Development Foundation

HTML and CSS done properly — semantic, accessible and responsive, which is rarer than it should be.

Almost everyone can make a page look roughly right. Far fewer can build one that works on a phone, reads correctly to a screen reader, and does not collapse when the content changes.

This course teaches the second thing. Semantic HTML first, then CSS layout with Flexbox and Grid, then responsive design and accessibility as defaults rather than afterthoughts.

You finish able to build a complete, responsive, accessible multi-page site without a framework — which makes every framework easier to learn afterwards.

Who this is for

  • Complete beginners to web development
  • Self-taught developers with gaps in CSS layout
  • Anyone joining our Web Development track

What you need first

  • A computer, a browser and a text editor. Nothing else.

Tools you will use

VS CodeChrome DevToolsGitVercel or Netlify

By the end you can

  • Write semantic HTML that a screen reader can navigate
  • Lay out pages with Flexbox and Grid instead of hacks
  • Build genuinely responsive pages, mobile first
  • Meet WCAG 2.1 AA basics: contrast, focus, labels, alt text
  • Use modern CSS: custom properties, clamp and logical properties
  • Build and deploy a complete static site
Syllabus

7 modules, 33 lessons

Work through these in order. Each lesson is short enough to finish in one sitting and ends with something to build, not a quiz.

  1. 1

    HTML Foundations

    Structure and meaning, not just tags.

    1. How the web works: request, response, renderComing soon
    2. The HTML document and its headComing soon
    3. Text elements and why semantics matterComing soon
    4. Links, images and alt textComing soon
    5. Lists and tables used correctlyComing soon
    6. Forms and inputsComing soon
  2. 2

    CSS Foundations

    Selectors, the cascade and the box model — the three things that explain most CSS confusion.

    1. Adding CSS and the cascadeComing soon
    2. Selectors and specificityComing soon
    3. The box modelComing soon
    4. Colours, units and when to use eachComing soon
    5. Typography and web fontsComing soon
  3. 3

    Layout

    Flexbox and Grid, which between them solve nearly every layout problem.

    1. Display, flow and positioningComing soon
    2. Flexbox, properly explainedComing soon
    3. CSS GridComing soon
    4. Flexbox or Grid: choosingComing soon
    5. Practice: rebuilding three real layoutsComing soon
  4. 4

    Responsive Design

    Mobile first, and why it is easier than the alternative.

    1. Mobile-first thinkingComing soon
    2. Media queries and breakpointsComing soon
    3. Responsive images and modern formatsComing soon
    4. Fluid typography with clamp()Coming soon
    5. Testing across real devicesComing soon
  5. 5

    Accessibility

    Built in from the start, because retrofitting it is expensive.

    1. Why accessibility matters, legally and practicallyComing soon
    2. Headings, landmarks and structureComing soon
    3. Keyboard navigation and focus statesComing soon
    4. Colour contrast and not relying on colour aloneComing soon
    5. ARIA: the little you need and the lot you do notComing soon
  6. 6

    Modern CSS and Workflow

    Custom properties, organisation and shipping the thing.

    1. Custom properties and themingComing soon
    2. Organising CSS so it stays maintainableComing soon
    3. Transitions and tasteful animationComing soon
    4. Deploying a static siteComing soon
  7. 7

    Capstone Project

    Build and deploy a complete responsive site.

    1. The brief: a small business siteComing soon
    2. Building itComing soon
    3. Accessibility audit, performance check and deployComing soon
Previous courseJavaScript Complete FoundationNext courseDatabase Foundation

Learning this with a mentor is faster

Our internship programme is free and fully remote. You get this curriculum, real project work, and code review from working developers.

Apply for the internshipAll courses