/frontend-kit

Guide for all budding front-end web devs. Feel free to start a PR to add anything you want to.

Your frontend screening tests will have more or less 3 kinds of rounds - (i) a pure Javascript round where you'll be asked all sorts of questions on JS, from basic syntax to how JS works internally to solving algorithmic problems in JS, (ii) a React round where you'll be asked how React works and asked to build a simple application in front of your interviewer and (iii) a take-home exercise where you'll be asked to build applications in React JS/React Native.

Javascript

  1. Learn JS syntax.

  2. Learn how JS works internally. Start with this video by Fireship. Then watch this playlist by Akshay Saini, which is one of the best resources I have come across so far. Take notes while watching to revise later. Now that you are familiar with concepts like execution context, synchronicity, scope, etc., research more about these topics. Read articles by experienced developers and the MDN docs. You may even want to read the You Don't Know Javascript series by Kyle Simpson.

  3. Do projects with vanilla JS. It is okay to follow YouTube tutorials for your first couple(ok, maybe three) of JS projects. But, don't get stuck in the tutorial hell. You should be doing projects completely on your own and only watching YT/Udemy videos to clear your concepts or learning about new libraries/frameworks.

  4. Once you have a couple of decent projects in vanilla JS which you built completely on your own, it is time to move to React.

React

  1. Would definitely recommend the Zero to Mastery course on React on Udemy.

  2. Once you have learnt React and maybe done a couple of projects watching YT/Udemy tutorials, it is time to start building apps on your own.

  3. Participate in hackathons so that you develop the ability to convert your ideas into fully functional web apps with a decent UI. Again, if you are stuck in tutorial hell, you will NOT be able to make heads or tails out of your take-home coding exercise.

  4. Now, you are finally ready to take on any front-end interview.

Some projects you should definitely do on your own to improve your skills

  • A simple CRUD app in React
  • News website
  • E-commerce site with shopping cart and login/logout functionality.
  • Blogging site
  • Choose an UI design from https://www.figma.com/community and try to replicate it using CSS. Your first design will take a long time. Stick with it till it is finished, even if it takes a month. You may even want to learn Material UI on the way too.
  • Video chat application with WebRTC
  • Text messaging application with Firebase backend.
  • Image carousel in React