How to become a full stack developer — Front-end


Articles of the series:

Now you know how to work with CSS and HTML. How about we begin as of now with programming!

As referenced in the past article Front-end apps work on a client-side (web browser). There are three fundamental technologies used on most of the web pages. HTML is a structure, CSS — styles, JS interactive.

The present article will be an overview of Javascript.

Add javascript to a page

Js adds all the dynamics to web pages. Such as animations, events and many many else.

Javascript interacts with HTML in the following ways:

Tag events:

<button onClick="alert('Thank you for clicking')" >Click me!</button>

Script inserted before closing body tag:

    alert('The script is working.');

Or external file:

  <script src="some-external-file.js">
    alert('The script is working.');


First a walk JS is a programming language. hence has features other languages have. In addition, it has interaction with HTML pages. All HTML elements are readable and reachable form JS.

Javascript based on prototypal inheritance paradigm.

Programming languages all have built-in data structures, but these often differ from one language to another. This article attempts to list the built-in data structures available in JavaScript and what properties they have; these can be used to build other data structures. Wherever possible, comparisons with other languages are drawn. Retrieved from: MDN

Six data types that are primitives: Boolean, Null, Undefined, Number, String, Symbol. And Object.

More about that can be discovered here.

Functional elements

// Comments
   Or long comments
*/// Variables
var someVariable = 'data asssigned to variable';// Functions
function someFunction(){
  //Some actions here
}// Classes
class GoodClass {
  anyProperty = 'data asssigned to property';
    //Any action
for( var i of numbersArray ){
  //Repetative actions

Document Object Model (DOM)

All HTML elements are stored in DOM in hierarchical order.

Element <div id="orangeDog">Text</div> reachable by document.getElementById('orangeDog');

For instance, text color can be changed this way document.getElementById('orangeDog').style = 'red';

It is basics. For deeper knowledge, strongly recommend considering this book including exercises. It starts with the basics and gradually introduces you to JavaScript.

What does it take to be a good front-end developer?

In the wake of completing the book, you are as of now a front-end developer. Now it’s a matter of training and practice.

begin from little pages. On the first stage, you can reproduce some existing website or elements from it.

After you are certain in JS, HTML, CSS, you can pass to more complex tasks. Then try landing a junior job in some company or to build a website for a friend or family. Workplace helps advancement abilities.

What are the job requirements?

Usually, it looks like:

  • HTML, CSS, JS (including ES6), Jquery, Sass or Less
  • One of the front-end frameworks: Angular, React
  • AJAX
  • Experience with Git
  • Experience with Webpack, Gulp or other tools needed to build/bundle JS applications
  • Photoshop basics
  • Portfolio. It may be even small examples.

Skills increasing your chances:

  • Unit tests
  • WordPress or another popular CMS
  • Good understanding of the entire web development process


Angular or React — Most used for Single Page Applications. The second one currently is the highest demand.

Jquery — facilitates manipulations with elements, animations, AJAX

Lodash — helpful functions to manipulates data in JS

Bootstrap — Reusable HTML blocks with styles

Font awesome — Icons library

Helpful tools

Chrome dev tools — Development tools inside a browser.

Git — code versioning

NodeJs — Javascript based server. Has many helpful modules

NPM — Packages manager for NodeJs modules.

Gulp or Webpack — Pack and minifies code. NodeJs installed required.

Github — Store/share your code and discover the source code of others.

Codepen — HTML, CSS, JS online editor.