DEV Community

Cover image for Frontend Interview Resources
Ajay kumbhare
Ajay kumbhare

Posted on


Frontend Interview Resources

Preparing for front-end interviews?

I have found some good repositories to prepare for front-end interviews.

GitHub logo thedaviddias / Resources-Front-End-Beginner

💯 The most essential list of resources for Front-End beginners (🇺🇸 🇬🇧 🇨🇦 & 🇫🇷)

The most essential list of resources for Front-End beginners (🇺🇸 🇬🇧 & 🇫🇷)

Join the chat at Contributors CC0

If you want to learn how to become a Front-End developer, you are in the right place!

I will regularly update that list with new resources and links I found on the web. Don't hesitate to participate by sending a PR! Maybe your first on Github :)

I'm using some emoticons to give you more information on these links.

  1. All links without a flag are in English 🇺🇸 🇬🇧. The flag 🇫🇷 means the resource is in French, 🌍 means the resource is multi-language.
  2. 💰 are paid tutorials, 🆓 are free tutorials. Sometimes you will have some free videos / articles and other paid on the same website.
  3. 🔝 indicate that the link is a reference
  4. 📹 is present when video content is available

Table of Contents

  1. Start here
  2. Learn HTML
  3. Learn CSS
  4. Learn

GitHub logo sadanandpai / frontend-learning-kit

Frontend tech guide and curated collection of frontend materials

Frontend Learning Kit

Frontend tech guide and curated collection of frontend materials

Show your support by giving a   to this repo

2022 Frontend Dev Interview checklist & Roadmap

Frontend Role Guide to know about different frontend roles and their criterion

Frontend Interview Guide to know about different frontend interview rounds

Frontend projects for Practice & interviews (beginners to intermediates)

FAQs to clarify common doubts

Frontend resources/materials



Advanced CSS


Advanced JavaScript

GitHub logo thedaviddias / Front-End-Design-Checklist

💎 The Design Checklist for Creative Web Designers and Patient Front-End Developers

Front-End Design Checklist

Front-End Design Checklist

The Design Checklist for Front-End Developers is an exhaustive list of elements which can help developers to analyse and understand web designs and ensure the quality of their Front-End development.

PRs Welcome Join the chat at CC0

Table of Contents

The Design Checklist for Front-End Developers is an exhaustive list of elements which Web Designers and Front-End Developers need to take into consideration to facilitate their collaboration. The following elements are a mix between known practices and new elements based on a long experience analysing web designs.

In case you are looking for a list of all elements…

GitHub logo thedaviddias / Front-End-Checklist

🗂 The perfect Front-End Checklist for modern websites and meticulous developers

Front-End Checklist

  Front-End Checklist  

🚨 Currently working on a V2 of,
feel free to discuss any feature you would like to see in the next version

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

      PRs Welcome           Contributors         Front‑End_Checklist followed         CC0  

  How To UseContributingWebsiteProduct Hunt

Other Checklists:
  🎮 Front-End Performance Checklist💎 Front-End Design Checklist

It is based on Front-End developers' years of experience, with the additions coming from some other open-source checklists.

How to use?

All items in the Front-End Checklist are required for the majority of the projects, but some elements can be omitted or are not essential (in the case of an administration web app, you may not need RSS feed for example). We choose to use 3 levels of flexibility:

  • Low means that the item is recommended but can be…

GitHub logo thedaviddias / Front-End-Performance-Checklist

🎮 The only Front-End Performance Checklist that runs faster than the others

Front-End Performance Checklist

  Front-End Performance Checklist  

🎮 The only Front-End Performance Checklist that runs faster than the others.

One simple rule: "Design and code with performance in mind"

      PRs Welcome         Discord           Licence MIT  

  How To UseContributingProduct Hunt

🇨🇳 🇫🇷 🇰🇷 🇵🇹 🇷🇺 🇯🇵 🇮🇷

Other Checklists:
🗂 Front-End Checklist💎 Front-End Design Checklist


Performance is a huge subject, but it's not always a "back-end" or an "admin" subject: it's a Front-End responsibility too. The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional).

How to use?

For each rule, you will have a paragraph explaining why this rule is important and how you can fix it. For more deep information, you should find links that will point to 🛠 tools, 📖 articles or 📹 medias that can complete the checklist.


GitHub logo yangshun / front-end-interview-handbook

⚡️ Front End interview preparation materials for busy engineers

Front End Interview Handbook

What is this?

Unlike typical software engineer job interviews, front end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas.

While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a software engineer interview. Among the existing resources, probably the most helpful question bank would be Front-end Developer Interview Questions. Unfortunately, I couldn't find many complete and satisfactory answers to these questions online, hence here is my attempt at answering them. Being an open source repository, the project can live on with the support of the community as the state of web evolves.

Why do I want this?

🔍 Front End

GitHub logo andrew--r / frontend-case-studies

💼 A curated list of technical talks and articles about real world enterprise frontend development

If you have any good resources feel free to share I will add them.

P.S. - Read daily/weekly one case study you will learn a lot.
I have created a notion page for resources feel free to bookmark it. I will add more resources and good blogs.

Thanks for reading. Let's connect on Twitter and LinkedIn

Top comments (0)

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.