What is Front-end? How to Become a Front End Developer
Tags: webdev, productivity, javascript, programming
Published: 2021-06-16 15:05:41

You've probably seen the term "front-end developer" before, either on tech-related websites or in job applications you've perused.

So have you ever wondered what exactly a front end developer is and what skills you'd need to become one? Well if you're curious like I was, this article will help clear it all up.

### What does "Front End" mean?
When I began to learn about coding, I knew that you are either a web developer or a mobile developer – at least, that's what I thought back then. 

So I decided to first learn `Android development` then later transitioned to `web development`. I knew that with the skills I had, I was set and ready to apply for jobs.

When I looked over my first job applications, something stood out: they either wanted a front-end developer, back-end developer, or a full-stack developer.

In the past few years the web has become more complex and there are many opportunities for developers with different skills.

This means that as a developer, depending on your skill set, you will classify yourself as a:

* front-end development – deals with what we can see and interact with
* back-end development – deals with what the user can not see
* full-stack development – is able to do both front and back end development (which applies for both mobile and web)  

In this article we are going to focus on `Front-End Developer`, for more detail about other roles read this article [HERE](https://www.freecodecamp.org/news/what-is-a-fullstack-developer/)

To understand the related roles, we're going to dive in a little deeper to see what skills and knowledge you need to become a front-end developer. 

### What is a Front End Developer? 
![front-end developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddh64ifylro51grh4sqa.png)   
Front end developers build out the visible parts of a website – what the user can see and interact with.

In order to become a front-end developer you need to know HTML, CSS, and JavaScript. Let's break these skills down a little bit. To get a better understanding we are going to use our body as an example – cool, right?  

**HTML** (Hypertext Markup Language) – this is like the skeleton of the body, because it gives it a website structure. Every site you visit is built using HTML, which handles the structure and the content of the site.

**CSS** (Cascading Style Sheets) – you can think of CSS as the aesthetics and muscles of the body! CSS makes a site beautiful and interesting to look at. Just like in your body where muscles and skin make you beautiful, CSS does the same for a website. It sets the fonts and colors, adds images, and even helps make the site responsive.

JavaScript – like the brain of the operation that tells everything how to behave. JS is a gamechanger in web development as it gives a site all its functionality.

For example, take a look at my portfolio that I made using these skills alone [HERE](https://larymak.netlify.app/).

JavaScript has developed and changed for the better over the years, and many great new features have been added to the language.

Also, there are a number of helpful frameworks like React, Angularjs, and jQuery that help front-end developers build projects more easily. 

### Responsibilities of a Front-end Developer
Just like any other role out there, front end devs have certain responsibilities. Let's look at the skills and tasks required for a typical front end developer role:  

1. Collaborate with designers and application developers to develop customized websites.
1. Develop sites with a wide array of contents and ensure optimal utilization of web tools.
1. Build reusable code for future use.
1. Ensure that web designs are responsive and work well on all devices.
1. Work with creative teams to develop innovative solutions to cater to a wider audience.
1. Monitor and ensure high quality design and code of a website.
1. Utilizing a variety of markup languages to write web pages.

### How to Get Started with Front End Development
To help you get started in this role, I've created this list of excellent resources. There are many platforms with both free and paid materials to help you learn. Here are the sites I recommend: 

* [Freecode Camp](https://www.freecodecamp.org/)
* [Frontend Mentor](https://www.frontendmentor.io/)
* [Udacity](https://udacity.com/)
* [Frontend Masters](https://frontendmasters.com/bootcamp/)
* [Codecademy](https://www.codecademy.com/)
* [SkillShare](https://skillshare.eqcm.net/2z6nQ)
* [Web Development Guide](https://riseuplabs.com/web-application-development-ultimate-guide/) 

I also compiled a repo to help beginners get started with front end development – you can check it out here: **[HTML,CSS & JS](https://github.com/larymak/Html-Css-Recap)** 

And here are some other repos with learning resources: 

* [Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist)
* [Frontend Roadmap](https://github.com/helloroman/frontend-roadmap)
* [Frontend Developer Roadmap](https://github.com/Z8264/frontend-developer-roadmap)  

Perhaps you might wonder what you'll need to do next after studying and learning all this stuff. If you are able to get through all the above and learn it well, you'll be qualified to own that Front End Developer title (with an average salary of $86,148 per year according to [Glassdoor](https://www.glassdoor.co.in/Salaries/us-front-end-developer-salary-SRCH_IL.0,2_IN1_KO3,22.htm)).

During the process of learning, though, you will need to practice to perfect your new skills.

And for me, practicing is all about building projects and hosting them somewhere so that you can showcase your work to potential employers.

Below is a list of free hosting services where you can host your front end projects: 

* [Vercel](https://vercel.com/)
* [Netify](https://www.netlify.com/)
* [GitHub Pages](https://pages.github.com/)
* [Heroku](https://www.heroku.com/)
* [Firebase](https://firebase.google.com/) 

Also, which type of developer are you?

I will go first: I have always preferred to call my self a Growing Developer as there is room to learn every day. I can't really specify exactly one label, because I believe I can pretty much do anything.

If you have read this far I really appreciate it. Help me grow my community: 

Connect With me at [Twitter](https://twitter.com/larymak1) | [Insta](https://www.instagram.com/nextgencoders/) | [YouTube](https://www.youtube.com/channel/UCrT1ARRZfLOuf6nc_97eXEg) | [LinkedIn](https://www.linkedin.com/in/hillary-nyakundi-3a64b11ab/)  | [GitHub](https://github.com/larymak)  

Enjoy Coding ❤