Skip to content
TechMonster™

Frontend Engineering

Modern frontend you can show and explain: from Git and HTML/CSS to JavaScript, TypeScript, React and Next.js, built through 90+ projects that become a live portfolio.

Modern frontend you can show and explain: from Git and HTML/CSS to JavaScript, TypeScript, React and Next.js, built through 90+ projects that become a live portfolio. Migrated from the original STUDENT-GUIDE.md as the reference track.

5 phases · 72 projects · v1.1.0

Target roles: Frontend Engineer, React Developer, Next.js Developer, UI Engineer

Stack: HTML, CSS, Tailwind CSS, JavaScript, TypeScript, React, Next.js

PHASE 1 · 7 projects

Computer & Git Basics

Understand your development environment and version control.

  1. 01 · featured

    Basic Computer/DOS Commands

    Create notes + demo screen recording

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  2. 02 · featured

    VS Code Setup + Extensions

    Create a `work/README.md` personal page

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  3. 03 · featured

    Git CLI Basics

    Push your first repo to GitHub

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  4. 04 · featured

    Git Branch, Commit, Merge, Pull Request

    Repo with a branch workflow demo

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  5. 05 · featured

    Git Via VS Code GUI

    Clone + commit via the VS Code Source Control panel

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  6. 06 · featured

    Markdown Basics

    Portfolio homepage written in Markdown

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  7. 07 · featured

    Terminal Navigation (ls, Cd, Cat, Mkdir)

    Build a folder structure + `work/README.md`

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

PHASE 2 · 12 projects

HTML & CSS

Build beautiful, responsive web pages with HTML, CSS, and Tailwind.

  1. 01 · featured

    HTML Tags

    Personal bio page

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  2. 02 · featured

    CSS Basics, Selectors

    Styled resume page

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  3. 03 · featured

    Flexbox

    Profile + social links layout

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  4. 04 · featured

    CSS Grid

    3x3 photo gallery

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  5. 05 · featured

    Media Queries

    Responsive landing page

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  6. 06 · featured

    Forms + Inputs

    Contact form

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  7. 07 · featured

    CSS Animations

    Button hover animation

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  8. 08 · featured

    Tailwind Setup

    Simple Tailwind page

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  9. 09 · featured

    Tailwind Components

    Tailwind navbar + hero

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  10. 10 · featured

    Tailwind Grid + Flex

    Pricing page

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  11. 11 · featured

    Tailwind Dark Mode

    Dark/light theme toggle

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  12. 12 · featured

    Tailwind Custom Config

    Custom color theme

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

PHASE 3 · 24 projects

JavaScript Fundamentals

Master core JavaScript and DOM manipulation.

  1. 01 · featured

    Variables: Var, Let, Const

    Calculator

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  2. 02 · featured

    Data Types

    Random quote generator

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  3. 03 · featured

    Operators

    Color flipper

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  4. 04 · featured

    Strings

    Todo list (localStorage)

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  5. 05 · featured

    Arrays

    Digital clock

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  6. 06 · featured

    Objects

    Password generator

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  7. 07 · featured

    Functions

    Notes app

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  8. 08 · featured

    Loops

    Counter with save history

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  9. 09 · featured

    Conditions

    Typing test app

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  10. 10 · featured

    JSON

    BMI calculator

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  11. 11 · featured

    DOM

    Weather app (public API)

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  12. 12 · featured

    Events

    Stopwatch

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  13. 13 · featured

    LocalStorage

    Expense tracker

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  14. 14 · featured

    Fetch API

    Quiz app

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  15. 15 · featured

    Promises

    Dictionary app (API)

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  16. 16 · featured

    Async/await

    Movie search (API)

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  17. 17 · featured

    Classes

    Image slider

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  18. 18 · featured

    Modules

    Country search (REST API)

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  19. 19 · featured

    ES6 Features

    Drag & drop todo board

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  20. 20 · featured

    Spread, Rest

    Portfolio website

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  21. 21 · featured

    Map/filter/reduce

    Data visualization dashboard

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  22. 22 · featured

    Debounce & Throttle

    Search with debounce

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  23. 23 · featured

    Event Bubbling

    Event propagation demo

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  24. 24 · featured

    Cookies Vs LocalStorage

    User preferences app

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

PHASE 4 · 10 projects

TypeScript

Add type safety to your JavaScript.

  1. 01 · featured

    Types Vs Interfaces

    Convert JS Calculator to TS

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  2. 02 · featured

    Primitives

    TypeScript Todo App

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  3. 03 · featured

    Union, Intersection

    Data types playground

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  4. 04 · featured

    Optional, Readonly

    Form validation with TS

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  5. 05 · featured

    Function Types

    API fetch + TS typing

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  6. 06 · featured

    Generics

    Rebuild quiz app in TS

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  7. 07 · featured

    Modules

    Rebuild expense tracker in TS

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  8. 08 · featured

    Tsconfig

    TS utility functions library

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  9. 09 · featured

    Enums

    Weather app in TS

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  10. 10 · featured

    Type Narrowing

    Portfolio rebuild in TS

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

PHASE 5 · 19 projects

React & Next.js

Build modern, interactive web applications.

  1. 01 · featured

    JSX

    First React app

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  2. 02 · featured

    Components

    Counter app

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  3. 03 · featured

    Props

    Todo list

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  4. 04 · featured

    State

    Notes app

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  5. 05 · featured

    UseState

    Weather app

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  6. 06 · featured

    UseEffect

    Movie search

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  7. 07 · featured

    UseRef

    GitHub user finder

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  8. 08 · featured

    UseMemo

    Recipe finder

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  9. 09 · featured

    UseCallback

    Image gallery

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  10. 10 · featured

    Context API

    Pagination list

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  11. 11 · featured

    Custom Hooks

    Tabs UI

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  12. 12 · featured

    Component Composition

    Accordion

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  13. 13 · featured

    Next.js App Router

    First Next.js app

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  14. 14 · featured

    Dynamic Routes

    Blog dynamic route

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  15. 15 · featured

    Server Vs Client Components

    Weather app in Next

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  16. 16 · featured

    Data Fetching

    News feed (API)

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  17. 17 · featured

    React Query / SWR

    Custom hooks library

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  18. 18 · featured

    React Hook Form

    Form builder

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

  19. 19 · featured

    Deployment (free static hosting)

    Deploy your app

    HTML · CSS · Tailwind CSS · JavaScript · TypeScript · React · Next.js

Next step

Request Frontend Engineering

An advisor reviews the fit and confirms terms in writing. A request is not an acceptance and nothing is charged until you agree.