Frontend Roadmap with links to tutorials, practices and certificates.
Photo by Lautaro Andreani on Unsplash
Ihave gone through many roadmaps online and here is my list to become a frontend engineer as fast as possible. Sit tight and let’s start.
Before we start
Best Websites to learn from:
Youtube: all free.
Udemy: pay for everything, learn better.
Coursera: certified.
Egghead: simple explanation.
Medium: read articles on different topics.
IDE: VSCode
Learning Technique: Pomodoro. You can install the Focus To-Do app on your phone, computer or Chrome as an extension.
HTML and CSS
These are essential technologies for every prospective developer to understand how you can build something using your computer.
General knowledge: HTML in 100 Seconds, CSS in 100 Seconds
Detailed: HTML & CSS Crash Course, HTML Crash Course by Mosh Hamedani
Also, use w3schools.com to read about the common CSS and HTML features.
The most important HTML tags: html, head, body, style, script, link, meta, base, div, h1-h6, p, span, i, b, hr, ul-ol, li, table (thead, tbody etc.), a, button, input (label), form, select (option), textarea, img, video .
Should-be-known tags: iframe, header, main, aside, article, footer, nav, section, hr, br, map, svg, canvas, noscript, strong, audio .
The most important CSS concepts: flex, grid, specificity, box model, margin-padding-border, Responsivity( @media queries), position, display (block, inline, inline-block), advanced selectors (pseudo element, pseudo class etc.), CSS optimizationHave a look at the link for all important concepts.
Warm up your knowledge with games:
Flexbox Froggy
Grid Garden
CSS Diner
CSS Battle
You can also write some responsive components like navigation, dropdown, card, form, circular loader, sidebar etc (Example snippets). Have a look at w3schools exercises
Learn how to write readable code
Towrite readable code, we must follow community best practices. SASS, BEM standard and Bootstrap 5 come to rescue us from writing unreadable code. They are easy to learn and even easier to work with.
“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”
― Martin Fowler
SASS: Sass in 100 seconds, Complete SASS tutorial,
BEM: By using the BEM standard you won't need to use complicated CSS selectors and your code will be faster to run. BEM in 6 mins, You Probably Need BEM CSS in Your Life (Tutorial).
Bootstrap 5: It helps to write components faster and makes them readable. Bootstrap 5 tutorial
Code something
Use one of the 45 Figma Landing Pages and code it using the technologies mentioned above. Figma is a UI designing app and its usage is more common than others.
PS.: Don’t forget to create a Figma account to access the built-in tools. See the image below:
Learn Git
Here you have coded a landing page. So you need to push it to your GitHub account. Create one and choose a distinctive username. Mine is nagibaba .
Git in 100 seconds, Git and GitHub in 12 mins.
Most important git commands: init, add, commit, push, pull, merge, checkout, status, log . These will be enough for a beginner. You can enhance your knowledge later.
Javascript
Weneed to focus on ES6 (ES 2015) for modern React development. In addition to ES6, it is crucial to understand the differences with ES5 (Old Javascript). Most browsers understand ES6. If not, modern development systems automatically compile ES6 and later versions to ES5 using Babel. So we don’t need to get into hassle with that process.
JS in 100 seconds,
Modern Javascript tutorial,
Learn by reading, Javascript.info from basics to advanced (I prefer this).
Javascript from beginner to expert (explains the differences between ES5 and old JS syntax together)
FreeCodeCamp: Basic Javascript, ES6, Functional Programming
Practice by coding online: https://learnjavascript.online/
Important concepts: Event loop (microtask, macrotask, queue, stack, web API), context, arrow function, closure and currying, hoisting, data types, variable types (var, let, const), strict mode, value vs reference, type coercion, DOM manipulation, destructuring and spread operator, call-apply-bind functions, Array manipulation, pure functions, higher-order functions, promises, scope, IIEF, == vs ===, mutability, lazy loading.
Tip: The interviewer will most probably ask about synchronous and asynchronous functions and their order of execution.
console.log(1)
setTimeout(()=>console.log(2), 0)
const promise1 = new Promise((resolve, reject) => {
console.log(3)
resolve(4)
})
promise1.then(res => {
console.log(res)
})
console.log(5)
// 1, 3, 5, 4, 2
Link: Promises
Data Structures
This part is a little hard for beginner-level developers. Just try to understand the concepts. You will comprehend their importance after coming across some real-life examples.
If these seem difficult to you, feel free to jump right into the next section — React JS. But remember to return to this phase afterwards.
Should learn: Array, Linked List, Stack, Queue, Hash Table, Tree.
Tutorials: 8 Common Data Structures, Data Structures you must know, Hackerrank Data Structures, Basic Data Structures, FreeCodeCamp Basic Algorithm Scripting
Algorithms
Focus on easy Array and String algorithms more. Hackerrank algorithms. The more you solve, the better you’ll get.
You can find solutions and tutorials for the specific algorithm on Youtube by searching its name.
React
Install NodeJS to your computer.
Understand how React works, write an app (I will give a hint about that at the end) and prepare for the interviews.
Learn Modern React
Kent C. Dodds's introduction
React in 30 mins
Get certified:
React-101
Meta Front-End Developer Professional Certificate
React Basics Certificate
Important concepts: States and Props, hooks vs LifeCycle Methods, prop drilling, Higher-order Components (HOCs), Virtual DOM (reconciliation), pure components, conditional rendering, JSX, Webpack.
State management: Redux, MobX or Recoil
React uses Context API to share the state between components. But it is the default built-in functionality and not that popular due to its lack of scalability. I have written an article about that.
Redux is more popular and a bit hard to use. It is a library inspired by Flux architecture. I prefer Recoil. Choose one and learn its depths.
Those tools also need asynchronous functions to make server requests and share them between components. I have used Redux with Saga, but now I use Recoil with React-Query most of the time.
You should learn Redux to get more chances to pass the interview.
Popularity graph
Tutorials:
Redux: Redux in 100 seconds, Redux from scratch
Recoil: In 10 mins, in 2 minutes.
MobX: Search Youtube.
Testing
Wetest our components and functions in case they might break with changes done in the future. Components are tested directly by unit tests and their communication by integration tests.
Tutorial: React testing library
UI
Choose one: Tailwind, Styled Components or MaterialUI are the most popular ones. I prefer Tailwind.
If you have already learned Bootstrap, you’ll easily adapt to Tailwind.
Backend mock.
Choose one: JSON Placeholder and Connect API Mocker are for creating mock (fake) API endpoints.
Firebase and NodeJS are also useful if you want real data or a WebSocket connection.
Typescript
Asa junior dev, you won’t need to learn the depths. If you gain some general knowledge, you’ll have more chances to land the first development job.
Tutorials: General knowledge, React Typescript
Write an app
This part is the most important one. You can choose to create a blog, to-do, personal website or any of your idea. It should be small and easy to write.
Tech stack I recommend using (from easier to more advanced):
React Query, Recoil, normal CSS, Axios, React Hook Form, JSON placeholder.
React Router, Redux, Redux-Saga, SASS or Tailwind, Connect API Mocker.
Typescript, React Query, Styled Components or MaterialUI, Firebase.
Interview Preparation
Prepare as much as you can. As I stated before, the more you learn, the more chance you’ll have to pass the exam.
It is a general practice in front-end interviews to ask for pure Javascript features and easy algorithms.
So try to focus on Javascript.
Frontend Interview Handbook (Trivia)
ReactJS interview questions
Important JS concepts
Javascript.info
Javascript Visualizer
Practice:
Dev.to preparation Materials
Hooks cheatsheet
Also, prepare an introduction about yourself before the interview.
Use Google a lot
You can find almost everything needed for the interviews. Enhance your searching abilities.
“How … works”, “How to prepare for …”.
Tips, Cheatsheet, tricks: “git cheatsheet”, “Interview tips for JS”, “CV tricks” etc.
“Top [react, javascript, HTML etc.] interview questions”.
“What is …”.
“Best practice for …”.
If there is any bug or error you can’t solve on your own (Which is a great possibility), copy+paste it on Google and find the best answer on StackOverflow
Create a competitive CV
The first impression is the most important part of an interview. There will be thousands of applications for a junior role, so become more visible by following the best practices.
In this link, there are sample resumes of employees that got hired by top companies.
Conclusion
Asa junior developer, the hardest part of the business is finding the first job. What can be done?
Participate in freelance projects.
Apply for intern positions.
Enhance your professional connections.
Open a Linkedin account.
Prepare for the interviews.
Create a cover letter.
Support open-source projects.
Get certificates.
Read Medium articles daily
Search Google a lot for tips. “How to land the first dev job”, “How to prepare for the interview”, “How to find frontend intern job” etc.
I wish this article will be helpful.
Top comments (0)