Frontend Internship Outline 2025 cohort 1

(HTML, CSS, JavaScript Fundamentals + Projects)

---

Week 1: HTML & CSS Foundations

Goal: Build static web pages with structured content and basic styling.
Daily Lessons & Tasks:

1. Lesson 1: HTML Basics
   • Tags, elements, attributes, semantic HTML (<header>, <section>, <form>).
   • Task: Create a static "About Me" page with headings, paragraphs, images, and lists.
2. Lesson 2: CSS Basics
   • Selectors, box model, colors, fonts, margins/padding.
   • Task: Style the "About Me" page with custom fonts, background colors, and spacing.
3. Lesson 3: Layouts with Flexbox
   • Flexbox properties (flex-direction, justify-content, align-items).
   • Task: Build a responsive navigation bar and a 3-column layout using Flexbox.
4. Group Project:
   • Task: Landing Page for a Café (2 groups).
     • Combine HTML/CSS to create a hero section, menu grid, and contact form.

---

Week 2: Advanced CSS & Intro to JavaScript

Goal: Master layouts (Grid) and add interactivity with JavaScript.
Daily Lessons & Tasks:

1. Lesson 4: CSS Grid
   • Grid template areas, columns, rows.
   • Task: Rebuild the café landing page’s menu section using Grid.
2. Lesson 5: JavaScript Basics
   • Variables, data types, conditionals, loops.
   • Task: Create a "Tip Calculator" (takes bill amount, calculates tip).
3. Lesson 6: DOM Manipulation
   • querySelector, addEventListener, innerHTML.
   • Task: Build a "Light/Dark Mode Toggle" for the café landing page.
4. Group Project:
   • Task: Interactive Dashboard (2 groups).
     • Use Grid/Flexbox for layout + JavaScript to toggle data displays.

---

Week 3: JavaScript Deep Dive

Goal: Build dynamic apps with DOM manipulation and events.
Daily Lessons & Tasks:

1. Lesson 7: Functions & Arrays
   • Arrow functions, array methods (map, filter).
   • Task: Create a "Todo List" (add/remove tasks).
2. Lesson 8: Event Handling
   • Forms, input validation, preventing defaults.
   • Task: Add a "Add to Cart" feature for a mock product page.
3. Lesson 9: Local Storage
   • Save/retrieve data from localStorage.
   • Task: Persist Todo List tasks using local storage.
4. Group Project:
   • Task: Quiz App (2 groups).
     • Multiple-choice questions, score tracking, and a results page.

---

Week 4: Final Individual Project

Goal: Build a portfolio-worthy project from scratch.
Structure:

1. Day 1-2: Planning & Setup
   • Choose a project (e.g., portfolio site, e-commerce product page, weather app).
   • Draft wireframes and write pseudocode.
2. Day 3-4: Development
   • Code the project using HTML, CSS, and JavaScript.
3. Day 5: Review & Presentation
   • Demo the project to the group.
   • Submit code (GitHub/GitLab) and write a brief README.

Example Final Projects:

• Personal Portfolio (with projects section, contact form).
• Recipe Finder (search recipes via API).
• Pomodoro Timer with sound alerts.

---

Resources

1. HTML: https://www.w3schools.com/html/default.asp
2. CSS: https://www.w3schools.com/css/default.asp
3. JS: https://www.w3schools.com/js/default.asp
4. Install Notepad++: https://notepad-plus-plus.org/downloads/v8.7.7/
5. Install Vscode: https://code.visualstudio.com/
6. Download Chrome: https://www.google.com/intl/en_uk/chrome/

Resoruces Extensive list

Week 1: HTML & CSS Foundations

HTML Resources:

1. MDN Web Docs (HTML Basics)

   • HTML Introduction
   • Covers tags, elements, attributes, and semantic HTML.
   • Why: Official documentation with clear examples.

2. freeCodeCamp (HTML Tutorial)

   • Responsive Web Design Certification (HTML Section)
   • Why: Interactive exercises to practice HTML.

3. W3Schools HTML Tutorial

   • W3Schools HTML
   • Why: Simple, beginner-friendly explanations with "Try It Yourself" examples.

4. HTML Cheat Sheet

   • HTML Cheat Sheet
   • Why: Quick reference for common HTML tags.

---

CSS Resources:

1. MDN Web Docs (CSS Basics)

   • CSS First Steps
   • Covers selectors, box model, and basic styling.
   • Why: Comprehensive and beginner-friendly.

2. freeCodeCamp (CSS Tutorial)

   • Responsive Web Design Certification (CSS Section)
   • Why: Hands-on practice with CSS.

3. CSS-Tricks (Flexbox Guide)

   • A Complete Guide to Flexbox
   • Why: Visual explanations of Flexbox properties.

4. W3Schools CSS Tutorial

   • W3Schools CSS
   • Why: Easy-to-follow tutorials with examples.

5. CSS Cheat Sheet

   • CSS Cheat Sheet
   • Why: Quick reference for common CSS properties.

---

Additional Tools for Week 1:

• CodePen: https://codepen.io/
  • Why: Great for experimenting with HTML/CSS in real-time.
• Google Fonts: https://fonts.google.com/
  • Why: Easy way to add custom fonts to projects.
• Color Hunt: https://colorhunt.co/
  • Why: Helps interns pick modern color palettes for their projects.

---

Week 2: Advanced CSS & Intro to JavaScript

Advanced CSS Resources:

1. CSS-Tricks (Grid Guide)

   • A Complete Guide to Grid
   • Why: Detailed visual guide to CSS Grid.

2. freeCodeCamp (CSS Grid Tutorial)

   • Learn CSS Grid
   • Why: Quick and practical introduction to Grid.

3. MDN Web Docs (CSS Grid)

   • CSS Grid Layout
   • Why: Official documentation with examples.

4. Flexbox Froggy (Game)

   • Flexbox Froggy
   • Why: Fun way to practice Flexbox.

5. Grid Garden (Game)

   • Grid Garden
   • Why: Interactive game to learn CSS Grid.

---

JavaScript Resources:

1. MDN Web Docs (JavaScript Basics)

   • JavaScript First Steps
   • Why: Covers variables, data types, and basic syntax.

2. freeCodeCamp (JavaScript Tutorial)

   • JavaScript Algorithms and Data Structures
   • Why: Interactive exercises to practice JavaScript.

3. JavaScript.info

   • The Modern JavaScript Tutorial
   • Why: Beginner-friendly and comprehensive.

4. W3Schools JavaScript Tutorial

   • W3Schools JavaScript
   • Why: Simple explanations with examples.

5. JavaScript Cheat Sheet

   • JavaScript Cheat Sheet
   • Why: Quick reference for JavaScript syntax.

---

Additional Tools for Week 2:

• CodeSandbox: https://codesandbox.io/
  • Why: Great for building and sharing JavaScript projects.
• Chrome DevTools: Chrome DevTools Guide
  • Why: Teach interns how to debug HTML/CSS/JavaScript in the browser.
• Can I Use: https://caniuse.com/
  • Why: Check browser compatibility for CSS/JavaScript features.

---

Weekly Resource Recap:

• Week 1: Focus on HTML/CSS basics with MDN, freeCodeCamp, and W3Schools. Use CodePen for practice.
• Week 2: Dive into CSS Grid, Flexbox, and JavaScript basics with MDN, freeCodeCamp, and JavaScript.info. Use CodeSandbox for JavaScript projects.