How to become Front-End Developer
Tags: programming, learning
Published: 2022-12-08 17:52:00

---
title: How to become Front-End Developer
published: true
description: 
tags: programming, learning
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

In my option the best way to start your journey as a Developer (of any kind) is to start with Creative Coding in JavaScript (most popular programming language). You will learn coding right away, and not waste your time with HTML and CSS so you will know immediately if programming is for you. If you decide that you want to be Front-End developer you can learn them later.

With Creative Coding you will learn interesting stuff - to draw cool things with code. So it may be more accessible than normal courses on Front-End development, where it take a while before you can create something interesting.

There are few Creative Coding courses on Udemy:

* [Code Art: Learn Creative Coding to Generate Visuals with JS](https://www.udemy.com/course/code-art/)
* [Learn Creative Coding with Vanilla JavaScript](https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/)
* [Creative Coding with p5.js](https://www.udemy.com/course/creative-coding-with-p5js/)
* [Creative Coding Self Generating Art with Javascript & P5js](https://www.udemy.com/course/coding-self-generating-art/)
* [Coding for beginners: learn coding by creating art](https://www.udemy.com/course/creativecoding/)

 [Domestika](https://www.domestika.org/en)

* [Creative Coding: Making Visuals with JavaScript](https://www.domestika.org/en/courses/2729-creative-coding-making-visuals-with-javascript/course)
* [Creative Coding 2.0 in JS: Animation, Sound, & Color](https://www.domestika.org/en/courses/3862-creative-coding-2-0-in-js-animation-sound-color/course)
* [Intro to Creative Coding: Create Graphic Objects](https://www.domestika.org/en/courses/4034-intro-to-creative-coding-create-graphic-objects/course) (in French with subtitles)

And [Codecademy](https://www.codecademy.com/)

* [Learn p5.js](https://www.codecademy.com/learn/learn-p5js)

After you finish with creative coding course (you can pick more than one, so to know more creative techniques) and you're wondering what to do next, read the article.

## Overview

First are introduction videos from Fireship about general Computer Science, programming and Web Development. They are pretty condensed and fast pieced.

{% embed https://www.youtube.com/watch?v=-uleG_Vecis %}

{% embed https://www.youtube.com/watch?v=erEgovG9WBs %}

{% embed https://www.youtube.com/watch?v=pEfrdAtAmqk %}

{% embed https://www.youtube.com/watch?v=bOCHTHkBoAs %}

## Creative Coding

If you want to just play with code, and create new thing and don't want to work as developer, or maybe no yet. You can start with Creative Coding. The Coding Train is great YouTube channel for learning new things related to programming Math, Graphics, AI, and Games with processing and P5.js library.

{% embed https://www.youtube.com/c/TheCodingTrain %}

This channel will teach you more about Vanilla JavaScript (without extra libraries like P5.js).

{% embed https://www.youtube.com/c/Frankslaboratory %}

This chanel shows showcase interesting tutorials about P5.js.

{% embed https://www.youtube.com/@BarneyCodes %}

## Front-End
Here is a general overview of technologies that make up Front-End development (the stuff in web browser like Google Chrome or Firefox). This is a series of 100 seconds videos about this topic.

HTML
{% embed https://www.youtube.com/watch?v=ok-plXXHlWw %}

CSS
{% embed https://www.youtube.com/watch?v=OEV8gMkCHXQ %}

JavaScript
{% embed https://www.youtube.com/watch?v=DHjqpvDnNGE %}

TypeScript
{% embed https://www.youtube.com/watch?v=zQnBQ4tB3ZA %}

WASM
{% embed https://www.youtube.com/watch?v=cbB3QEwWMlA %}

React
{% embed https://www.youtube.com/watch?v=Tn6-PIqc4UM %}

Next.js
{% embed https://www.youtube.com/watch?v=Sklc_fQBmcs %}

PWA
{% embed https://www.youtube.com/watch?v=sFsRylCQblw %}

SEO
{% embed https://www.youtube.com/watch?v=-B58GgsehKQ %}

## HTML + CSS
If you want to find a job as a developer, you can follow the path of Front-End development. To do that you first need to learn about HTML and CSS, two fundamental pieces of Web platform. HTML is the structure and CSS is the style.

(This is video in Polish)

{% embed https://www.youtube.com/watch?v=opNgrPv3Qw8 %}

But this one is in English:

{% embed https://www.youtube.com/watch?v=G3e-cpL7ofc %}

Also this one:

{% embed https://www.youtube.com/watch?v=mU6anWqZJcc %}

Just CSS

{% embed https://www.youtube.com/watch?v=OXGznpKZ_sA %}

## jQuery

When you know about HTML and CSS, next step is to make dynamic changes to style and DOM (Document Object Model - HTML representation in browser memory) with JavaScript. I would start with jQuery even that it's hard to find a job with that technology nowadays. But the interface of this library is so simple so it's easy to learn. Later you can learn Vanilla JavaScript or some framework like ReactJS (which is library but you don't usually use it alone).

{% embed https://www.youtube.com/watch?v=ScoURsEM_yU %}

(This is video in Polish)
{% embed https://www.youtube.com/watch?v=8zk_A3pD_8c %}

## JavaScript

If you're finished with jQuery and can do refresh on JavaScript.

{% embed https://www.youtube.com/watch?v=lkIFF4maKMU %}

{% embed https://www.youtube.com/watch?v=PkZNo7MFNFg %}

[Complete JavaScript course](https://javascript.info)

## Build Projects

Next Step is project based learning with Vanilla JavaScript.

* [30 JavaScript](https://javascript30.com/)

### Build games

{% embed https://www.youtube.com/watch?v=n_ec3eowFLQ %}

{% embed https://www.youtube.com/watch?v=8xPsg6yv7TU %}

{% embed https://www.youtube.com/watch?v=lhNdUVh3qCc %}

{% embed https://www.youtube.com/watch?v=GFO_txvwK_c %}

## Full 21 hours Front-End bootcamp

And this is combination of everything in one long video (don't worry you're not expected to watch it in one siting).

[Description of the course](https://www.freecodecamp.org/news/frontend-web-developer-bootcamp/)

{% embed https://www.youtube.com/watch?v=zJSY8tbf_ys %}

## ReactJS

ReactJS is very popular library, if you know React you can much easier find a job as junior Front-End developer.

{% embed https://www.youtube.com/watch?v=u6gSSpfsoOQ %}

{% embed https://www.youtube.com/watch?v=Dorf8i6lCuk %}

{% embed https://www.youtube.com/watch?v=bMknfKXIFA8 %}

## API

Last is learning about API (programming interfaces). If you know how API works you can work with Back-end developers in a team. This is very important if you want to find a job.

[Learn: API Development using fun challenges (with solutions!) and interactive examples.](https://rapidapi.com/learn)

And that's it. If you like this post, you can follow me on twitter at [@jcubic](https://twitter.com/jcubic) and check my [home page](https://jakub.jankiewicz.org/).

## Linux
It's good idea to learn Linux and Bash

{% embed https://www.youtube.com/watch?v=ROjZy1WbCIA %}


## Git
If you want to work as Front-End developer you need to know Git, version control system that is the standard.
{% embed https://www.youtube.com/watch?v=RGOj5yH7evk %}

## TypeScript
TypeScript is a language build on top of JavaScript that is converted to JavaScript (this process is called compilation or transpilation). A lot of Front-End project are created in TypeScript.

Shorter Crash Course:

{% embed https://www.youtube.com/watch?v=gp5H0Vw39yw %}

And longer more detailed:

{% embed https://www.youtube.com/watch?v=30LWjhZzg50 %}