Skip to content

Latest commit

 

History

History
207 lines (163 loc) · 8.22 KB

README.md

File metadata and controls

207 lines (163 loc) · 8.22 KB

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)

  3. W3Schools HTML Tutorial

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

  4. HTML Cheat Sheet

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)

  3. CSS-Tricks (Flexbox Guide)

  4. W3Schools CSS Tutorial

  5. CSS Cheat Sheet

Additional Tools for Week 1:

Week 2: Advanced CSS & Intro to JavaScript

Advanced CSS Resources:

  1. CSS-Tricks (Grid Guide)

  2. freeCodeCamp (CSS Grid Tutorial)

  3. MDN Web Docs (CSS Grid)

  4. Flexbox Froggy (Game)

  5. Grid Garden (Game)

JavaScript Resources:

  1. MDN Web Docs (JavaScript Basics)

  2. freeCodeCamp (JavaScript Tutorial)

  3. JavaScript.info

  4. W3Schools JavaScript Tutorial

  5. JavaScript Cheat Sheet

Additional Tools for Week 2:

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.