Training Trains logo

Frontend Development Internship

Build fast, accessible, responsive websites and web apps: HTML, CSS, JavaScript, React and TypeScript, tested and deployed like a professional frontend team.

HTML & CSSJavaScriptReactTypeScriptViteLighthouse

What you'll work on

Full syllabus: all 60 graded tasks

These are the actual tasks the internship portal assigns for this domain. You submit each one with proof (a GitHub link or document) and a mentor reviews it.

Level 1: Foundations (24 tasks)
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Flexbox navigation bar. Build a responsive navbar with Flexbox that collapses into a menu button under 600px. Commit before/after screenshots.
  6. 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).
  7. JavaScript DOM basics. Write a to-do list in plain JavaScript: add, complete, delete and filter items, with no libraries.
  8. Save state in localStorage. Extend the to-do list so items survive a refresh using localStorage, with try/catch around every read and write.
  9. Fetch data from a public API. Show data from a free public API (weather, countries or books) with loading, error and empty states.
  10. 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.
  11. Responsive typography and units. Explain px, em, rem, %, vw and clamp() with a demo page whose headings scale smoothly from phone to desktop.
  12. Deploy a static site. Deploy one of your pages to GitHub Pages, Netlify or Firebase Hosting and add the live link to your README.
  13. 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.
  14. CSS specificity game. Create 10 conflicting CSS rules and predict which wins before checking in DevTools. Record your score and explain each.
  15. Responsive images. Use srcset, sizes and the picture element to serve different images for phone and desktop. Measure bytes saved.
  16. Web fonts done right. Add a Google Font with font-display: swap and preconnect, and explain how it affects loading.
  17. CSS animations. Build a loading spinner and a card hover effect with transitions and keyframes, and respect prefers-reduced-motion.
  18. Forms with native validation. Use required, pattern, min, max and type attributes plus the Constraint Validation API for custom messages.
  19. JavaScript array methods. Solve 10 small data problems using map, filter, reduce, find, some and every.
  20. Event handling. Build a keyboard-shortcut menu using keydown events and explain event bubbling and preventDefault.
  21. Modules in the browser. Split a script into ES modules with import/export and load them with type=module.
  22. Clone a landing page layout. Recreate the layout (not the brand) of a well-designed landing page using only HTML and CSS.
  23. SVG icons. Create and style inline SVG icons that change colour with currentColor.
  24. 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)
  1. React component basics. Rebuild the to-do list in React with components, props and useState. Explain why each piece is its own component.
  2. Routing in a single-page app. Add three routes (home, list, about) with React Router or the framework router, including a 404 page.
  3. Forms and validation in React. Build a controlled form with validation messages, disabled submit while invalid and a success screen.
  4. Fetching with loading and caching. Load paginated API data in React, show a skeleton while loading and avoid refetching pages already loaded.
  5. TypeScript for components. Convert your React app to TypeScript with typed props, state and API responses. Fix every type error without using any.
  6. Component styling approach. Style the app with CSS Modules or Tailwind. Write half a page comparing it with plain global CSS.
  7. Unit tests for components. Write at least 6 tests with Vitest or Jest and Testing Library covering rendering, clicks and form errors.
  8. 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.
  9. Dark mode with CSS variables. Add light and dark themes using CSS custom properties and prefers-color-scheme, with a toggle that is remembered.
  10. Build tool basics. Set up a project with Vite, explain dev server vs production build, and show the size of your production bundle.
  11. Custom React hooks. Write useFetch, useLocalStorage and useDebounce hooks and use them in an app.
  12. Search with debounce. Build a search box that calls an API only after the user stops typing, with cancellation of old requests.
  13. Infinite scroll. Load more items as the user scrolls using IntersectionObserver.
  14. Optimistic UI. Update the UI immediately when a user likes an item and roll back if the request fails.
  15. Form library. Rebuild a complex form with React Hook Form and schema validation (zod or yup).
  16. Data fetching library. Use TanStack Query (or SWR) for caching, refetching and loading states, and compare with your manual code.
  17. Charts in the frontend. Show a dashboard chart with a charting library, with accessible labels and a data table fallback.
  18. Modal and focus trap. Build an accessible modal dialog that traps focus, closes on Escape and returns focus to the trigger.
  19. Progressive Web App. Add a manifest and service worker so your app is installable and works offline for cached pages.
  20. Environment configuration. Use environment variables for API URLs in development and production builds.
Level 3: Professional work and capstone (16 tasks)
  1. 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.
  2. Performance: code splitting. Lazy-load at least two routes, measure the first-load JS before and after, and write up the result.
  3. Accessibility audit. Audit your shop with axe DevTools and keyboard testing. Fix every serious issue and document each fix with a short note.
  4. End-to-end test. Write a Playwright or Cypress test that adds an item to the cart and completes checkout.
  5. Reusable component library. Extract Button, Input, Modal and Card into a small library folder with props documented in a README or Storybook.
  6. Internationalisation. Add English and one Indian language to your app with a language switcher and no hard-coded strings left.
  7. 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.
  8. 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.
  9. Next.js app. Build a small Next.js app with server-rendered pages, dynamic routes and metadata for SEO.
  10. Rendering strategies. Compare client-side rendering, server-side rendering and static generation with measurements on the same page.
  11. Web Vitals monitoring. Measure LCP, INP and CLS of your deployed app with the web-vitals library and log them.
  12. Micro-interactions and polish. Add skeleton loaders, empty states, error states and toasts across your app.
  13. Real-time UI. Show live updates from a WebSocket or Firebase listener in the UI.
  14. Design system tokens. Define colour, spacing and typography tokens and apply them across all components.
  15. Frontend code review. Review a classmate's frontend pull request for accessibility, performance and readability and write comments.
  16. 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.

Real software work, not just training

Every Frontend Development task is reviewed by our team and saved to your portfolio. Interns who pass the readiness check can take real work from Training Trains, W3AppDevelopers and DomainHostly projects on the Company Work board.

Full Stack Web Application Development
See the software we build →

Frequently asked questions

Do I need experience to join the Frontend Development internship?+

No experience is needed for level 1. You should be comfortable using a computer and willing to practise daily.

What will I do in the Frontend Development internship?+

You complete 60 graded tasks in three levels: foundations, real features, and professional work. Each task is submitted with GitHub or document proof and reviewed. The final capstone is: Capstone 2: real client-style site.

Do I get a certificate for the Frontend Development internship?+

Yes. After your required tasks are approved, your attendance is above 75% and you pass the proctored final exam, you get a graded completion certificate that anyone can verify at trainingtrains.com/verify.

Can I do the Frontend Development internship online?+

Yes. You can do it fully online from home, or offline at our Erode and Perundurai branches. Tasks, quizzes and mentor reviews are the same in both modes.

Available both online (work from home) and offline at our Erode and Perundurai branches - see the full internship program details for departments, duration, and the application process.

Apply for the Frontend Development internship