Web Development: One-Page Checklist & 30-Day Calendar (Month 1)
Goal: From zero → build strong foundations in HTML/CSS/JS and launch your portfolio
One-Page Printable Checklist
■ Decide stack: MERN (React + Node + Express + MongoDB).
■ Accounts: GitHub, Netlify or Vercel, LinkedIn, Upwork/Fiverr.
■ Week 1–4 goals: 2 static demos (live), responsive layout, Git basics.
■ Week 5–8 goals: 1 vanilla JS app (To-Do), fetch + public API app.
■ Week 9–12 goals: 1 React SPA deployed (Vercel/Netlify).
■ Month 4 goals: Backend API (Express) + DB (MongoDB Atlas) + deployed.
■ Full-stack demo: React frontend connected to your own API + auth. Live link in portfolio.
■ Portfolio: 3 case studies (problem → solution → tech → demo + GitHub).
■ Resume & LinkedIn: one-page resume, stack at top, portfolio link.
■ Interview prep: 30 easy algorithm problems practiced, 2 mock interviews done.
■ Freelance safety net: 1–3 maintenance clients or ongoing gigs (optional).
■ Apply target: 10–20 tailored job applications/week during job hunt.
■ Daily habit: Commit code every weekday and deploy at least weekly.
30-Day Calendar — Month 1
30-Day Day-by-Day Calendar — Month 1: HTML/CSS/JS Foundations
Assumes ~3 hrs/day on weekdays and ~5 hrs/day on weekend days.
Use this plan: Read/watch the lesson, code along, commit changes, and deploy demos.
Day 1 — HTML basics
freeCodeCamp — Basic HTML and HTML5 (start Responsive Web Design). Build a simple “About me”
page.
Day 2 — HTML (forms & semantic tags)
MDN — HTML elements reference; add a contact form to your page.
Day 3 — CSS basics
freeCodeCamp — Basic CSS: selectors, box model. Style your About page.
Day 4 — Layouts (Flexbox)
MDN + freeCodeCamp Flexbox module — convert a two-column layout using Flexbox.
Day 5 — Layouts (Grid)
MDN — CSS Grid Layout tutorial; build a gallery section.
Day 6 (Sat) — Build Demo #1 & deploy
Assemble demo #1 (Landing page with hero, about, contact). Deploy to GitHub Pages or Netlify.
Commit and push.
Day 7 (Sun) — Responsive & images
Make Demo #1 responsive (media queries), compress images, add alt text, write README.
Day 8 — JS basics
freeCodeCamp — JavaScript basics (variables, functions). Build a small script to show
date/time.
Day 9 — Arrays & Objects
MDN — JavaScript reference: arrays & objects. Add a small array of services and render it with
JS.
Day 10 — DOM manipulation & events
MDN — DOM introduction and events; make a menu toggle and form validation.
Day 11 — Local Storage & small app
Build a To-Do app that stores tasks in localStorage (add/read/delete).
Day 12 — Fetch & API basics
MDN/fCC — fetch API / async/await. Connect to a public API (e.g., OpenWeather) and display
results.
Day 13 (Sat) — Build Demo #2 (To-Do or API app)
Polish and deploy Demo #2 to Netlify/Vercel. Add README describing tech.
Day 14 (Sun) — Practice & code review
Refactor earlier code for readability, push a clean commit history.
Day 15 — Git basics
GitHub Docs — Git basics (init, add, commit, branch, push). Create a repo for your portfolio.
Day 16 — Deployment (Vercel/Netlify)
Vercel / Netlify docs — deploy a static site. Deploy your portfolio shell.
Day 17 — Build portfolio shell
Create a simple portfolio landing linking Demo #1 & Demo #2 + GitHub links. Deploy it.
Day 18 — WordPress vs Webflow intro (optional)
Watch a WordPress + Elementor tutorial and set up a demo WP site on cheap hosting (optional for
freelance income).
Day 19 — Create Fiverr/Upwork profiles
Write your gig for Landing Page (use prepared gig text). Add portfolio link.
Day 20 (Sat) — Create templates
Turn Demo #1 into a reusable template (placeholder text/images) to speed delivery for clients.
Day 21 (Sun) — Outreach list & pitch
Make a list of 30 local businesses and send the outreach message to 10 of them.
Day 22 — React intro & environment
Official React docs — Quick Start (set up with Vite). Start a new React project.
Day 23 — JSX & components
Build simple components (Header, Footer, Card). Commit.
Day 24 — State & hooks (useState)
React docs — Using the State Hook; convert your To-Do app to React (local state).
Day 25 — Effects & data fetching (useEffect)
React docs — useEffect; fetch the same public API you used in vanilla JS and show results in
React.
Day 26 — Routing
React Router basics (install react-router-dom) and add 2 pages to your React app (Home,
Projects).
Day 27 (Sat) — Styling React app
Pick Tailwind or CSS Modules. Apply responsive style to your React app.
Day 28 (Sun) — Deploy React app
Deploy to Vercel. Add the live link to your portfolio.
Day 29 — Node.js & Express basics
The Odin Project / Express quickstart — create a simple Express server with routes.
Day 30 — MongoDB Atlas + connecting
MongoDB tutorial — Express + MongoDB Atlas REST API. Build simple notes API.
Built for you — follow daily, commit often, and deploy. Ask for edits anytime.
