FRONT-END DEVELOPMENT BOOTCAMP

Day Topic Key Concepts Project/Task

Week 1: HTML, CSS,

JavaScript
Fundamentals

Structure, tags, forms, Build a personal

Day 1 HTML Basics
semantic HTML portfolio (HTML only)

Selectors, Box Model,

CSS Style the portfolio
Day 2 Flexbox, Grid,
Fundamentals page
Responsive Design

Animations,
CSS Advanced + Convert portfolio to
Day 3 positioning, Tailwind
Tailwind CSS Tailwind CSS
utility classes

Variables, loops, Create a simple

Day 4 JavaScript Basics
functions, conditionals counter app

Event handling, Add dark mode &

JavaScript DOM
Day 5 modifying elements, interactive form to
Manipulation
local storage portfolio

Week 2: JavaScript,
Git, APIs, React

Git commands,
Push portfolio
Day 6 Git & GitHub repositories, branching,
project to GitHub
merging

Fetch and display

JavaScript ES6, array methods,
Day 7 data from a public
Advanced async JS, Fetch API
API

Create a simple
Introduction to JSX, components,
Day 8 React app for user
React props
profiles
Day Topic Key Concepts Project/Task

React State & useState, forms, React Convert portfolio to a

Day 9
Routing Router React project

Fetching API data,

React APIs & Build and deploy a
Day 10 useEffect, deployment
Deployment Job Finder App
methods

Review concepts, build Final practice and

Revision &
Weekend extra projects, interview portfolio
Projects
prep improvement
Front-End Development Study Guide: Become a Front-End Developer in
Two Weeks

Week 1: HTML, CSS, JavaScript Fundamentals

Day 1 – HTML Basics

Topics Covered:

• Understanding HTML document structure

• Common HTML tags (headings, paragraphs, links, images, lists, tables, etc.)

• Semantic HTML (article, section, aside, header, footer, etc.)

• Forms and inputs (text fields, buttons, checkboxes, radio buttons, select menus)

• Accessibility best practices

Project:

Build a simple personal portfolio page using HTML.

Day 2 – CSS Fundamentals

Topics Covered:

• Introduction to CSS

• CSS syntax and selectors

• The box model (margin, border, padding, content)

• Colors and fonts (CSS units, font properties, Google Fonts)

• Flexbox & Grid for layout

• Media queries for responsive design

Project:

Style your portfolio page using CSS.

Day 3 – CSS Advanced + Tailwind CSS

Topics Covered:

• Advanced CSS (transitions, animations, transforms)

• CSS Variables and Custom Properties

• Introduction to Tailwind CSS

• Utility-first styling approach

• Responsive design using Tailwind

Project:

Rebuild your portfolio page using Tailwind CSS for styling.

Day 4 – JavaScript Fundamentals

Topics Covered:

• Introduction to JavaScript (variables, data types, operators)

• Functions and scope

• DOM manipulation (querySelector, event listeners)

• Handling user inputs (forms, buttons, keyboard events)

• Loops and conditionals

Project:

Add interactive elements to your portfolio page (e.g., a dynamic contact form).

Day 5 – JavaScript Advanced Concepts

Topics Covered:

• ES6+ Features (let/const, arrow functions, template literals, destructuring)

• Promises and async/await

• Fetch API for HTTP requests

 • Local Storage & Session Storage

• Error handling in JavaScript

Project:

Build a simple weather app using the Fetch API.

Day 6 – Version Control & Git/GitHub

Topics Covered:

• What is Git and why use it?

• Installing and setting up Git

• Basic Git commands (init, add, commit, push, pull, branch, merge)

• Creating and managing repositories on GitHub

• Hosting projects using GitHub Pages

Project:

Push your portfolio project to GitHub and deploy it using GitHub Pages.

Day 7 – Project Day & Recap

• Review HTML, CSS, and JavaScript concepts

• Improve and refine the portfolio project

• Experiment with animations and better UI designs

• Reflect on the progress and prepare for Week 2

Week 2: JavaScript Frameworks, APIs, and Deployment

Day 8 – Introduction to React.js

Topics Covered:

• Why use React?

• React setup (Create React App, Vite, or CDN)

• Components and Props

• JSX Syntax

• Handling Events

Project:

Rebuild the portfolio page using React components.

Day 9 – React State & Hooks

Topics Covered:

• State and useState Hook

• useEffect for side effects

• Conditional rendering

• Handling forms and inputs in React

Project:

Build a simple to-do list app with React.

Day 10 – Working with APIs in React

Topics Covered:

• Fetching data with useEffect

• Handling API responses and errors

• Displaying data dynamically

Project:

Expand the weather app using React and an API.

Day 11 – State Management & Routing in React

Topics Covered:

• Context API for state management

• React Router for navigation

• Lazy loading and code splitting

Project:

Convert the portfolio into a multi-page React app.

Day 12 – CSS Frameworks & UI Libraries

Topics Covered:

• Introduction to UI frameworks (Bootstrap, Material UI, Tailwind UI)

• Component libraries and best practices

Project:

Enhance UI with a UI framework and improve responsiveness.

Day 13 – Deployment & Optimization

Topics Covered:

• Deploying React apps using Netlify, Vercel, or Firebase

• Performance optimization techniques

• SEO basics for front-end developers

Project:

Deploy the React portfolio project online.

Day 14 – Final Project & Next Steps

• Build a final capstone project (e.g., a blog, an e-commerce frontend, or a

dashboard)

• Showcase projects on a portfolio site

• Next steps: learning TypeScript, backend technologies (Node.js, Express), and

databases

Conclusion:

By the end of this study plan, you will have built multiple projects, gained hands-on
experience with front-end technologies, and prepared a strong portfolio to showcase your
skills. Keep practicing, learning, and refining your craft to become a proficient front-end
developer!

Resources for Further Learning:

• MDN Web Docs

• CSS Tricks

• React Docs

• Frontend Mentor