Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Your First Steps in a Front-End Developer Career

DZone 's Guide to

Your First Steps in a Front-End Developer Career

Looking to get your career as a front-end developer going? Maybe you're a little stuck or frustrated? Then this post is for you.

· Web Dev Zone ·
Free Resource

A couple of weeks ago, I've been contacted by a friend of mine, who is just starting his career as a front-end developer.

It's very typical when a start of the journey is frustrating, and there is nothing better than the advice from the people who have already been there.

I never thought about that question carefully, but I formulated something quick for him. But later I decided to elaborate on it and share it with a bigger audience.

There Is No Recipe

The thing is, there is no just simple recipe. If there is, I guess it would sound like, "practice, practice, practice".

It's not a secret that you have to dedicate a lot time to your craft. And I really mean a lot.

If you are starting your career and are lucky enough to have a job, you have to come back home and work on side projects. If you are a student, you have to come back after school and work on side projects, watch courses, and read good books.

Through my career, I realized, it was the side projects which contributed to my experience the most.

Here is the thing, at work you have to perform. At work, you have a lot of constraints — the existing codebase, architecture, set of libraries and frameworks, the team rules, etc.

It's not always an educational environment. You have to solve business goals, not just educate yourself. Rarely do both things run in parallel.

So, prepare yourself mentally to work a lot and spend evenings with your IDE opened, instead of watching your favorite series on Netflix or going out (even though, it's also very important to do from time to time).

JavaScript Foundation

JavaScript is the assembly language of the web. Without a proper understanding of the language, you have nothing to do in the front-end world.

The good news is, you don't have to be Douglas Crockford to be a successful developer. I'll tell you what, I've spent quite some time in the profession, but the details of the language opened up to me way later. It's totally normal if you don't understand the depths of language. It will come.

However, there a fundamental parts that you have to be very comfortable with:

  • Data types.
  • Arithmetic operations.
  • Boolean and conditional operators.
  • Understanding of OOP paradigm (prototypical inheritance).
  • Understanding of functional paradigm (functors, applicators, immutability).

I also recommend you start learning Node.js.

All modern tools for front-end require Node.js. Developing simple applications and running them from the command line is way more convenient compared to dealing with the browser.

Browsers and DOM

Besides that, you should be able to understand how browsers work and, in particular, understand the concept of the DOM.

  • How the DOM functions and it's basic components.
  • Events, events propagation, and handlers.
  • DOM API, window object.
  • DOM selectors.

Here you should be able to write simple, pure JavaScript applications by listening to controls and performing simple DOM manipulations, such as setting values, classes, and properties.

UI Development

In my career, I came from backend and desktop applications UI background, and at first sight, HTML and CSS seemed to be easy. It's not even a real programming language, just a set of declarations, right? Not really.

Even if your goal is not to be a designer, you should develop useful skills and a taste for good design. So the best thing to do is to steal cool ideas.

No kidding, just pick up the site you like the most and try to copy it. Remember, the famous guy who said - "Un artista copia, un gran artista roba" (Good artists copy, great artists steal).

Get your hands dirty with HTML and CSS.

Be fluent in creating, simple and good looking interfaces. Find a freelance job of turning PSD or Sketch into HTML/CSS. You will get exceptionally important skills.

Client/Server Communication

Browser applications don't exist in isolation. They do talk to servers to get the data and push data back.

Without going too crazy, you will hugely benefit from understanding the following things:

  • Basics of the HTTP protocol.
  • The concept of REST (HTTP verbs and resources).
  • Optionally: the concept of GraphQL and how it differs from REST.

There are tons of open APIs you can do cool stuff with. Pick one and build a simple application against it.

I remember one of the projects I did alexbeletsky/github-commits-widget. A simple app that connects to a GitHub API and makes a widget of contributions to a project. I had a lot of fun with it.

Development Frameworks

And only after the first three parts, which on their own might take a year or more, I would suggest you take a look at some UI development frameworks.

The JS ecosystem is famous for creating "fatigue." Tools are complex, configurations are confusing; don't start with React or Angular, just because you heard that they are cool.

It could be that by the time you are comfortable with JS/HTML/CSS those things will be dead already (front-end development frameworks have a tendency to survive for 3-5 years and are then entirely overtaken by competitors... don't bother with that race).

However, for now, I would recommend you focus on React.js. The ecosystem is stable, there are millions of tutorials, open source projects, and meetups. You won't want for information, that's for sure.

You will want to feel confident with any front-end framework because all of them are designed to simplify complicated things or make things more performant. The foundation of development, such as DOM manipulations and HTML/CSS, will more or less remain the same.

Even if the framework could encapsulate any particular detail, you will be confident enough to understand, what's actually going on there.

At the end I would just like to share a list of resources that helped or influenced me during my own journey:

Hope you find this helpful and I wish you the best in this interesting and exciting journey!

Enjoy the ride.

Originally published on Medium in Product & Engineering blog foster blog

Topics:
web dev ,front-end ,dev life ,development careers

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}