Technology changes every day. Frontend is one of the fastest evolving parts of it. When you start from scratch today you do not have time to learn every aspect of all of its technologies. Old developers could see Javascript changes even from the beginning and learn it gradually. Now, you should learn purpose of every tool, basic usage and be able to build simple applications. Then you can find first job as junior programmer and develop your skills in real environment which will be the best option. In this article I will try to point why you need every of these parts. It will be just short introduction with essential questions. I intentionally do not attach the answers. Once you find them, you will understand basics and learn something more in the process of finding informations.

Command line

You will use command line mostly to install libraries and use them.

For start you should install node. It will let you use npm which is a package manager. You can find package that you need on npm website and easily add it to a project by npm install command.

Some packages need different version of node. Node Version Manager will help you to switch between correct ones.

HTML5

We need HTML to create structure of an application.

You define everything that user can see on a screen in tags.

For example:

<div>

<p>This is a paragraph.</p>

</div>

It is used only to represent elements in the tree called DOM. After that, you can style these elements to give them intended appearance.

Essential questions:

What is DOM? What are the features of HTML5? Describe usage of <header> , <article> , <section> , <footer> , <div> . Can a webpage contain multiple <header> elements? What is a difference between <span> and <div> ? What is WebStorage? Explain localStorage and sessionStorage. Describe form input tags. What is Flexbox?

CSS3 and CSS preprocessors

CSS let us style HTML tags to improve their appearance or animate them.

We can identify elements e.g. by give them id or classes and then define their styles like background color, width, height and many, many more. We can also find elements to add styles by their tags or dependency of each other. You should also know what is hex and RGB representation of the colors.

div { background-color: #000000; // hex representation of black }

There are technologies that adds powerful functionalities to styling like SASS or LESS. It will be your advantage knowing about their existence and possibilities. I recommend you SCSS for start — which is SASS with CSS syntax.

Do not be afraid when some strange things are going to happen in start of your journey with CSS.

Essential questions:

How to add stylesheet to your .html file? What is CSS box model? Describe CSS selectors. What is responsive web design? What are the features of SASS?

Javascript

Thanks to Javascript [JS], we can add logic to our application.

We can react on element click, mouse position or even scrolling a page. We can make calculations and control appearance of our application basing on them.

Probably, it will be the hardest part to learn at the start. Javascript is specific language connecting imperative, object-oriented and functional paradigms. Anyway, after each article, tutorial and line of code you will get better into that flow.

I prefer not starting with books in learning JS. Your own project and tutorials will develop your skill much faster. When you get some knowledge and basics you can start reading books with understanding.

Essential questions:

What is a functional programming? What is an asynchronous programming? How we can implement inheritance? What data types we have in Javascript? How to create an object? What are the features of ECMAScript 6? What is REST and three-tier architecture?

Framework / Library

Frameworks are used for better code maintenance and accelerate creation of your application.

They provide architecture and many improvements to help you building reusable user interfaces.

At the beginning, when you do not have a lot of Javascript knowledge it will be hard to write an application with framework. Anyway, it is necessary to get basics of it as junior frontend developer. You do not have to study all aspects of the framework or library from start but you should get concepts of building web applications with them.

At this moment you can choose between three main technologies: React, Angular or Vue. It doesn’t really matter what technology you will choose now. Probably, you should even try every of this to choose what fit best for you.

React — library

Easier to learn when you start with Javascript

Large community

Big flexibility — it is only library and you have to know and find more tools that you need

Angular — framework

Easier to learn when you come from object-oriented programming

You have most tools in the box

Well described documentation and architecture

You have to learn Typescript

Vue — framework

Rising star getting more and more enthusiasts

Nice ecosystem and community

For now, you should know what frameworks exists, their main concepts and purposes.

Essential questions:

What is the concept of dividing application into components? What are the lifecycle methods?

Version control and CI/CD

We use version control systems for better managing shared code and maintain history of changes.

The most used version control system is GIT and you should start with it. It is powerful tool that will save your ass many times. When you will make some bad changes it will be easier to revert them. It will also help you and your colleagues work on shared piece of code.

With continuous integration (CI) and deployment (CD) it will be fast to build, test and deploy your code. You do not have to know how exactly it works for now.

Essential questions:

What are purposes of git pull , git merge , git add , git commit and git push commands? What is GIT flow? What is a pull request? What is a pipeline?

Developer tools

Developer tools helps to find bugs and check how the things are working in the live environment.

Most popular browsers have built-in developer tools, you should find shortcut for your browser.

Essential questions:

What is debugging? What is a breakpoint? How can we use and why console.log ?

Work methodology

Most good IT projects are trying to use rules from Agile manifesto.

The most popular agile framework is Scrum. You should know at least few assumptions of it. In every project you probably will have at least daily stand-ups to stay up to date with status of the product.