With so many languages, frameworks, and libraries to choose from, often beginners find themselves scratching their heads on how to start off their development journey. This article aims to demystify the process and provide you the perfect roadmap to becoming the Amazing Front End Developer.
Let's get started...
Good to Know Stuff
These skills are not necessary, but they definitely will help you on your journey.
- How does the Internet work?
- What is HTTP?
- How do Browsers work?
Basics
Now let's start off with the basics.
-
HTML
HTML is the foundation of Front End Web Development. One thing I notice is beginners trying to learn all HTML tags; you DON'T need to know all tags, for now, just the following would do:- HTML document structure
- Basic tags such as
html
,head
,title
,body
,form
,input
,p
,h(1-6)
, etc. would suffice for now.
-
CSS
Once you learn HTML, you will be able to create a website, but it will definitely look unprofessional. Now it's time to add life to it using CSS. For starters, you could focus on only the basics:-
Basic CSS Selectors
Selecting an element is the stepping stone to get started with CSS.
html {} /* tag selector */ .class {} /* class selector */ #id {} /* id selector */
-
Box Model
CSS uses the Box Model to organize the different sections of all elements. Positioning & other basic properties
Positioning helps to position elements and even take out elements from the flow of the website. Some other basic properties you should learn arecolor
,background-color
, and of course the properties making up the Box Model.
-
-
JavaScript
Of course, you would like to make your website interactive as well. JavaScript is the tool you need. The things you need to know for now are:-
Basic Programming using JavaScript
JavaScript might be a bit intimidating (at least it definitely was for me) due to its asynchronous nature. You need to develop a feel for how the code is executed as unlike synchronous languages the code that appears first might not be executed first.
// example setTimeout(() => console.log("EXECUTED LAST"), 0) console.log("EXECUTED FIRST")
-
Creating and Disposing Event Listeners
Creating Event Listeners allows you to trigger a callback when an event occurs.
function fn() {} // Creation element.addEventListener("<event-name>", fn) // Removal element.removeEventListener("<event-name>", fn)
DOM Manipulation
To bring interactivity to your website, DOM Manipulation is the most important skill. Paired up with Event Listeners, it allows you to modify any part of the website when an event occurs.
-
Intermediate
Completing the Basics was a feat in itself. CONGRATULATION! You are no longer a beginner. Now you have the skills necessary to learn intermediate stuff.
-
HTML
Didn't we just cover this in the Basics section? Yes and No. We covered just the basics of HTML, there is far more advanced stuff that can help you in development.-
Semantic HTML
At first, you might think that using a
div
everywhere is a good idea, but it can significantly downplay your ranking on Search Engines. You should learn the basic Semantic Tags:-
section
: Thesection
tag is used to group the content into different sections. -
header
: Theheader
tag is used to define the header for a document -
nav
: Thenav
element defines a set of navigation links. -
footer
: Just like theheader
,footer
tag is used to define the footer for a document -
aside
: Theaside
element defines some content aside from the main content (placed in a sidebar). -
main
: Themain
element specifies the main content of the document
-
-
Meta tag
The Meta tag allows you to inject additional information into your website:
-
Semantic HTML
At first, you might think that using a
-
CSS
Now it's time for a bit more advanced CSS
- Media Queries It is not possible to know the device a user would use to access your website. Media Queries allow you to define how your website looks and feels on any device.
-
More CSS properties
You would be able to understand a bit more advanced properties at this point in time. Looking intovariables
,clip-path
,text-ellipsis
and others.You can look into this article for more on these topics
Advanced CSS Selectors
CSS allows you to be highly granular with your selection. This is a topic worth looking into if you have deeply nested websites. For exampleinput[type=text].invalid
selects only thetext
inputs that have an associated invalid class.
-
Javascript
It's finally time for you to learn a framework
You might be at a loss since there are so many frameworks to choose from. Don't sweat it, just choose anyone, although it's recommended you use React, Vue or Angular as due to their popularity if you face any issue, you would be able to find the solution on Stack Overflow with ease. The key things to learn are:
- The basics of the framework (quite evidently)
- State Management
- Routing -
Git
Whenever you work on a large project, maintaining different versions of the application is a cumbersome task. We are lucky to have software like
Git
to sort it out for us.To learn
Git
you can refer to this article -
REST API
When you are working on any real-world application, you would require data from other servers, APIs provide end-points to share data between your application and the various services hosted on the web.
That's all we have for the Intermediate section. Phew!
But we still have the Advanced section to cover π
Advanced
Now we are at the last leg of our journey.
-
PWA
PWA (Progressive Web Apps) are Web Applications supercharged with additional capabilities like being installable (like any native application), caching, background-synchronization and much more.
For more on PWA checkout this article.
-
GraphQL
GraphQL is an alternative for REST APIs developed by Facebook for applications that require huge number of requests. It reduces the number of requests by specifically mentioning the data you need within the request.
GraphQL operates using POST request through a REST API, so strong knowledge of REST APIs definitely helps.
-
Cross-Platform Applications with Web Technology
With the advent of frameworks like Tauri and Electron.js you can now convert your website into Cross-Platform Applications with little effort. This is not for everyone as all Web Developers don't find it appealing developing Native Applications, but some are crazy about it.
Currently, Electron.js is the De Facto standard with the development of some huge applications like WhatsApp Desktop and VS Code, but in my opinion, Tauri (the new kid in town) will soon overtake Electron.js because it's far more optimized.
For more on Electron.js check out this article.
Wrapping Up
There you have it, a Roadmap to help you become an Amazing Front End Developer. Hope it helps you in your journey and you become an Amazing Front End Developer :)
Did I miss something? Share your thoughts in the comments below π
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Thanks for reading
Want to work together? Contact me on Upwork
Want to see what I am working on? Check out my GitHub
I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram
Follow my blogs for weekly new tidbits on Dev
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.Would you like to collaborate on our site?
As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.
Connect to me on
Top comments (27)
Would have loved to see svelte on the list of Frontend frameworks, as it was the most beloved framework in the 2021 stack overflow developer survey. (insights.stackoverflow.com/survey/...)
Yeah, Svelte's popularity is on the rise as well :)
I can highly recommend MDN as a vital resource for learning many of the fundamental web technologies and an essential source of reference through-out a frontend development career.
I have also found Scrimba to be an excellent interactive training site - and it is free.
Sweet article. What I do think is an important note is the fact that Angular's learning curve is MUCH more steep than Vue or React. You also forgot to mention the fact that Angular not only carries the learning of a framework, but also the programming language due to the fact that it is TypeScript.
I also wonder what your take on PWA's is. Is it really worthwhile to spend your time into learning how they work? I hardly see them being used professionally.
Yes, I should have mentioned that. Thanks for pointing out.
As for PWA, a lot of the top apps like Spotify, YouTube, Twitter and more do use it (and research says adding PWA features has a correlation with increased revenue), so think it is worth looking into
I strongly agree with the last point. One should try out a bunch of stuff (frontend, backend, data science, etc) and only then choose the one he likes the most to become an effective developer
Very informative. Thanks π
Your welcome!
Okay, now I can assume I'm on imtermediate stage. Grate articleπ‘π€
Best of luck on your journey π
You are absolutely right :)
Now, I can say I'm out of the intermediate level.
Thanks for the brilliant piece.
Glad I could help :)
Nice a front-end roadmap that is really a front end roadmap and not a js fullstack roadmap
:)
It's all about the fundamentals. Thank you for reminding everyone of that.
My pleasure :)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.