Mentor Innovation Hub

---

Day 1 - Introduction to HTML

• Topic: HTML Basics, Structure, Tags, Elements
• Task: Create a basic HTML page with the following: a header, a paragraph, an image, and a list (ordered and unordered).
• Deliverable: Push the code to GitHub with a descriptive commit message.
• Resources:
  • MDN HTML Documentation
  • W3Schools HTML Tutorial
• GitHub Submission: Submit PR with a basic index.html file.

---

Day 2 - Working with Links, Images, and Lists

• Topic: Links, Images, Lists, and Tables
• Task: Add hyperlinks, images, and a table to your HTML page. Make the table have 3 columns and 4 rows.
• Deliverable: Push your changes to GitHub.
• Resources:
  • MDN Links
  • MDN Images
  • W3Schools HTML Lists
• GitHub Submission: PR with updated index.html and table structure.

---

Day 3 - Forms and Inputs

• Topic: Forms in HTML
• Task: Create a form with different input types (text, password, checkbox, radio button, submit button).
• Deliverable: Push the code to GitHub.
• Resources:
  • MDN Forms
  • W3Schools Forms
• GitHub Submission: PR with an HTML form.

---

Day 4 - Introduction to CSS

• Topic: Introduction to CSS, Selectors, Colors, and Backgrounds
• Task: Style your HTML page with CSS: add colors, background images, and change text properties.
• Deliverable: Push the code to GitHub.
• Resources:
  • MDN CSS Basics
  • W3Schools CSS Tutorial
• GitHub Submission: PR with style.css file.

---

Day 5 - Box Model and Positioning

• Topic: Box Model, Padding, Margin, Border, Positioning
• Task: Create a layout with divs and apply padding, margin, and borders. Experiment with positioning (relative, absolute).
• Deliverable: Push your changes to GitHub.
• Resources:
  • MDN Box Model
  • W3Schools CSS Box Model
• GitHub Submission: PR with layout changes.

---

Day 6 - Flexbox Basics

• Topic: Flexbox Layout
• Task: Build a responsive layout using Flexbox (header, sidebar, content area, footer).
• Deliverable: Push to GitHub.
• Resources:
  • CSS Flexbox - MDN
  • Flexbox Froggy Game
  • W3Schools Flexbox
• GitHub Submission: PR with Flexbox layout.

---

Day 7 - Grid Layout

• Topic: CSS Grid
• Task: Create a grid layout for a portfolio or blog page using CSS Grid.
• Deliverable: Push to GitHub.
• Resources:
  • MDN CSS Grid
  • CSS Grid Tutorial
• GitHub Submission: PR with grid layout.

---

Day 8 - Introduction to JavaScript

• Topic: JavaScript Basics: Variables, Data Types, and Operators
• Task: Write JavaScript to display an alert, and create a simple calculator that adds two numbers.
• Deliverable: Push to GitHub.
• Resources:
  • MDN JavaScript Basics
  • W3Schools JavaScript Tutorial
• GitHub Submission: PR with script.js file for JavaScript code.

---

Day 9 - Functions and Loops

• Topic: JavaScript Functions and Loops
• Task: Write a function that loops through an array of numbers and prints them in the console.
• Deliverable: Push to GitHub.
• Resources:
  • MDN Functions
  • MDN Loops
• GitHub Submission: PR with the function and loop code.

---

Day 10 - DOM Manipulation

• Topic: DOM (Document Object Model)
• Task: Create a simple webpage where JavaScript changes the content of an HTML element on button click.
• Deliverable: Push to GitHub.
• Resources:
  • MDN DOM
  • JavaScript DOM Manipulation
• GitHub Submission: PR with DOM manipulation code.

---

Day 11 - Events and Event Listeners

• Topic: JavaScript Events
• Task: Add event listeners to buttons or form inputs and manipulate elements when the user interacts with them.
• Deliverable: Push to GitHub.
• Resources:
  • MDN Events
  • W3Schools JavaScript Events
• GitHub Submission: PR with JavaScript event listeners.

---

Day 12 - Object-Oriented JavaScript (OOP)

• Topic: Introduction to OOP in JavaScript
• Task: Create a simple JavaScript class to represent a "Person" with properties like name, age, and a method to greet.
• Deliverable: Push to GitHub.
• Resources:
  • MDN Object-Oriented JavaScript
  • W3Schools JavaScript Classes
• GitHub Submission: PR with the OOP code.

---

Day 13 - Introduction to jQuery

• Topic: jQuery Basics
• Task: Install jQuery and use it to manipulate DOM elements and handle events.
• Deliverable: Push to GitHub.
• Resources:
  • jQuery Documentation
  • jQuery Tutorial
• GitHub Submission: PR with jQuery integration.

---

Day 14 - Responsive Web Design

• Topic: Media Queries and Mobile-First Design
• Task: Make your webpage responsive by adding media queries to adjust layout for different screen sizes.
• Deliverable: Push to GitHub.
• Resources:
  • MDN Media Queries
  • W3Schools CSS Media Queries
• GitHub Submission: PR with responsive design changes.

---

Day 15 - Introduction to Bootstrap

• Topic: Using Bootstrap for UI Components
• Task: Integrate Bootstrap into your project to use its grid system and responsive components.
• Deliverable: Push to GitHub.
• Resources:
  • Bootstrap Documentation
  • Bootstrap Grid System
• GitHub Submission: PR with Bootstrap integration.

---

Day 16-30: Building a Complete Project (Internship Phase)

For days 16 to 30, students will work on a full project (like a personal portfolio, blog, or e-commerce mockup). Every day, the students will have specific tasks to accomplish based on the technologies they've learned so far.

---

Internship Tasks Breakdown (Days 16-30)

• Day 16: Plan the project and layout structure.
• Day 17: Set up the project folder and integrate HTML, CSS, and JS.
• Day 18-19: Build header and navigation components.
• Day 20-22: Build main content section and sidebar (if applicable).
• Day 23-24: Implement forms, inputs, and validation.
• Day 25: Make the page mobile responsive with media queries.
• Day 26: Add interactivity with JavaScript (e.g., button actions, modals).
• Day 27-28: Polish UI with advanced CSS (animations, transitions).
• Day 29: Finalize JavaScript and test the page.
• Day 30: Review and submit the final project with a detailed GitHub report.

Resources:

• GitHub Guide for Beginners
• MDN GitHub Pages Tutorial
• JavaScript Design Patterns

---

Internship Reporting (Daily)

Each day, students must:

1. Create a GitHub PR for each task they complete.
2. Write a progress report detailing what they worked on, any challenges, and solutions.
3. Submit daily summaries of what they’ve learned and feedback from mentors.