Front End Web Development
Tags: frontend, javascript, css, html
Published: 2022-09-23 19:02:45

For many beginners, **Front End Web Development** or Front End Web Developer as terms are still not clarified. That’s why through this article you will be able to learn about those terms and all skills that one as a Developer should know to work in **Web Development Industry** as a **Front End Developer**.

If you wish to see video format of this article, make sure to click this link — [Front End Web Development](https://www.youtube.com/watch?v=Hwp8vtWi3yQ&feature=youtu.be&ab_channel=Omerko)

## What is Front End Development?
**Front End Development** is known as a **Client Side** of the Website, or Application. In that said, everything that we see through different websites that we visit, everything was created through **Front End Side**.

## History
Back in the days, **Front End Development** wasn’t vast as it is today. Back then, Front End Developers were able to work only with Design of the pages and it was quite a challenge to manipulate the **DOM ( Document Object Model )**.

Now, Front End has much more work to do. As **JavaScript** grew, **JavaScript Frameworks** were introduced to us ( **Angular, React.js, Vue.js…** ). With modern JavaScript and it’s Frameworks we as Front End Developers are able to do much much more.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8xum0783zy998jp5gz8.png)

## Skills
As a **Front End Developer** myself, through several years of experience I learned which skills would be required for a **Front End Development** and which are more optional. By saying Optional, I mean, we do have several different skills that we can use to essentially do similar or same work.

**Main Skills:**

- **HTML / HTML5** — **Hyper Text Markup Language** is essential for every Front End Developer as it gives us the option to create our markups with its elements. HTML uses Tags and those are using Attributes for best performance and quality of our Web Pages.
- **CSS / CSS3** — **Cascading Style Sheet** is a language that offers to us option to style our page. CSS will do that by targeting specific elements in our HTML by their Tag or Attribute and set properties of styles that we wish to change.
- **JavaScript** — **Scripting Language** that is being used through all of modern browsers out there. It’s popularity is at the very top and next to Python it is one of most Used Programming Languages today, even though Python and JavaScript are used for different type of Development.

**Optional Skill:**

- **CSS Preprocessor** — **Preprocessors** such as **SASS/SCSS and Less** offers us variety of techniques that we can use to make our syntax better in CSS, organize better our CSS and each of those has their own perks like using mixins to not repeat our code.
- **Frameworks** — Such as **Bootstrap** or **Materialize** will give us sets of stylings that we can already use with prebuilt components as well. Those also includes their own Grid Systems for Responsive Websites and many options to customize those for our needs.
- **JavaScript Frameworks** — As I mentioned, Frameworks like **Angular, React.js, Vue.js** and many others gave more life to Front End Web Development. Using those, we are able to create Single Page Applications with variety of different tools.

## Tools
Let’s now see some amazing Tools that we as **Front End Web Developers** can use to improve the quality of our work.

- **Text Editor** — Well, yes we do need one if we wish to write code and some of those would be **Visual Studio Code, Sublime Text, Atom** and many others.
- **Git** — It’s a **Version Control** for our Code. So it handles version of our code and it is able to branch out those and merge those together making work in team quite easy.
- **Design Editors** — As **Front End Developer** works directly with the page itself, it is highly suggested to know at least **Photoshop** or **Figma** or some other similar software so you can be sure to create those pages by design.
- **Terminal** — Well whole workflow with terminal is important as Front End Developers can often work with **Git or even Module Packages** and mostly we manage those directly in terminal.
- **NPM** — **Node Package Manager** is a Bundle of Packages that we can use and next to the NPM, we have similar ones like Chocolatey or Bower.
- **Bundlers** — Todays technologies have bundlers already fully setup, but it is highly suggested to at least understand how those will work as those offers to us **Smaller Bundle Sizes and Faster Loading**.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehh701nykzhpgwkkr016.png)

## Career
Career of a **Front End** won’t be same for everyone. Even if we do need to know specific technologies and go through similar process to learn those, **Front End Developers** could have quite different career paths.

Me personally, I like working as a **Freelancer** and many **Developers** choose that path. Many of those works even remotely for a company which still goes as a Freelance work as individual has it’s free space and time.

For you, maybe you wish to get an **Office Job** and that is good as well. With recent popularity in **JavaScript Frameworks**, many big companies now are hiring **Front End Developers**.

Some other options for you would be to work for a **Startup**, work on a **Project Basis** and even work on your own project that you eventually would deploy and show to entire world.

## Conclusion
Touching this very root of **Front End Development** could not clarify for you the whole process of learning and being a **Front End Web Development**.

To learn about **Front End Development**, make sure to watch this video — [Front End Web Development](https://www.youtube.com/watch?v=Hwp8vtWi3yQ&feature=youtu.be&ab_channel=Omerko)

If you like to see more of my content, feel free to check my other posts. Also, make sure to subscribe to my [YouTube Channel](https://www.youtube.com/c/Omerko).