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.

It also spends a whole module on the part nobody teaches: naming classes, organising stylesheets, and writing markup that survives somebody replacing your placeholder text with a real business name that is four words long.

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 and a browser. The first module installs the editor with you.
  • No programming experience. This is the first course in the Web Development track.

Tools you will use

VS CodeChrome DevToolsLighthouseaxe 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
  • Debug a layout in devtools instead of guessing at CSS
  • Build genuinely responsive pages, mobile first, with container queries
  • Meet WCAG 2.1 AA basics: contrast, focus, labels, alt text — and test them
  • Use modern CSS: custom properties, clamp, :has and nesting
  • Honour dark mode and reduced-motion preferences
  • Name classes and organise CSS so the next person can change it
  • Keep a page fast on a mid-range phone on mobile data
  • Build and deploy a complete static site
Reference code

Stuck? Compare your work

The Aarambh Yoga site as the capstone builds it. Only module 8 has a checkpoint — modules 1 to 7 are concepts, and publishing disconnected snippets invites copying exactly what the lesson asks you to type.

It is there for when you are stuck, not to start from. Type the code yourself first — copying it will teach you very little.

View on GitHub
Syllabus

8 modules, 50 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, render20 min
    2. Your editor, your first page, and seeing it change20 min
    3. The HTML document and its head20 min
    4. Text elements and why semantics matter30 min
    5. Links, images and alt text25 min
    6. Lists and tables used correctly25 min
    7. Forms and inputs35 min
    8. Video, audio and embedding somebody else's page25 min
    9. details, summary and dialog: interactive with no JavaScript25 min
  2. 2

    CSS Foundations

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

    1. Adding CSS and the cascade25 min
    2. Browser defaults, inheritance and what a reset is for25 min
    3. Selectors and specificity30 min
    4. The box model30 min
    5. Debugging CSS in devtools, which is most of the job30 min
    6. Colours, units and when to use each25 min
    7. Backgrounds, borders, radius and shadows25 min
    8. Typography and web fonts25 min
  3. 3

    Layout

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

    1. Display, flow and positioning30 min
    2. Flexbox, properly explained40 min
    3. CSS Grid40 min
    4. Flexbox or Grid: choosing20 min
    5. z-index, and why it sometimes does nothing25 min
    6. Practice: rebuilding three real layouts45 min
  4. 4

    Responsive Design

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

    1. Mobile-first thinking25 min
    2. Media queries and breakpoints30 min
    3. Responsive images and modern formats25 min
    4. Fluid typography with clamp()25 min
    5. Container queries, and what they fixed30 min
    6. Dark mode, reduced motion and respecting preferences30 min
    7. Testing across real devices20 min
  5. 5

    Accessibility

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

    1. Why accessibility matters, legally and practically20 min
    2. Headings, landmarks and structure25 min
    3. Keyboard navigation and focus states30 min
    4. Colour contrast and not relying on colour alone20 min
    5. ARIA: the little you need and the lot you do not25 min
    6. Testing it: keyboard, screen reader and axe30 min
  6. 6

    Modern CSS and Workflow

    Custom properties, the selectors that replaced a lot of JavaScript, and shipping the thing.

    1. Custom properties and theming30 min
    2. :has, :is, :where and nesting25 min
    3. Styling forms, which is harder than it looks35 min
    4. Transitions and tasteful animation25 min
    5. Deploying a static site25 min
  7. 7

    Best Practices

    The habits that separate a page that looks right on your laptop from one that holds up on somebody else's phone, with somebody else's content in it.

    1. Naming classes, and what a component is35 min
    2. Organising CSS so it stays maintainable30 min
    3. Code that survives the content changing35 min
    4. Performance for a mid-range phone on mobile data30 min
    5. Reviewing markup and CSS25 min
  8. 8

    Capstone Project

    Build and deploy a complete responsive site.

    1. The brief: a small business site15 min
    2. Building it60 min
    3. Real content and real images, sized properly30 min
    4. Accessibility audit, performance check and deploy40 min
Previous courseJavaScript Complete FoundationNext courseDatabase Foundation

Learning this with a mentor is faster

Going through a course like this one is how you qualify for our six-month internship, for selected students, mostly from Pune. Clear the interview and you build real-world projects with my mentorship.

About the internshipAll courses