Web Development Crash Course Syllabus

Welcome to the Web Development Crash Course! This repository contains the syllabus, assignments, and resources for a 12-week journey into web development.

Course Overview

• Duration: 3 Months
• Frequency: 3 Classes per Week (2 Hours Each)
• Format: Practical, project-based learning

---

Weekly Topics and Assignments

Week 1: Introduction to Web Development

1. • Lecture 1: Fundamentals of Web Development
     • How the web works
     • Overview of HTML, CSS, and JavaScript
     • Client-server architecture
     • Assignment: Write a short paragraph explaining how a website is served from a server to a browser.

2. Lecture 2: Setting Up the Development Environment

   • Installing VS Code and extensions
   • Introduction to Git and GitHub
   • Version control basics
   • Assignment: Set up a GitHub repository and push an initial README file with a brief bio.

3. Lecture 3: Debugging and Troubleshooting Basics

   • Inspecting elements and debugging with browser tools
   • Common errors and their fixes
   • Assignment: Identify and fix simple HTML/CSS bugs provided in a code snippet.

---

Week 2: HTML Basics

1. Lecture 4: HTML Syntax and Structure

   • Tags, attributes, and indentation
   • Headings, paragraphs, and lists

2. Lecture 5: Links, Images, and Multimedia

   • Adding hyperlinks
   • Embedding images and videos

3. Lecture 6: Forms and Input Elements

   • Input types and attributes

   • Creating simple forms

   • Week 2 Assignment

---

Week 3: CSS Basics

1. Lecture 7: Introduction to CSS

   • CSS syntax and properties
   • Inline, internal, and external CSS
   • Assignment: Style the webpage created in Week 2 using basic CSS (colors, fonts, and spacing).

2. Lecture 8: Box Model and Layout

   • Understanding the box model
   • Margin, padding, and borders
   • Assignment: Adjust the layout of a webpage using box model properties for neat spacing.

3. Lecture 9: Positioning and Display

   • Static, relative, absolute, and fixed positioning
   • Display properties (block, inline, flex)
   • Assignment: Create a webpage layout using a mix of positioning and display properties.

---

Week 4: Advanced CSS Techniques

1. Lecture 10: Flexbox Basics

   • Setting up a Flexbox container
   • Aligning and distributing items
   • Assignment: Create a responsive navigation bar using Flexbox.

2. Lecture 11: Grid Layout Basics

   • Grid container and grid items
   • Grid rows, columns, and areas
   • Assignment: Design a webpage with a two-column layout using CSS Grid.

3. Lecture 12: Introduction to Bootstrap

   • Bootstrap grid system
   • Using Bootstrap components
   • Assignment: Create a responsive webpage using Bootstrap templates and grid system.

---

Week 5: JavaScript Basics

1. Lecture 13: Introduction to JavaScript

   • Variables, data types, and operators
   • Basic input/output
   • Assignment: Write a script that asks for the user's name and greets them in an alert box.

2. Lecture 14: Conditional Statements and Loops

   • If/else, switch cases
   • For, while, and do-while loops
   • Assignment: Create a program to print numbers 1-100 and label even/odd numbers.

3. Lecture 15: Functions and Arrays

   • Declaring functions and using arrays
   • Array manipulation methods
   • Assignment: Write a function that returns the largest number in an array.

---

Week 6: DOM Manipulation

1. Lecture 16: Introduction to the DOM

   • Selecting and manipulating elements
   • Event listeners
   • Assignment: Create a button that changes the background color of the webpage when clicked.

2. Lecture 17: Forms and Input Validation

   • Accessing form elements via DOM
   • Validating input fields
   • Assignment: Build a login form that validates email format and password length.

3. Lecture 18: Building Interactive Webpages

   • Dynamic content updates
   • Best practices for DOM manipulation
   • Assignment: Add interactive features (e.g., a to-do list) to an existing webpage.

---

Week 7: React Basics

1. Lecture 19: Introduction to React

   • What is React?
   • Setting up a React environment
   • Understanding components
   • Assignment: Create a React app with a single functional component displaying "Hello, World!".

2. Lecture 20: JSX and Props

   • Writing JSX
   • Passing and using props in components
   • Assignment: Build a React component that takes a name prop and displays "Welcome, [name]!".

3. Lecture 21: State and Event Handling

   • Using useState
   • Handling events like clicks
   • Assignment: Create a React component with a button that toggles text between "ON" and "OFF".

---

Week 8: React Advanced Concepts

1. Lecture 22: Component Lifecycle and Hooks

   • Lifecycle of components
   • Using useEffect
   • Assignment: Create a React component that fetches and displays data from an API using useEffect.

2. Lecture 23: Conditional Rendering and Lists

   • Rendering content conditionally
   • Mapping arrays to components
   • Assignment: Build a React component that displays a list of items with a button to filter out specific ones.

3. Lecture 24: Forms and Input Handling in React

   • Controlled vs. uncontrolled components
   • Handling form inputs
   • Assignment: Create a React form that accepts and displays user input as it's typed.

---

Week 9: Version Control and Deployment

1. Lecture 25: Advanced Git and GitHub

   • Branching and merging
   • Resolving merge conflicts
   • Assignment: Create a new branch in a GitHub repository, make changes, and merge it back to the main branch.

2. Lecture 26: Hosting on GitHub Pages

   • Setting up GitHub Pages
   • Deploying a static website
   • Assignment: Deploy your Week 4 project (Bootstrap-based webpage) to GitHub Pages and share the link.

3. Lecture 27: Deployment Using Netlify and Vercel

   • Comparing deployment platforms
   • Deploying React apps
   • Assignment: Deploy a React app to Netlify or Vercel and verify its functionality.

---

Week 10: Backend Basics

1. Lecture 28: Introduction to Node.js

   • Setting up Node.js
   • Writing a simple server
   • Assignment: Build a basic Node.js server that serves a "Hello, World!" message.

2. Lecture 29: Introduction to Express.js

   • Setting up Express.js
   • Creating routes and handling requests
   • Assignment: Create an Express.js server with at least three routes (e.g., /, /about, /contact).

3. Lecture 30: Connecting to a Database

   • Setting up a MongoDB database
   • CRUD operations using MongoDB
   • Assignment: Create an Express.js app that saves and retrieves data from MongoDB.

---

Week 11: Backend and Frontend Integration

1. Lecture 31: RESTful APIs

   • Understanding REST principles
   • Creating a RESTful API with Express
   • Assignment: Build a RESTful API to manage a simple "To-Do" list.

2. Lecture 32: Fetching Data from APIs

   • Using fetch or axios in React
   • Connecting frontend to backend
   • Assignment: Create a React app that consumes the "To-Do" API and displays the tasks.

3. Lecture 33: Authentication Basics

   • Understanding JWT
   • Implementing login/logout functionality
   • Assignment: Add authentication to the React-Express app with login and logout endpoints.

---

Week 12: Final Project and Course Wrap-Up

1. Lecture 34: Preparing for the Final Project

   • Planning a full-stack application
   • Setting up the project repository
   • Assignment: Create a project proposal with a clear description, features, and tech stack.

2. Lecture 35: Building the Final Project (Part 1)

   • Backend development
   • Setting up routes and database
   • Assignment: Implement the backend functionality for your project, including CRUD operations.

3. Lecture 36: Building the Final Project (Part 2)

   • Frontend development
   • Integrating frontend with backend
   • Assignment: Complete and deploy your full-stack project. Share the live link and GitHub repository for review.

---

Resources

• VS Code
• GitHub
• HTML Documentation
• CSS Documentation
• JavaScript Documentation
• React Documentation
• Node.js Documentation
• MongoDB Documentation

---

License

This project is licensed under the MIT License. See the LICENSE file for details.