WD Course IN WEB DEVELOPMENT ( S-WD-104 )

Week 1: Web Development Fundamentals

Goal: Understand the basics of web development and create static web pages.

1. HTML Basics:

   • Structure of an HTML document.
   • Common tags (div, p, h1-h6, a, img, ul, ol, table, etc.).
   • Forms and inputs (form, input, textarea, select, button).

2. CSS Basics:

   • Inline, internal, and external CSS.
   • Selectors and properties (color, font, margin, padding, borders).
   • Box model and positioning.

3. Hands-On:

   • Build a static portfolio website.

Week 2: Advanced CSS and Introduction to Bootstrap

Goal: Enhance styling skills and learn responsive design with Bootstrap.

1. Advanced CSS:

   • Flexbox and CSS Grid for layouts.
   • Media queries for responsiveness.
   • Animations and transitions.

2. Bootstrap Basics:

   • Setting up Bootstrap in a project.
   • Grid system and responsive design.
   • Common components (Navbar, Cards, Modals, Alerts).

3. Hands-On:

   • Create a responsive website using Bootstrap and custom CSS.

Week 3: JavaScript Basics with API Calling

Goal: Learn JavaScript to add interactivity to web pages and make API calls.

1. JavaScript Fundamentals:

   • Variables, data types, and operators.
   • Functions, loops, and conditionals.
   • DOM manipulation (selectors, events, modifying elements).

2. ES6+ Features:

   • Arrow functions, template literals.
   • let, const, and destructuring.

3. API Calling:

   • What are APIs and how to interact with them.
   • Fetch API basics.
   • Handling GET and POST requests.
   • Promises and async/await.

4. Hands-On:

   • Build a simple weather app that fetches data from a public API (e.g., OpenWeatherMap).

Week 4: Introduction to MERN - React Basics

Goal: Transition to the MERN stack and learn React.js.

1. Overview of MERN Stack:

   • What is MERN?
   • Benefits and use cases.
   • Setting up the development environment.

2. React Basics:

   • Introduction to React and its ecosystem.
   • Setting up a React app (create-react-app).
   • JSX, components, and props.

3. React State and Events:

   • Managing state with useState.
   • Handling events and forms.

4. Hands-On:

   • Build a basic React app to display a list of items.

Week 5: Backend with Node.js, Express.js, and MongoDB

Goal: Create a server, handle APIs, and integrate MongoDB.

1. Node.js Basics:

   • Setting up Node.js.
   • Introduction to npm and modules.

2. Express.js Fundamentals:

   • Setting up a basic server.
   • Middleware and routing.
   • RESTful APIs.

3. MongoDB Integration:

   • Setting up MongoDB locally or with Atlas.
   • CRUD operations with MongoDB and Mongoose.

4. Hands-On:

   • Create a RESTful API to manage a simple database (e.g., user data).

Week 6: Full Stack Integration

Goal: Connect the frontend (React) with the backend (Node.js + Express) and database (MongoDB).

1. Connecting React with Backend:

   • Fetching data from RESTful APIs using axios or fetch.
   • Handling forms and sending POST requests.

2. Full Stack Project:

   • Combine React, Node.js, Express, and MongoDB.
   • Build a complete full-stack application (e.g., task management app, e-commerce site, etc.).

Here are the key eligibility requirements for starting in web development:

1. Basic Computer Skills: Familiarity with using a computer and internet navigation.
2. Knowledge of Web Basics: Understanding HTML, CSS, and basic JavaScript for web page creation.
3. Problem-Solving Skills: Ability to debug and troubleshoot issues that arise during development.
4. Access to Development Tools: Familiarity with code editors (e.g., Visual Studio Code) and version control systems (e.g., Git/GitHub).