Everyone, including me, started to learn Front-End Web Development from scratch, and it’s normal to feel disoriented at first. That’s why I decided to write this article containing very useful information such as skills and technologies to learn, what salary to expect, and some websites to learn that will be very useful for you.
Table Of Contents
What is a Front-End Web Developer (and what does it do)?
What skills do a Front-End Web Developer needs?
What salary to expect as a Front-End Web Developer?
Amazing resources to start learning Web Development.
Wrapping Up
What is a Front-End Web Developer (and what does it do)?
As their name suggests, Front-End Developers are responsible for the "front-end" of a Web Application, more specifically, everything that the user sees, including the design and content.
All these stuff are built using different skills and technologies such as HTML, CSS, JavaScript, React, Svelte, and much more. The main goal is to allow users to access and interact with the Web App through a nice and clean UX.
When you visit a website, all the design elements you see were implemented by a Front-End Web Developer.
Some of the day-to-day duties of a Front-End Developer can be:
Creating Web Pages/Components from Scratch.
Optimizing the performance of the webpage.
Refactor the old codebase to improve the code quality.
It is important to underline that you will not spend all your workday coding, usually, there are meetings, brainstorming sessions, and code reviews which are quite useful too.
What skills does a Front-End Web Developer needs?
The answer is simple: it depends. There are some foundational concepts that you must know to do your day-to-day work, but once you become a professional, you will likely end up specializing in a specific branch, claiming to know everything in this area is ****practically impossible.
The Foundational Concepts are HTML, Vanilla CSS, and Vanilla Javascript. As I said before, these are a must, and you should master them before moving on to more complex topics (more on this later), and I will give you amazing free resources for mastering these topics, later in the article.
Want to hear the good news? Using those foundational skills you can apply for your Front-End Developer Job already! A lot of companies accept Junior Developers without any framework knowledge, but if you want to go even beyond what should you do?
Well, according to The State Of Front-End currently the most liked **tools (libraries and frameworks) are **React, and Next.js **(A React Based Framework), but a lot of hype will grow in the future for other tools like **Svelte **and **Remix (Which is React Based).
Talking about TypeScript, there is a growing trend as well, the survey tells us that most people believe that TypeScript will overtake Javascript and become a new frontend standard.
I would like to add some notes of personal experience during my job seeking: a lot of companies are looking for React Developers, with a plus for the TypeScript knowledge.
This does not mean that the other technologies are ugly or not used anymore, Just know that there are still people who make a lot of money fixing code in COBOL, so there is no need to worry about a technology disappearing overnight. You should choose what you prefer because you know, the career is yours, not mine, not of everyone else, the important thing is to stick with the one you choose, doing one week Angular, and the other Svelte will not take you to the stars as a skilled Front-End Developer.
Some pieces of advice from my path
I know initially, it’s difficult to figure out which path you should take, as you can see basically in every tech blog or social media, there is a lot of stuff in the Front-End Development world, and you need to be quite specific with what and what not to learn. What can I do tough, is give you the path I followed to get a job as a Front-End Engineer.
I have always been a Full-Stack Developer (Laravel + Javascript + Bootstrap) since my first days in tech, but when I discovered React, I fell in love with it and its simplicity (at that time there were no hooks yet), so I started an incremental migration from jQuery (yes, the best framework of the entire planet) to Vue.js taking my first steps in a structured front-end framework.
After about 6 months of Web Applications built using Vue, we decided as a team to move permanently on React, and from that moment I have always concentrated on that, experimenting gradually, with more and more complex abstractions such as Next.js, Remix, Chakra-UI, Material UI, TailwindCSS and so on. I also started moving all my existing codebases to TypeScript instead of Vanilla Javascript.
Currently, I’m still working with React, and I will continue to do so until I find something more interesting for my taste. The important thing is doing what you like, this is the only way to learn fast and effectively!
One thing I would like to repeat because it’s really important is: I know that every day we are bombed by "The new AMAZING framework" or the "Insanely fast compiler", and everyone is tempted to learn complex things first, but PLEASE don’t skip the steps! You need to grasp all the basics of web development otherwise you will encounter a lot of difficulties learning complex things! If you don’t believe me, try to figure out the meaning of this:
Here there are a lot of things like "nullish" and "double not" operators, optional chaining, and object spreading, without talking about TypeScript and React! You need TIME and PATIENCE!
What salary to expect as a Front-End Web Developer?
According to Glassdoor, a Front-End Developer in the United States can earn an average of $87K per year, I have news of some people who earn more than $100K as Senior Front-End Engineers (Even without working at FAANG!). This number depends on which country you live, in and your level of seniority in the field. But can be quite useful to know about what can you expect for your salary.
Amazing resources to start learning Web Development.
The next resources I will mention are intended for beginners.
Responsive Web Design
This course covers HTML and CSS without JavaScript and has been updated with new content lately, and if you want to start on the right foot, go ahead sticking with this.
Link: https://www.freecodecamp.org/learn/2022/responsive-web-design/
Code Guide (HTML, CSS)
An amazing reference for best-practices coding CSS and HTML it’s short, and I recommend skimming its content.
Link: https://codeguide.co/
Common CSS Flexbox Layout Patterns
Flexbox nowadays is the foundation of CSS Layouts, this is a super useful article about designing Flex Layouts in simple steps, also in this case, the article is short and could be used as a future reference, give it a try!
Link: https://tobiasahlin.com/blog/common-flexbox-patterns/
Understanding Layout Algorithms
This is a little step further from the beginning, but it’s an amazing resource to learn how CSS positioning works.
Link: https://www.joshwcomeau.com/css/understanding-layout-algorithms/
Javascript.Info
Talking about JavaScript, from thousand of resources available on the web, I would suggest you this one, it’s a reference website which covers a lot of topics, from the very beginning like "Hello World", to the most advanced like "Generators" and "Proxies".
Link: https://javascript.info/
Wrapping Up
Hope all those suggestions will be useful to you. If you arrived here it means you are interested in building your career as a Front-End Developer, and that’s why I have a gift for you.
During my career as a developer, I collected a huge list of useful free resources I found on the web, including articles, talks, amazing tools, example websites, and more.
The entire collection took years of work, and today you can take it home for a fraction of the price using the special discount code HAPPY-DEVELOPER at the checkout.
Click here to get 150+ Front-End Development Learning Resources
I give you my best wishes for the start of your journey!
Top comments (0)