InternshipAll 60 tasks, level by level
The real graded Frontend Development tasks the portal assigns, grouped into three levels.
The portal assigns these Frontend Development tasks. Finish Level 1 before Level 2 and Level 2 before Level 3. Your mentor may mark some tasks as required for the certificate.
Level 1: Foundations (24 tasks)
| Task | What to do |
|---|---|
| How the web loads a page | Open DevTools on any site, record the Network tab and explain DNS, the HTML request, CSS/JS/image requests and the final render in a README with screenshots. |
| Semantic HTML profile page | Build a personal profile page using header, nav, main, section, article and footer. Validate it with the W3C validator and commit the clean report. |
| Accessible form | Build a registration form with labels, fieldsets, required fields and helpful error text. Check it with keyboard only and with a screen-reader extension and note what you fixed. |
| CSS box model and selectors | Make a page that shows margin, border, padding and content visually, plus examples of class, id, attribute, child and pseudo-class selectors. |
| Flexbox navigation bar | Build a responsive navbar with Flexbox that collapses into a menu button under 600px. Commit before/after screenshots. |
| CSS Grid gallery | Create an image gallery with CSS Grid that shows 1, 2 and 4 columns at different widths without media-query hacks (use auto-fit/minmax). |
| JavaScript DOM basics | Write a to-do list in plain JavaScript: add, complete, delete and filter items, with no libraries. |
| Save state in localStorage | Extend the to-do list so items survive a refresh using localStorage, with try/catch around every read and write. |
| Fetch data from a public API | Show data from a free public API (weather, countries or books) with loading, error and empty states. |
| Git workflow for frontend | Create a repo frontend-internship, work on a feature branch, open a pull request to yourself and merge it. Paste the PR link in your README. |
| Responsive typography and units | Explain px, em, rem, %, vw and clamp() with a demo page whose headings scale smoothly from phone to desktop. |
| Deploy a static site | Deploy one of your pages to GitHub Pages, Netlify or Firebase Hosting and add the live link to your README. |
| Browser DevTools deep dive | Use the Elements, Console, Network, Sources and Application panels to debug a page. Write one tip per panel with a screenshot. |
| CSS specificity game | Create 10 conflicting CSS rules and predict which wins before checking in DevTools. Record your score and explain each. |
| Responsive images | Use srcset, sizes and the picture element to serve different images for phone and desktop. Measure bytes saved. |
| Web fonts done right | Add a Google Font with font-display: swap and preconnect, and explain how it affects loading. |
| CSS animations | Build a loading spinner and a card hover effect with transitions and keyframes, and respect prefers-reduced-motion. |
| Forms with native validation | Use required, pattern, min, max and type attributes plus the Constraint Validation API for custom messages. |
| JavaScript array methods | Solve 10 small data problems using map, filter, reduce, find, some and every. |
| Event handling | Build a keyboard-shortcut menu using keydown events and explain event bubbling and preventDefault. |
| Modules in the browser | Split a script into ES modules with import/export and load them with type=module. |
| Clone a landing page layout | Recreate the layout (not the brand) of a well-designed landing page using only HTML and CSS. |
| SVG icons | Create and style inline SVG icons that change colour with currentColor. |
| Cross-browser check | Test your site in Chrome, Firefox and a mobile browser and fix one difference you find. |
Level 2: Building real features (20 tasks)
| Task | What to do |
|---|---|
| React component basics | Rebuild the to-do list in React with components, props and useState. Explain why each piece is its own component. |
| Routing in a single-page app | Add three routes (home, list, about) with React Router or the framework router, including a 404 page. |
| Forms and validation in React | Build a controlled form with validation messages, disabled submit while invalid and a success screen. |
| Fetching with loading and caching | Load paginated API data in React, show a skeleton while loading and avoid refetching pages already loaded. |
| TypeScript for components | Convert your React app to TypeScript with typed props, state and API responses. Fix every type error without using any. |
| Component styling approach | Style the app with CSS Modules or Tailwind. Write half a page comparing it with plain global CSS. |
| Unit tests for components | Write at least 6 tests with Vitest or Jest and Testing Library covering rendering, clicks and form errors. |
| Lighthouse audit and fixes | Run Lighthouse on your deployed app, fix at least three issues (images, contrast, unused JS) and commit the before/after scores. |
| Dark mode with CSS variables | Add light and dark themes using CSS custom properties and prefers-color-scheme, with a toggle that is remembered. |
| Build tool basics | Set up a project with Vite, explain dev server vs production build, and show the size of your production bundle. |
| Custom React hooks | Write useFetch, useLocalStorage and useDebounce hooks and use them in an app. |
| Search with debounce | Build a search box that calls an API only after the user stops typing, with cancellation of old requests. |
| Infinite scroll | Load more items as the user scrolls using IntersectionObserver. |
| Optimistic UI | Update the UI immediately when a user likes an item and roll back if the request fails. |
| Form library | Rebuild a complex form with React Hook Form and schema validation (zod or yup). |
| Data fetching library | Use TanStack Query (or SWR) for caching, refetching and loading states, and compare with your manual code. |
| Charts in the frontend | Show a dashboard chart with a charting library, with accessible labels and a data table fallback. |
| Modal and focus trap | Build an accessible modal dialog that traps focus, closes on Escape and returns focus to the trigger. |
| Progressive Web App | Add a manifest and service worker so your app is installable and works offline for cached pages. |
| Environment configuration | Use environment variables for API URLs in development and production builds. |
Level 3: Professional work and capstone (16 tasks)
| Task | What to do |
|---|---|
| State management for a larger app | Build a small shop (products, cart, checkout summary) using React context or a state library. Explain how data flows. |
| Performance: code splitting | Lazy-load at least two routes, measure the first-load JS before and after, and write up the result. |
| Accessibility audit | Audit your shop with axe DevTools and keyboard testing. Fix every serious issue and document each fix with a short note. |
| End-to-end test | Write a Playwright or Cypress test that adds an item to the cart and completes checkout. |
| Reusable component library | Extract Button, Input, Modal and Card into a small library folder with props documented in a README or Storybook. |
| Internationalisation | Add English and one Indian language to your app with a language switcher and no hard-coded strings left. |
| Security basics for the browser | Show an XSS risk with innerHTML, then fix it. Add a Content-Security-Policy header to your deployed site and explain it. |
| Capstone: production frontend | Ship a complete, responsive, tested and deployed frontend project of your choice. Include a README with features, screenshots, tests and Lighthouse scores. |
Next.js app | Build a small Next.js app with server-rendered pages, dynamic routes and metadata for SEO. |
| Rendering strategies | Compare client-side rendering, server-side rendering and static generation with measurements on the same page. |
| Web Vitals monitoring | Measure LCP, INP and CLS of your deployed app with the web-vitals library and log them. |
| Micro-interactions and polish | Add skeleton loaders, empty states, error states and toasts across your app. |
| Real-time UI | Show live updates from a WebSocket or Firebase listener in the UI. |
| Design system tokens | Define colour, spacing and typography tokens and apply them across all components. |
| Frontend code review | Review a classmate's frontend pull request for accessibility, performance and readability and write comments. |
| Capstone 2: real client-style site | Build a complete, responsive website for a local business (with their permission or a fictional one) with a contact form, SEO tags, analytics and a Lighthouse score above 90. |