Frontend Web Development

Flex-direction, justify/align, flex-grow/shrink/basis.

Build a fully flex-based layout (e.g. a card row that wraps).

Build flexible one-dimensional layouts confidently.

Grid-template-columns/rows, gap, placing items on a grid.

Rebuild the same layout using CSS Grid instead.

Choose and build with Grid for two-dimensional layouts.

Combining flex/grid with media queries across breakpoints.

Adapt one layout across 3 breakpoints (mobile/tablet/desktop).

Build a genuinely responsive layout from scratch.

Variables, data types, operators.

Write small scripts manipulating numbers/strings/booleans.

Declare variables and use basic operators correctly.

Conditions (if/else), comparison/logical operators.

Write conditional logic for a few practice scenarios.

Write branching logic in JavaScript.

Functions — declaring, parameters, return values.

Refactor earlier scripts into reusable functions.

Write and call functions with parameters and return values.

Arrays and objects, common access patterns.

Build and manipulate a small array/object dataset.

Store and access structured data in JS.

Selecting elements (querySelector), reading/changing content.

Write a script that updates page content dynamically.

Read and modify the DOM with JavaScript.

Creating and removing elements dynamically.

Build a script that adds/removes items from a list on the page.

Dynamically create and remove DOM elements.

Click/input/form events, event listeners.

Wire up buttons/inputs to respond to user actions.

Make elements respond to user interaction.

Combining DOM + events into a small interactive component.

Build a working component (e.g. tabs or accordion).

Build a self-contained interactive UI component.

Component thinking, npm/build tools overview (conceptual).

Explore a starter project structure using a build tool.

Describe how modern frontend tooling organizes a project.

Fetch basics, working with API response data (read-only).

Fetch data from a public API and render it on the page.

Pull external data into a page using fetch.

Planning a project from requirements to component breakdown.

Plan and scaffold the practical website project.

Turn a project brief into a concrete build plan.

Implementing core functionality against the plan.

Build the project's main interactive features.

Implement planned features independently.

Styling pass, responsiveness pass, bug triage.

Polish styling/responsiveness and fix bugs found in testing.

Take a rough build to a polished, responsive state.

Final QA checklist, deployment steps.

Deploy the finished project and present it.

Independently finish, deploy, and present a frontend project.