Have you ever spent hours watching tutorial after tutorial, feeling like you get everything, but the moment you try to build something on your own, your mind just goes blank?

You are staring at an empty screen, not knowing what to type next.

If that sounds familiar, you are in the right place.

Hey there.

I am Arun.

Welcome to my bootcamp. I am here to help you break out of that endless tutorial hell.

Here, instead of memorizing concepts and syntax, we are going to build 26 real projects together, from scratch.

And more importantly, you will learn how to learn a programming language the right way.

Explore modules

What you will learn and build

HTML & CSS
Kite Festival
HTML & CSS, project 1 of 26
You learn
The page skeleton: html, head and body
The page title
Headings: h1 and h2
Paragraphs
Images
img with src and alt
Picture paths with ./
Grouping with div
Watchnest
HTML & CSS, project 2 of 26
You learn
The doctype
HTML comments
New tags: h4, input and button
How CSS works
Linking a stylesheet
Selector, property and value
Element selectors
Classes and class selectors
Sizes: width and height
Spacing
Margin on each side
Centering with margin: auto and display: block
Padding on each side
Borders
The border short form
Rounded corners with border-radius
border: none
Colours
Named colours and hex colours
Background colours
Text: font-size, font-weight and text-align
Flexbox
display: flex
flex-direction
justify-content: center
Headphone Shop
HTML & CSS, project 3 of 26
You learn
New tags
h3 and h5
span
Email inputs and placeholders
Flexbox
Flex children
justify-content: space-around
Short forms
Padding with one and two values
Margin with three values
Borders on one side
Circles with border-radius: 50%
Inheritance
Text styles: font-style and text-transform
More colour names
Postcard Shop
HTML & CSS, project 4 of 26
You learn
Fonts
Google Fonts
Several fonts in one link
Font fallbacks
Custom fonts with @font-face
Text shadows
Letter spacing
IDs and ID selectors
Background images
Inheriting fonts and colours with inherit
One class on many elements
Emoji in text
Find Mango
HTML & CSS, project 5 of 26
You learn
Hover
Hover effects with :hover
Changing images on hover
Flexbox alignment
align-items
All justify-content values
Linear gradients
Selectors
Grouping selectors
Classes and IDs together
The lang attribute
Font weights and system fonts
Special characters
Max and the Comet Badge
HTML & CSS, project 6 of 26
You learn
Sizes that fit any screen
Widths in %
max-width and min-width
The page container
Responsive images
rem and em
Phone layout
The viewport and meta charset
Media queries
Links
Links with a and href
Block, inline and inline-block
Links styled as buttons
Hover and focus on links
strong and em
Several classes on one element
Organizing CSS with comments
VibeTunes
HTML & CSS, project 7 of 26
You learn
The box model and box-sizing
Viewport units: vh and vw
Mobile-first design
min-width media queries
Combining media queries with and
Reordering with order
Gradients
Directions
Radial gradients
Gradient borders
Transitions and transforms
Sibling and universal selectors
Forms
Pointer cursors, background position, short hex colours
TrackTech
HTML & CSS, project 8 of 26
You learn
Page structure
header, nav, main, article, aside, section and footer
Lists: ul, ol and li
A site with several pages
Links to a part of a page
The menu
Lists without bullets
Descendant selectors
Marking the current page
A menu that stacks on phones
Pictures that fit
object-fit and object-position
min-height and max-height
:first-child and :last-child
Card layout
flex-basis
margin-top: auto
opacity
line-height
Two fonts on one page
A favicon
Icons with Font Awesome
JavaScript
Little Lamp
JavaScript, project 9 of 26
You learn
Variables
let, const and console.log
Numbers, strings and booleans
Updating a variable
Changing the page
getElementById and textContent
Joining text with +
Changing CSS with .style
disabled
hidden
Functions
Click events
Decisions
if and comparisons
if / else and else if
State and render
Parcel Quote
JavaScript, project 10 of 26
You learn
Functions
Parameters
return
Scope
Forms
submit and preventDefault
Reading inputs with .value
Text to numbers with Number()
Text
Template literals
Rounding with toFixed
Trimming spaces with trim
Guard clauses
&& and number ranges
Photo Strip
JavaScript, project 11 of 26
You learn
Arrays
Arrays and indexes
Array length
push and pop
Mutate versus reassign
Building the page from data
Creating elements with createElement
for loops
Clearing and re-rendering
innerHTML and user text
Pack Your Bag
JavaScript, project 12 of 26
You learn
Objects
Objects
Arrays of objects
for...of loops
Accumulators
Many buttons, one handler: dataset and currentTarget
classList
References
The ternary operator
SIP
JavaScript, project 13 of 26
You learn
Array methods
Callbacks and map
includes
filter
find
Arrow functions
Destructuring
||
Modules: import and export
T-shirt Studio
JavaScript, project 14 of 26
You learn
classList.toggle
null
Copies, not changes
Array spread
Object spread
Immutable updates
Saving in the browser
Saving with setItem and JSON.stringify
Loading with getItem and JSON.parse
Handling errors with try and catch
Show Finder
JavaScript, project 15 of 26
You learn
Waiting
setTimeout
Sync versus async
Talking to a server
fetch and await
response.ok and throw
Async functions
Loading, empty and error states
querySelector
React
Train Status
React Fundamentals
React, project 16 of 26
You learn
React elements
JSX
Expression slots
Differences from HTML
Components
Props
The children prop
Fragments
Rendering lists
Keys
Conditional rendering
With if
With &&
With the ternary
CSS Modules
Thinking in components
Cinema Booking
State and Interactivity
React, project 17 of 26
You learn
Event handlers
State
The useState hook
The core React loop
Rendering versus painting
Keeping components pure
Asynchronous updates and batching
Arrays and objects in state
Immutability
Complex state
Keys for new items
Forms
Props versus state
Lifting state up
Component instances
Using keys to reset state
Typing Test
Refs and Effects
React, project 18 of 26
You learn
Rules of hooks
useId
Refs with useRef
Effects
Side effects
Dependencies
Running on mount
Cleanup
useEffectEvent
You might not need an effect
Stale values and the setter callback
Strict Mode
Data fetching
On an event
On mount
Race conditions
Custom hooks
Snakes and Ladders
Managing State
React, project 19 of 26
You learn
Deriving state
A single source of truth
The principle of least privilege
useReducer
Lifting content up
Context
Prop drilling
Provider components
<Context> as a provider
Pet Adoption
Component Patterns
React, project 20 of 26
You learn
Prop delegation and delegating styles
Ref as a prop
Polymorphism
Slots
Compound components
Portals
Music Library
Performance
React, project 21 of 26
You learn
Why React re-renders
Pure components with React.memo
useMemo
useCallback
Context and re-renders
The React Compiler
Trip Guide
Suspense and Concurrent Rendering
React, project 22 of 26
You learn
Error boundaries
Suspense
Suspense with error boundaries
Code splitting with React.lazy
Reading data with use
Concurrent rendering
useTransition
useDeferredValue
Club Fair
Actions and Forms
React, project 23 of 26
You learn
Actions
Form actions
useActionState
useFormStatus
useOptimistic
Arun's Kitchen
Routing with React Router
React, project 24 of 26
You learn
Client-side routing
Routes
Defining routes
Nested routes and layouts
Dynamic routes and URL params
Search params
Not found and error pages
Lazy loading routes
Navigation
Link and NavLink
Navigating in code with useNavigate
Pending UI with useNavigation
Data
Loaders
Route actions
Full-stack app from scratch
The Museum of Almost Useful Inventions
React, Node.js, Express, MongoDB, Mongoose, Cloudinary and Render
Full-stack app from scratch, project 25 of 26
You learn
- How a full-stack app works
  Client and server
  HTTP requests, responses and status codes
  One request from React to MongoDB and back
  Development and production
- Express
  Creating a server
  Routes with GET, POST, PATCH and DELETE
  Route params, query params and JSON bodies
  One response shape for data and errors
  Middleware and route order
  One error handler
- MongoDB and Mongoose
  Databases, collections and documents
  Connecting to MongoDB
  Schemas and models
  ObjectId references and populate
  CRUD in the database
  Filters and pagination
  Indexes and unique fields
  Timestamps
  Seeding sample data
  Catching edits that would overwrite each other
- Talking to the API from React
  Cancelling old requests with AbortController
  Protected pages
- Image uploads
  File inputs and previews with object URLs
  FormData and multipart requests
  Receiving files with Multer
  Checking a file's real contents
  Resizing and converting with Sharp
  Storing images on Cloudinary
  Replacing and removing images
  Cleaning up when one service fails
- Accounts and sessions
  Registration
  Password hashing with Argon2id
  Login and logout
  Sessions in HttpOnly cookies
  Session regeneration and expiry
- Permissions
  Who you are versus what you may do
  Ownership checks
  Roles
  Enforcing rules on the server
- Security
  Server-side validation and field allowlists
  CSRF tokens
  Rate limiting
  Secure cookies and headers
  Environment variables
- Testing and deployment
  API and browser tests
  Mocking outside services
  Production builds served by Express
  Reverse proxies
  Deploying on Render

Plus 3 bonuses

Click a box three times for a surprise.Tap a box three times for a surprise.

Bonus 1
Build an online shop with an AI agent
Learn to build an e-commerce site with an AI agent, step by step with Arun.
Bonus 2
An ATS friendly resume
Learn how to write a strong resume that hiring software can read.
Bonus 3
LinkedIn and Naukri profiles
Learn how to build strong LinkedIn and Naukri profiles on your own.

My goal isn't to fill your head with syntax. It's to help you understand coding well enough to solve problems and create projects on your own.

Arun

Hey there.Heythere.

What you will learn and buildWhat you willlearn and build

1HTML & CSS

1Kite Festival

2Watchnest

3Headphone Shop

4Postcard Shop

5Find Mango

6Max and the Comet Badge

7VibeTunes

8TrackTech

2JavaScript

9Little Lamp

10Parcel Quote

11Photo Strip

12Pack Your Bag

13SIP

14T-shirt Studio

15Show Finder

3React

16Train Status

17Cinema Booking

18Typing Test

19Snakes and Ladders

20Pet Adoption

21Music Library

22Trip Guide

23Club Fair

24Arun's Kitchen

4Full-stack app from scratch

25The Museum of Almost Useful Inventions

Plus 3 bonusesPlus 3 bonuses

Build an online shop with an AI agent

An ATS friendly resume

LinkedIn and Naukri profiles

Hey there.

What you will learn and build

HTML & CSS

Kite Festival

Watchnest

Headphone Shop

Postcard Shop

Find Mango

Max and the Comet Badge

VibeTunes

TrackTech

JavaScript

Little Lamp

Parcel Quote

Photo Strip

Pack Your Bag

SIP

T-shirt Studio

Show Finder

React

Train Status

Cinema Booking

Typing Test

Snakes and Ladders

Pet Adoption

Music Library

Trip Guide

Club Fair

Arun's Kitchen

Full-stack app from scratch

The Museum of Almost Useful Inventions

Plus 3 bonuses