8-Week Roadmap to Your First Web Development Job

This plan helps you learn web basics and launch a project. You will build real skills and a project for your resume.

  • Weekly Hours: 10
  • Estimated Weeks: 8

Phases

Foundations

Build your core understanding of how web pages work. Learn HTML, CSS, and basic JavaScript to create simple web pages and interactive features.

2 weeks

  • Understand how websites are structured
  • Learn to write basic HTML
  • Style web pages with CSS
  • Use JavaScript for small interactions
  • Write HTML (make a simple homepage)
  • Structure content using headings and lists
  • Apply CSS for color and layout
  • Add button clicks with JavaScript
  • HTML Tutorial
  • CSS Guide
  • JavaScript Intro
  • Practice Editor
  • Create a two-page site with navigation (Home and About)
  • Homepage has CSS styling (colors, layout)
  • Page button shows alert on click (JavaScript)
  • Show site to a friend for feedback

Interactive Frontend

Dive into interactive web apps with a popular framework. Learn about components, simple routing, forms, and state management using React.

2 weeks

  • Set up a new React project
  • Build page navigation with routing
  • Manage information using state
  • Create and handle web forms
  • Create components (header, footer, dashboard)
  • Handle navigation (React Router)
  • Store user input (state hooks)
  • Make a form with validation
  • React Beginner Guide
  • React Docs
  • Component Examples
  • Form Tutorials
  • App has three pages (dashboard, profile, settings)
  • Navigation updates URL and content (React Router)
  • Form submits and shows errors (state validation)
  • Demo video: fill and submit form

Project Deep Dive

Focus on growing your one big project: a personal task tracker app. Add features, handle edge cases, and write simple tests to show your skills.

2 weeks

  • Add features like task edit and delete
  • Store tasks and show task list updates
  • Test your main features
  • Make project mobile-friendly
  • Update and remove list data (state updates)
  • Test button clicks (Jest)
  • Style for smaller screens (media queries)
  • Write clear instructions (README)
  • Jest Testing Guide
  • Responsive Design Tips
  • Sample README File
  • Project Showcase Examples
  • Tracking app: add/edit/delete tasks (React)
  • Write two passing feature tests (Jest)
  • README explains how to use and run the app
  • App looks good on phone and desktop

Deploy and Share

Get your project online and ready to show employers. Learn simple hosting, basic version control, and sharing your work.

1 weeks

  • Set up a GitHub repo for your project
  • Deploy app using a free hosting tool
  • Check your app works live
  • Share link and code with others
  • Upload code (GitHub)
  • Host project online (Vercel or Netlify)
  • Describe your project for readers
  • Fix a simple deployment bug
  • GitHub Setup Steps
  • Netlify/Vercel Deploy Guide
  • Portfolio Sharing Instructions
  • Project repo is public (GitHub link)
  • Live app link is working (Netlify or Vercel)
  • README includes demo link and screenshots
  • CI badge (Netlify/Vercel) shows build passed

Apply and Grow

Prepare your application materials and begin your job hunt. Share your project, ask for feedback, and practice talking about your work.

1 weeks

  • Write a simple resume with your project listed
  • Create a LinkedIn profile
  • Practice basic interview questions
  • Ask for project feedback
  • Summarize project experience on resume
  • Create a LinkedIn project post
  • Answer 'Tell me about your project' question
  • Act on peer feedback (project tweaks)
  • Resume Template
  • LinkedIn Guide
  • Common Interview Questions
  • Resume: project and live link included
  • Share project on LinkedIn and code forum
  • Get 1+ feedback comment on project post
  • Give mock interview with a friend

Weekly Plan

Week Focus Why Tasks Deliverables
1 HTML and CSS basics Websites need structure and style to look and work well. Build a homepage (HTML), Add a navigation bar (links), Style navigation and text (CSS), Create an 'About' page Homepage and About page with styled text, Link between pages works
2 Adding interactivity with JavaScript Interactivity makes web pages engaging for users. Add a contact form (HTML), Validate form input (JavaScript), Show alert on submit, Tweak CSS for better layout Form page with working alert, Polished two-page static site
3 Starting with React Modern sites use frameworks like React for smoother experience. Set up a new React app (Create React App), Create main pages as components, Add a header and footer, Explore how props work Basic React app runs locally, Header/Footer display on every page
4 Routing and State in React State and routing let users move and interact in apps. Add React Router to project, Create page navigation menu, Build a dashboard page, Manage current page with routes App navigates between at least three pages, Dashboard shows sample content
5 Task Tracker core features A real project shows learning and problem-solving skills. Add a task list page, Enable adding new tasks (form and state), Show tasks as a list, Style list and form Task Tracker shows, adds, and lists tasks, App styled for easy reading
6 Edit, delete, and test features Project depth matters to employers. Add edit and delete buttons for each task, Update tasks using form and state, Write a test for add-task (Jest), Write a test for delete-task All task features work smoothly, Two Jest tests pass
7 Mobile friendly and deployment Real people use phones and expect working live sites. Tweak CSS with media queries, Set up a GitHub repo, Deploy project to Netlify or Vercel, Troubleshoot basic deployment issues App works on phone and desktop, Live project link ready to share
8 Showcase and apply Showing your project and yourself is the last step. Write a README (usage, demo, link), Update resume with project and link, Share on LinkedIn for feedback, Do a practice interview with a friend Project has README and demo screenshots, Resume/LinkedIn post includes project

Daily Plan

Monday

  • Read phase guide
  • Watch 1 resource video or reading
  • Sketch new feature or page
Tuesday

  • Write code for feature or page
  • Test change in browser
Wednesday

  • Fix bugs from yesterday
  • Tweak CSS for look
  • Ask for feedback from peer
Thursday

  • Add more code (next task in weeklyPlan)
  • Try a stretch feature (if time)
Friday

  • Review work this week
  • Write summary in project README or journal
  • Clean up code/comments
Communicating Construction
Communicating Construction
 Using Technology-delivered Learning
Using Technology-delivered Learning

Related Compass