HTML, CSS & JS

HTML, CSS & JavaScript

Phase 1: Introduction to Web Development

• What is web development?
  
  

• Difference between frontend and backend
  
  

• How websites work (Client/Server model)
  
  

• Tools Setup:
  
  

  • Code Editor (e.g., VS Code)
    
    

  • Browsers (Chrome, Firefox)
    
    

  • Live Server Extension
    
    

  • Basic Terminal/Git (optional at this stage)
    
    

Phase 2: HTML (HyperText Markup Language)

Goal: Build static webpage structure
Topics:

1. HTML Boilerplate & Syntax
   
   

2. Elements, Tags, and Attributes
   
   

3. Headings, Paragraphs, Line Breaks
   
   

4. Lists (Ordered & Unordered)
   
   

5. Links and Anchors (<a>)
   
   

6. Images (<img>)
   
   

7. Tables
   
   

8. Forms and Input Elements
   
   

9. Semantic HTML:
   
   

• <header>, <footer>, <nav>, <main>, <section>, <article>
  
  

Media Elements:

• <video>, <audio>, <iframe>
  
  

Project: Simple static portfolio page

Phase 3: CSS (Cascading Style Sheets)

Goal: Style and layout the webpage
Topics:

1. Introduction to CSS
   
   

2. Selectors and Properties
   
   

3. Colors, Backgrounds, and Borders
   
   

4. Fonts and Text Styling
   
   

5. Box Model (Margin, Border, Padding)
   
   

6. Units: px, em, rem, %, vh, vw
   
   

7. Display Property (block, inline, inline-block)
   
   

8. Positioning (static, relative, absolute, fixed)
   
   

9. Flexbox
   
   

10. CSS Grid (basics)
    
    

11. Pseudo-classes and Pseudo-elements
    
    

12. Transitions and Basic Animations
    
    

13. Media Queries (Responsive Design)
    
    

14. CSS Variables
    
    

Project: Responsive personal blog layout or landing page

Phase 4: JavaScript (Client-Side Programming)

Goal: Add interactivity to webpages
Topics:

1. Introduction to JavaScript
   
   

2. Variables (let, const)
   
   

3. Data Types (String, Number, Boolean, Null, Undefined, Objects, Arrays)
   
   

4. Operators and Expressions
   
   

5. Control Structures:
   
   

• if/else, switch
  
  

• Loops: for, while, for...of
  
  

Functions and Scope

Events and Event Listeners

DOM Manipulation

• getElementById, querySelector
  
  

• Modifying content and styles
  
  

• Creating and removing elements
  
  

Forms and Input Validation

Arrays & Objects (Basics and Methods)

ES6+ Concepts:

• Arrow functions
  
  

• Destructuring
  
  

• Template literals
  
  

• Spread/rest operators
  
  

Basic Debugging and Console

Intro to Fetch API & Promises

JSON (Parse and Stringify)

Project: Interactive to-do list or quiz app

Phase 5: Putting It All Together

Goal: Build full projects combining HTML, CSS & JS
Mini Projects:

• Image slider
  
  

• Modal popup
  
  

• Responsive navbar
  
  

• Form validator
  
  

• Calculator
  
  

Final Project Ideas:

• Personal portfolio website
  
  

• Product landing page
  
  

• Simple weather app using API
  
  

• Blog with local storage
  
  

Optional Advanced Topics (If Time Permits)

• LocalStorage and SessionStorage
  
  

• JavaScript ES6 Modules
  
  

• Intro to Git and GitHub
  
  

• CSS Frameworks (e.g., Bootstrap or Tailwind)
  
  

• JavaScript Libraries (e.g., jQuery, Chart.js)
  
  

• Basic introduction to Angular, React.js or Vue.js (optional transition)