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
