Create a responsive website layout with a header, footer, and main content area. The layout should change based on the size of the viewport. Use CSS Grid or Flexbox for this task.

The Responsive Layout

Create an interactive form with text inputs, checkboxes, radio buttons, and dropdown menus. Include form validation to ensure that all required fields are filled out and are in the correct format.

The Interactive Form

Create a dynamic table that allows users to add, remove, and edit rows. You can use plain JavaScript or a library/framework like React, Angular, or Vue.js for this task.

The Dynamic Table

Create a single page application with routing. The SPA should have at least three routes and should not require a page refresh to navigate between routes. Use a library/framework like React (with React Router), Angular, or Vue.js (with Vue Router) for this task.

The Single Page Application (SPA)

Create a data visualization using a library like D3.js, Chart.js, or Google Charts. The data visualizer should take in data (you can hard-code the data, fetch it from a static file, or fetch it from an API) and display it in an interactive, easy-to-understand format.

The Data Visualizer

Create a webpage that follows the best practices for web accessibility. The website should be navigable via keyboard only and should be accessible to screen readers. Use a tool like Lighthouse to audit your website for accessibility.

The Accessible Website

Optimize a webpage for performance. The webpage should load quickly, even on slow network connections, and should be optimized for a high Lighthouse performance score. Techniques could include lazy-loading images, code splitting, minimizing and compressing files, caching, etc.

The Performance Optimization

Create a web application that works offline. The app should store data locally and should function even when the network connection is slow or offline. Use a technology like Service Workers or the Cache API for this task.

The Offline-First Web App

Create a web app that fetches data from an API and displays it on the page. The app could display anything from weather data to user profiles to posts on a social media platform.

The API Integration

Create a webpage that showcases different types of animations. You could include CSS transitions and animations, JavaScript animations, SVG animations, and others.

The Animation Showcase

Build a personal portfolio website to showcase your skills, projects, and experience.

Portfolio Website

Create a mock e-commerce website complete with product listings and a shopping cart.

E-commerce Website

An interactive quiz application that tests user knowledge on various topics.

Interactive Quiz Application

A weather dashboard that fetches data from a weather API and displays it.

Weather Dashboard

A system that recommends movies to users based on their preferences.

Frontend Developer

Learning Resources

Interview Prep

Core Concepts

Code Challenges

Projects ideas

Best Practices