Skip to main content
ANVISoftware Solutions

Frontend Foundations: HTML, CSS, JavaScript & TypeScript

Beginner26-32 hours6 modules20 lessons

The groundwork every framework sits on: semantic markup, modern layout, the language of the browser, and types that keep it honest.

Start the first lesson

Prerequisites

None. This course assumes no prior knowledge of the subject.

Technologies

About this course

Frameworks change. The platform underneath them changes far more slowly, which is why this course spends its time there. Semantic HTML, the CSS box model, Flexbox and Grid, and how JavaScript actually interacts with a page will still be useful long after any particular framework falls out of favour.

Accessibility is taught as part of the markup rather than as a later audit. The right element choice solves most of it, and that habit is much easier to form early than to retrofit.

The course finishes with TypeScript, introduced as a way to describe the shape of your data so the compiler can catch mismatches before the browser does.

Course roadmap

All 20 lessons are written and available.

Module 01

HTML and Semantics

Structure and meaning first, because this is where accessibility is won or lost.

3/3 ready
  1. 01HTML Document StructureBuild a valid page and explain what each part of the document does.12 min
  2. 02Semantic HTML and Why It MattersChoose elements for meaning rather than appearance, and explain what that gives you for free.13 min
  3. 03FormsBuild forms with correct input types, labels and validation attributes.18 min

Module 02

CSS Fundamentals

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

3/3 ready
  1. 01CSS Basics and SelectorsTarget elements precisely without over-specific selectors.14 min
  2. 02The Box ModelPredict how size, padding, border and margin combine.14 min
  3. 03The Cascade and SpecificityExplain why a rule did not apply, and fix it without resorting to !important.16 min

Module 03

Layout and Responsive Design

Modern layout tools that replaced the workarounds, and building for every screen size.

3/3 ready
  1. 01FlexboxLay out and align items along a single axis.15 min
  2. 02CSS GridBuild two-dimensional layouts with rows and columns.17 min
  3. 03Responsive DesignBuild layouts that work from small phones to wide desktops.16 min

Module 04

JavaScript Fundamentals

The language of the browser: values, functions, data and the page itself.

5/5 ready
  1. 01JavaScript FundamentalsWork with variables, functions and control flow in JavaScript.18 min
  2. 02Arrays and ObjectsTransform collections with map, filter and reduce.17 min
  3. 03The DOMRead and change the page from JavaScript.16 min
  4. 04EventsRespond to user interaction, including delegation and cleanup.17 min
  5. 05ModulesSplit code across files with imports and exports.13 min

Module 05

Async JavaScript and APIs

Fetch data without freezing the page, and deal honestly with the ways it can fail.

2/2 ready
  1. 01Asynchronous JavaScriptUse promises and async/await without blocking the page.18 min
  2. 02Calling APIsFetch data, handle failures, and avoid unhandled rejections.18 min

Module 06

TypeScript

Describe the shape of your data so the compiler catches mismatches before the browser does.

4/4 ready
  1. 01TypeScript BasicsAdd types to JavaScript and read compiler errors confidently.17 min
  2. 02Interfaces and Type AliasesDescribe the shape of objects and function signatures.16 min
  3. 03GenericsWrite reusable code that preserves type information.16 min
  4. 04Typing API ResponsesModel server data and validate it at the boundary.18 min

Projects for this course

Beginner

Expense Tracker

A web interface that records expenses and summarises them. Your first project with real UI state and accessibility requirements.

10-15 hours

On completion

What you should take away

  • Choosing the right HTML element does most of your accessibility work for you
  • Flexbox and Grid replace nearly all older layout techniques
  • The DOM is just objects you can read and change
  • Async code is how the browser stays responsive while waiting
  • Types describe intent in a way the compiler can enforce

Recommended next course

React & Next.js

Build component-driven interfaces with React, then add routing, rendering strategies and data fetching with Next.js.

Continue to React & Next.js

Have a project worth talking through?

Tell us what you're building or what's slowing your current system down. We'll give you a direct read on scope and approach.

Start a ConversationExplore Our Services