Web Development Fundamentals - 4 Week Study Plan
(HTML, CSS, JavaScript)
✅ Week 1: Introduction to Web Development + HTML Basics
Topics Covered:
Introduction to Web Development
What is Web Development (Frontend vs Backend)
How websites work (Browsers, Servers, HTTP)
Introduction to HTML (HyperText Markup Language)
HTML Document Structure
Basic HTML Tags:
Headings (<h1> to <h6>)
Paragraphs, Images, Links, Lists, Tables, Forms (intro)
Hands-On Activity:
- Create an "About Me" page using basic HTML tags
Assignment:
- Create a simple portfolio home page with name, bio, and multiple HTML
elements
✅ Week 2: CSS Basics - Styling the Web
Topics Covered:
- What is CSS
- Ways to apply CSS:
Inline, Internal, External
CSS Syntax: Selectors, Properties, Values
Styling Basics:
Fonts, Colors, Borders, Backgrounds
Box Model
Layout Basics:
Display types, Positioning, Intro to Flexbox
Hands-On Activity:
- Style the "About Me" HTML page with CSS
Assignment:
- Build a 2-section landing page with text, image, and basic layout using CSS
✅ Week 3: JavaScript Fundamentals - Add Interactivity
Topics Covered:
What is JavaScript?
How to use JavaScript in HTML
Variables and Data Types
Functions and Events
Conditionals and Loops
DOM Manipulation Basics
Hands-On Activity:
- Add a button that changes text or background color on click
Assignment:
- Create an interactive form that shows a thank-you message on submit
✅ Week 4: Final Project + Review + Next Steps
Topics Covered:
Recap of HTML, CSS, JavaScript
Folder structure and file linking
Using DevTools (Inspect, Console)
Intro to Hosting (GitHub Pages, Netlify)
Q&A and Troubleshooting
Guidance on further learning
Mini Project:
- Personal Portfolio Website:
- Home and About sections
- Styled using CSS
- JavaScript interaction (e.g., dark mode toggle, form feedback)
Final Assignment:
- Complete and deploy the personal portfolio website
🗓 Suggested Study Between Sessions:
- Spend 1-2 hours during the week practicing
- Use these platforms:
- https://www.freecodecamp.org/
- https://www.w3schools.com/
- https://developer.mozilla.org/
🛠 Tools to Prepare:
- VS Code (Text Editor)
- Google Chrome (with DevTools)
- GitHub account (for project deployment)
- Optional: CodePen or JSFiddle for live coding
Tips for Success:
- Understand the logic, don’t just memorize code
- Practice small projects regularly
- Stay consistent and ask questions during sessions
- Upload all projects to GitHub for your portfolio
