JavaScript Fundamentals

Total Duration: 10 Classes (2.5 Hours Each)
Level: Beginner
Goal: Equip students with foundational web development skills to prepare them for more advanced topics like React and Next.js.

Phase 1: HTML & CSS (4 Classes)

Class 1: HTML Fundamentals

1. Introduction to HTML:
   • History and Definition
   • Structure of an HTML Document
   • Common HTML Tags and Their Uses (Headings, Paragraphs, Links, Images, etc.)
   • Forms and Input Elements
   • Semantic HTML Best Practices
2. Design Structure Breakdown:
   • Planning the Layout and Structure Before Coding (Wireframing)
   • Breaking Down a Design into HTML Structure
3. Git Basics:
   • Introduction to Git and Version Control
   • Setting Up a Local Repository, Initializing a Project, and Basic Commands

Class 2: CSS & Tailwind CSS

1. CSS Fundamentals:
   • CSS Syntax and Selectors
   • Box Model, Margins, Padding, and Borders
   • Positioning and Layout Basics (Flexbox and Grid)
2. CSS Framework – Tailwind CSS:
   • Introduction to Utility-First CSS with Tailwind
   • Setting Up Tailwind in Your Project
   • Building Responsive Web Pages with Tailwind
   • Customizing Tailwind for Personal Projects
3. Small Projects:
   • Design and Build Small Projects (Card Design, Banner Design, Header and Footer)
4. Personal Project:
   • Start Working on a Portfolio Website (HTML and Tailwind)

Phase 2: JavaScript (6 Classes)

Class 3: JavaScript Basics

1. Introduction to JavaScript:
   • History and Evolution of JavaScript
   • Basic Syntax, Variables, Let/Const/Var
   • Data Types and Operators in JavaScript
   • Funny Scenarios of JavaScript: The Quirks of the Language
2. Control Flow and Functions:
   • If-Else, Switch Statements
   • Loops (for, while)
   • Functions and Scope in JavaScript

Class 4: DOM Manipulation and Events

1. DOM Manipulation:
   • Understanding the Document Object Model (DOM)
   • Selecting and Manipulating HTML Elements
   • Real-Time DOM Manipulation
2. Event Handling in JavaScript:
   • Understanding Events and Event Listeners (click, hover, etc.)
   • Working with Forms and Input Fields
3. Small Projects:
   • Build a Simple Calculator, Digital Watch, and a Money Bag Counter as mini-projects

Class 5: Advanced JavaScript Concepts

1. Arrays and Objects:
   • Introduction to Arrays, Objects, and How to Use Them
   • Modern JavaScript Methods: map, filter, reduce
2. Functions as First-Class Citizens:
   • Callbacks, Higher-Order Functions, and Closures
3. Error Handling:
   • Using try-catch for Error Handling
4. Small Project (Home Task):
   • Build a Cat Game (Interactive Small Project)

Class 6: Git and Version Control

1. Detailed Git Commands:
   • Clone, Commit, Push, Pull, Branch, Merge
2. Collaboration Using Git:
   • Understanding GitHub for Team Collaboration
   • Best Practices for Version Control in Teams

Class 7: Project Update & Feedback

1. Project Review:
   • Review of Ongoing Projects and Assignments
   • Individual Feedback on Projects
2. Improving Code Quality:
   • How to Improve Code Quality and Efficiency
   • Best Practices for Project Management and Collaboration

Class 8: Job Guideline, CV Update, & Final Project

1. Career Path and Job Guidelines:
   • Insights into the Web Development Job Market
   • Skills in Demand and Career Path in JavaScript Development
2. CV Update & Interview Simulation:
   • Tailoring Your CV for JavaScript Developer Roles
   • Mock Interview Preparation
3. Final Project:
   • Build a Project Using the Skills Learned
   • Prepare for Advanced Topics in Web Development (React, Next.js)

Tools & Technologies Covered:

• Languages: HTML, CSS, JavaScript
• Frameworks: Tailwind CSS
• Version Control: Git & GitHub

This course outline is subject to modifications based on student progress and evolving industry needs.