Frontend developers build everything users see and touch: layouts, interactions, forms and the experience on every screen size. It suits you if you notice when an app feels clumsy and enjoy seeing your work instantly on screen. Not sure? Take the 2-minute career quiz or compare tracks in the explorer.
HTML & CSS fundamentals
Every framework compiles down to HTML and CSS. Developers who skip this struggle with layout bugs for years.
WHAT TO LEARN
- Semantic HTML elements and document structure
- The box model, Flexbox and CSS Grid
- Responsive design with media queries and relative units
- Forms, inputs and native validation
YOU SHOULD BE ABLE TO DEMONSTRATE
- Rebuild a real landing page from a screenshot, responsive on phone and desktop
- Explain when to use Grid instead of Flexbox
- Build an accessible form without any framework
COMMON MISTAKES
- Using div for everything instead of semantic elements.
- Copying CSS from tutorials without understanding why it works.
FREE RESOURCES
- MDN Web Docs — HTML and CSS learning area
- web.dev Learn CSS — free course by Google
- Flexbox Froggy and Grid Garden — free practice games
JavaScript fundamentals
JavaScript is the language of the browser. Interviews for junior roles test it far more than any framework.
WHAT TO LEARN
- Variables, functions, scope and closures
- Arrays and objects, and methods like map, filter and reduce
- The DOM and events
- Promises, async/await and fetch
YOU SHOULD BE ABLE TO DEMONSTRATE
- Build a to-do app with plain JavaScript that saves to localStorage
- Explain what a closure is with your own example
- Fetch data from a public API and handle loading and error states
COMMON MISTAKES
- Jumping into React before you can manipulate the DOM yourself.
- Ignoring errors in the console instead of reading them.
FREE RESOURCES
- JavaScript.info — free, thorough modern tutorial
- The Odin Project — free full-stack curriculum
- freeCodeCamp JavaScript Algorithms and Data Structures
TypeScript & tooling
Most professional frontend codebases now use TypeScript and a build toolchain. Being comfortable with both makes you productive from week one.
WHAT TO LEARN
- TypeScript types, interfaces and generics basics
- npm, package.json and dependencies
- A bundler or dev server such as Vite
- Linting and formatting with ESLint and Prettier
YOU SHOULD BE ABLE TO DEMONSTRATE
- Convert a small JavaScript project to TypeScript with no any types
- Set up a new project with Vite from scratch
- Explain what a type error is protecting you from
COMMON MISTAKES
- Using any everywhere, which removes the benefit of TypeScript.
- Installing a library for every small task.
FREE RESOURCES
- TypeScript Handbook — official, free
- Vite official guide
- Total TypeScript free tutorials
A framework & state management
Teams build with a framework. Pick one — React has the most jobs worldwide; Angular is common in enterprise and banking — and learn it properly.
WHAT TO LEARN
- Components, props and composition
- State, effects and data flow
- Routing and forms
- Fetching and caching server data
YOU SHOULD BE ABLE TO DEMONSTRATE
- Build a multi-page app with routing and shared state
- Explain why a component re-renders
- Split a large component into smaller reusable ones
COMMON MISTAKES
- Learning React, Vue and Angular at the same time.
- Putting all state in one global store when local state would do.
FREE RESOURCES
- react.dev — official React tutorial
- Angular official tutorials (angular.dev)
- The Odin Project — React course
Accessibility & performance
Accessibility is a legal requirement in many markets and a sign of a careful engineer. Performance directly affects users on slower phones and networks.
WHAT TO LEARN
- Keyboard navigation, labels and ARIA basics
- Colour contrast and readable typography
- Core Web Vitals and Lighthouse
- Image optimisation and lazy loading
YOU SHOULD BE ABLE TO DEMONSTRATE
- Use your app with only a keyboard
- Score 90+ on Lighthouse accessibility for a portfolio project
- Explain one change that made your page load faster
COMMON MISTAKES
- Adding ARIA attributes instead of using the correct native element.
- Shipping huge images straight from a phone camera.
FREE RESOURCES
- web.dev Learn Accessibility
- MDN accessibility guides
- Chrome Lighthouse documentation
Testing & debugging in the browser
Frontend bugs are visible to every user. Teams value juniors who can find the cause quickly and prevent it coming back.
WHAT TO LEARN
- Browser DevTools: elements, console, network, performance
- Unit and component tests with Vitest or Jest and Testing Library
- End-to-end tests with Playwright
- Debugging network and CORS issues
YOU SHOULD BE ABLE TO DEMONSTRATE
- Find a broken API call using the Network tab
- Write component tests for a form's validation
- Write one end-to-end test for a key user flow
COMMON MISTAKES
- Testing implementation details instead of what the user sees.
- Debugging only with console.log.
FREE RESOURCES
- Chrome DevTools documentation
- Testing Library docs
- Playwright official docs
Git, APIs & deployment
A live link is the strongest thing on a frontend CV. You should be able to collaborate in Git and ship your work publicly.
WHAT TO LEARN
- Git branches, pull requests and code review
- Working with REST APIs and authentication tokens
- Environment variables and builds
- Deploying to Vercel, Netlify or GitHub Pages
YOU SHOULD BE ABLE TO DEMONSTRATE
- A live portfolio site with three projects
- A GitHub history with clear commits and a README per project
- Explain how your app talks to its API securely
COMMON MISTAKES
- Projects that only run on localhost.
- Committing API keys to a public repository.
FREE RESOURCES
- Pro Git book — free online
- GitHub Skills — interactive courses
- Vercel and Netlify official deployment guides
Frontend projects for your portfolio
Three projects, each harder than the last. Interviewers would rather see one finished, deployed project you can explain than ten half-done tutorials.
Responsive landing page
1–2 weeksPixel-accurate rebuild of a real design — the goal is clean HTML and CSS.
- Semantic structure and responsive layout
- Works on phone, tablet and desktop
- Accessible navigation and form
- Deployed with a live link
Expense tracker or recipe app
3–5 weeksA real app with state, routing and an API.
- Built with React or Angular and TypeScript
- Add, edit, filter and search data
- Loading, empty and error states
- Component tests and a README with screenshots
E-commerce storefront
6–8 weeksClose to what product teams build every day.
- Product listing, cart and checkout flow
- Authentication and protected pages
- Lighthouse 90+ on performance and accessibility
- End-to-end test for checkout and a public deployment
Interview preparation
Most junior frontend interviews have four parts. Prepare for each separately — candidates often over-prepare algorithms and under-prepare explaining their own project.
| Round | What they check | How to prepare |
|---|---|---|
| Screening / take-home | JavaScript fluency and clean UI code | Build small components under time pressure; keep code readable. |
| Technical interview | JavaScript, CSS layout, how your framework works | Explain closures, the event loop and re-rendering aloud; build a layout live. |
| Portfolio walkthrough | Whether you built and understand your projects | Prepare a 3-minute tour of your best project and its trade-offs. |
| Behavioural | Communication and working with designers | Prepare stories about feedback, a hard bug and a disagreement you resolved. |
Are you ready for entry-level roles?
Tick honestly. If you can do at least 8 of these 10 without looking things up, start applying — you will learn the rest on the job.
Written by Mubashar Hussain · Founder, TechCareerWay
Engineering leader with 20 years building software and hiring developers across 7 countries. Are you a working frontend engineer? Become a technical reviewer for this guide. Spotted an error? Tell us.