All Assignments
Complete assignments to reinforce your learning
Enhanced About Me Page
Enhance your 'About Me' page with more content, add at least 10 different HTML elements, and write comments explaining each section.
Resources:
- • MDN HTML Basics
- • VS Code Setup Guide
Travel Destinations Website
Complete a 3-page travel website with 5 destinations, unique images, and navigation links between all pages. Research HTML entities for next week.
Resources:
- • Image Optimization Guide
- • File Path Tutorial
Survey Form with Semantic Structure
Build a comprehensive survey form with 15+ inputs using semantic HTML throughout. Include all input types learned and prepare for CSS week.
Resources:
- • Form Accessibility Guide
- • Semantic HTML Reference
Redesigned About Me Page
Redesign your Week 1 'About Me' page with CSS. Add Google Fonts, proper box model spacing, colors, and make it look professional.
Resources:
- • Google Fonts
- • Box Model Interactive Guide
Team Members Section
Create a team members section with 4-6 cards featuring photos, names, and roles. Implement hover effects, use pseudo elements creatively, and add a fixed header navigation.
Resources:
- • CSS Positioning Guide
- • Pseudo Elements Examples
Flexbox Landing Page
Build a complete landing page using ONLY Flexbox with responsive navigation, hero section, features section (3-4 cards), and footer. Complete all 24 Flexbox Froggy levels.
Resources:
- • Flexbox Froggy Game
- • Flexbox Cheat Sheet
Dashboard Layout
Build a complete dashboard with sidebar navigation, top header, stats cards (using nested grid), main content area, and footer. Make it responsive using auto-fit. Complete all 28 Grid Garden levels.
Resources:
- • Grid Garden Game
- • CSS Grid Guide
Responsive Portfolio Homepage
Complete a responsive portfolio homepage with mobile, tablet, and desktop versions. Include smooth animations, hamburger menu with animation, and at least 3 sections. Research JavaScript basics.
Resources:
- • Responsive Design Patterns
- • Animation Examples
String Manipulator Program
Create a string manipulator console program that takes user input and applies 10+ different string methods. Log formatted results and practice all operators.
Resources:
- • JavaScript Basics MDN
- • String Methods Reference
Interactive Games and Calculators
Build a Magic 8-Ball program, Rock Paper Scissors game vs computer, temperature converter, and age calculator from birth year.
Resources:
- • Math Object Guide
- • Control Flow Tutorial
Task Priority Manager
Create a task priority manager with array of tasks, sort by priority, filter by status, and display formatted list. Build a duplicate remover and array reverser without using .reverse().
Resources:
- • Array Methods Guide
- • Loop Patterns
Text Analyzer Suite
Build a text analyzer with multiple functions: word count, character count, most frequent word, reverse text, and remove punctuation. Create a temperature converter suite and tip calculator with modular functions.
Resources:
- • Functions Deep Dive
- • Closures Explained
Interactive Components
Build an image gallery with thumbnails that change the main image, create an FAQ accordion with toggle functionality, and build a character counter for textarea.
Resources:
- • DOM Manipulation Guide
- • querySelector Tutorial
Enhanced Todo List App
Enhance the Todo App with priority levels (high, medium, low), due dates, categories/tags, search/filter functionality, and sort options. Research Local Storage.
Resources:
- • Event Handling Guide
- • Form Validation Patterns
Weather App with Storage
Complete a weather app that fetches data from API, allows search by city, displays temperature and conditions, saves recent searches, uses async/await, and handles loading and errors. Add localStorage to all previous projects.
Resources:
- • Fetch API Guide
- • Async/Await Tutorial
- • OpenWeatherMap API
Final Portfolio Presentation
Present your complete professional portfolio with homepage, projects page (3+ projects), about page, contact page, responsive design, and clean code. Deploy to GitHub Pages or Netlify.
Resources:
- • Bootstrap Documentation
- • GitHub Pages Guide
- • Portfolio Best Practices