CodeBloom — Front-End Development Tutoring by Nelly Moseki

Full Curriculum

Six modules, thirty-plus topics, one clear path.

Each module builds on the one before it — from raw HTML structure through to asynchronous JavaScript and browser storage.

HTML — Beginner Level

Structure, semantics, forms & tables

HTML Beginner

▾

Start with structure and meaning before styling.

01 — HTML Basics

What is HTML? <!DOCTYPE html> <html> <head> <body> Headings & Paragraphs Ordered & Unordered Lists Links & Navigation Images Comments

02 — Semantic HTML ★

<header> <nav> <main> <section> <article> <footer> Accessibility + SEO div vs semantic tags

03 — Forms

text · email · password number · date Labels & Buttons required · minlength Accessibility basics

04 — Tables

Table Structure <thead> <tbody> <tr> <td> <th>

CSS — Beginner Level

Selectors, box model & display

CSS Beginner

▾

Style with intention. Design with clarity.

01 — CSS Basics

Inline CSS Internal CSS External CSS .class #id element Colors & Fonts Text Styling Backgrounds & Borders

03 — Display & Layout

display: block display: inline display: inline-block display: none

02 — The Box Model ★ Very Important

Margin Border Padding Content box-sizing: border-box

margin

border

padding

content

HTML — Intermediate Level

Accessibility & SEO fundamentals

HTML Intermediate

▾

Go deeper. Build smarter. Think inclusively.

Prerequisites: HTML Basics · Semantic HTML · Forms

01 — Accessibility Basics

alt text label for inputs Semantic HTML aria-label aria-hidden role=""

02 — SEO Basics

Meta tags Open Graph tags h1 → h2 → h3 hierarchy <meta name="description"> <meta property="og:title">

CSS — Intermediate Level

Flexbox, Grid, responsive design & animations

CSS Intermediate

▾

Layouts, responsiveness, motion & systems.

⬆ Prerequisites: CSS Basics · Box Model · Display

01 — Flexbox ★ Very Important

display: flex flex-direction justify-content align-items gap Centering with flexbox Navbars & layouts

02 — CSS Grid

display: grid grid-template-columns grid-template-rows gap Grid vs Flexbox

03 — Responsive Design

Mobile-first design @media Breakpoints Responsive images Responsive typography

04 — Positioning

relative absolute fixed sticky z-index

05 — Transitions & Animations

transition transform :hover @keyframes Simple animations

06 — CSS Variables

:root Reusable colors Design systems basics

JavaScript — Beginner Level

Variables, functions, arrays & loops

JS Beginner

▾

Make the web think, respond and come alive.

01 — JavaScript Basics

What is JavaScript? Link JS to HTML console.log() let const var string · number · boolean null · undefined Operators & Comments

const name = "Nelly"; let age = 25;

console.log(name, age); // Nelly 25

02 — Conditions

if else if else === !== > < && || ! Truthy & falsy values

03 — Functions

Declarations Expressions Arrow functions Parameters vs arguments Return values

04 — Arrays

Creating & accessing .push() .pop() .shift() .unshift() Looping through arrays

05 — Loops

for while for...of

JavaScript — Intermediate Level

DOM, Events, ES6+, APIs, Async & Storage

JS Intermediate

▾

Real-world JS — DOM, APIs, async & storage.

⬆ Prerequisites: JS Basics · Conditions · Functions · Arrays · Loops

⚠ Objects — students commonly struggle here. Take extra time.

Objects

Creating objects Accessing properties dot notation bracket notation Nested objects Looping through objects

07 — DOM Manipulation ★ Very Important

document.querySelector querySelectorAll Changing text & HTML Changing CSS with JS Creating elements Removing elements

08 — Events

click submit input addEventListener Event object Form submission

09 — ES6+ Modern JS ★

Template literals Destructuring Spread ... Rest ... Default params import / export

10 — Array Methods ★ Very Important

.forEach() .map() .filter() .find() .some() .every()

11 — Async JavaScript ★

setTimeout fetch Promises async/await try/catch

12 — Working With APIs

What is an API? GET POST Headers · JSON Loading & Error states Weather / Quotes / Products

13 — Local Storage

setItem() getItem() removeItem() Saving user data Dark / light mode Saving cart items

Advanced Curriculum — Coming Soon

Beyond the fundamentals.

Once the core HTML, CSS & JavaScript path is second nature, the next step is a framework. Not bookable yet — here's the planned path.

Vue.js — Beginner Level

Templates, reactivity & components

VUE Beginner

▾

Bring your HTML to life, the Vue way.

01 — Vue Basics

What is Vue? CDN vs Vite createApp() Template syntax Interpolation {{ }}

02 — Reactivity Basics ★

ref() reactive() Reactive data binding Computed properties watch()

03 — Directives

v-bind v-if · v-else · v-else-if v-for v-show v-on (@click)

04 — Components 101

Single-File Components .vue template / script / style Props Emitting events

Vue.js — Intermediate Level

Composition API, routing & state

VUE Intermediate

▾

Build real apps — routing, state & composition.

⬆ Prerequisites: Vue Basics · Reactivity · Directives · Components

01 — Composition API ★ Very Important

setup() <script setup> ref vs reactive Lifecycle hooks onMounted

02 — Vue Router

Routes <router-view> Dynamic routes Navigation guards Nested routes

03 — State Management ★

Pinia stores State Getters Actions Sharing state across components

04 — Forms & v-model

v-model Two-way binding Form validation patterns

05 — Working With APIs

fetch / axios in Vue onMounted + async data Loading & error states

React.js — Beginner Level

JSX, components & props

REACT Beginner

▾

Think in components. Build in JSX.

01 — React Basics

What is React? JSX syntax Create React App / Vite Rendering elements Fragments

02 — Components & Props ★

Function components Props Children prop Component composition

03 — State with useState ★ Very Important

useState() Updating state State vs props Re-renders

04 — Handling Events

onClick onChange onSubmit Event object Conditional rendering

React.js — Intermediate Level

Hooks, routing & data fetching

REACT Intermediate

▾

Real-world React — hooks, routing & data.

⬆ Prerequisites: React Basics · Components & Props · useState · Events

⚠ useEffect — a common trip-up point. Take extra time.

01 — useEffect ★ Very Important

Dependency arrays Cleanup functions Fetching data on mount Common pitfalls

02 — React Router

<BrowserRouter> <Routes> / <Route> useNavigate Dynamic route params

03 — Lists & Keys

.map() in JSX key prop Why keys matter

04 — Context API ★

createContext useContext Avoiding prop drilling

05 — Working With APIs

fetch / axios Loading & error states Custom hooks basics

Beginner to
Intermediate
Curriculum

Six modules, thirty-plus topics, one clear path.

One rate, three ways to learn.

Beyond the fundamentals.

Beginner toIntermediateCurriculum

Six modules, thirty-plus topics, one clear path.

One rate, three ways to learn.

Beyond the fundamentals.

Beginner to
Intermediate
Curriculum