checklists.oneSign in
‹ Study plans

Steps to become a frontend developer

HTML, CSS, JavaScript and React in order, using free docs, with something you can show after every stage.

26 items · 6 sections · study, career, programming, react

Start this checklist

HTML and CSS (6)

  • Follow the free MDN web development courseUse it as your main path for the early stages.Open
  • Semantic HTML: headings, lists, forms, buttonsOpen
  • The box model, and how margin differs from paddingOpen
  • Flexbox and gridOpen
  • Responsive layout that works at 360 px and 1280 pxOpen
  • Build a one-page site for someone you know, and publish it

JavaScript (5)

  • Variables, functions, arrays and objectsOpen
  • Change the page: select elements, handle clicks
  • Fetch data from an API with async and awaitOpen
  • Handle loading and error states
  • Build a small app, such as a to-do list or a weather lookup

Tools (3)

  • Git: commit, branch, merge, and push to GitHubOpen
  • Use the browser dev tools to debug a layout and a network callOpen
  • Use npm and a build tool such as ViteOpen

React (5)

  • Components, props and stateOpen
  • Lists, forms and effects
  • Routing between pages
  • Add TypeScript basics to one componentOpen
  • Write one test for a component

Quality (3)

  • Accessibility: keyboard use, labels, colour contrastWCAG asks for at least 4.5:1 contrast on normal text.Open
  • Run Lighthouse and fix the top two problemsOpen
  • Compress images and load only what the page needs

Portfolio and job hunt (4)

  • Publish 3 projects with live links and a short README
  • Practise building a small component while talking through it
  • Revise JavaScript basics: closures, this, the event loop
  • Tailor your resume and apply each week

Written from developer.mozilla.org

Similar