prodevhub.com - logo
Menu

Becoming Front End Developer in 2020

Becoming Front End Developer in 2020

Becoming Front End Developer is not as easy as it was in the early ’20s. In 2020, you can’t say “I know HTML and CSS so I am a front end developer”. You have to learn a lot to become a front end developer.

Nothing is easy in the world, but if you are consistent on what you are doing then the path to success is always yours.

Beginner – Front end developer

The most important skill to become a front end developer is to have a solid understanding in HTML, CSS, JavaScript

1. HTML

HTML is a semantic markup language used to structure the web documents. You should know how to create a HTML document in a proper way.

In 2020, you have tons of features to learn in HTML5, you should learn to play a video/audio on a web page using HTML5.

Things you need to know in HTML:

  • Learn to structure the document in a proper way so that it can be designed using CSS.
  • Learn to properly use tags like header, nav, main, section, footer, aside, p, strong etc.
  • Learn to create tables. also you should create nested tables.
  • Learn to show image using img tag and create a video and audio player.
  • Learn to use canvas and SVG in your document.

2. CSS

CSS is called Cascading Style Sheet which is used to style the HTML document. In other words, it’s used to design web pages.

In 2019, you have to learn flexbox, grid, transitions, animations with keyframes, animations with svg.

Things you need to know in CSS:

  • Learn selectors like element, class, ID, sibling, child, etc.
  • Learn basic properties like font-size, background, color, height, width etc.
  • Learn Flexbox for one dimensional layout.
  • Learn Grid for two dimensional layout.
  • Learn Position: relative, absolute, fixed etc.
  • Learn to use pseudo selectors like :after, :before, :first-child, :last-child etc.
  • Learn media quires for responsive design.
  • Learn animations using keyframes.

3. JavaScript

JavaScript is scripting language used to add user interactions / behavior in the web pages. For example, when a user clicks a button, you can display a popup etc.

In 2019, JavaScript rules the web world. There are 100’s of JavaScript libraries available. Even JavaScript rules the server side world with the use of NodeJS.

Things you need to know in JavaScript:

  • Learn JavaScript syntax, variables, arrays, objects, function declaration, function expressions.
  • Learn basic methods like toString, forEach, map, filter, etc.
  • Learn to play with JSON, Object and array.
  • Learn prototype inheritance in JavaScript
  • Learn ES6 classes, arrow functions, callbacks, promises and async await.
  • Learn DOM (Document Object Model) manipulation and BOM (Browser Object Model).
  • Learn to play with canvas, svg, video, audio etc.

Intermediate – Front end developer

Once you are comfortable with the basics of HTML, CSS and JavaScript. It’s the time for you to pick any of the following JavaScript frameworks:

  1. Angular
  2. React
  3. Vue

1. Angular

Angular is one of the most popular JavaScript framework powered by Google. Popular companies including Paypal, Nike, Sony etc are using Angular for their projects. checkout: http://madewithangular.com

Angular is an opinionated JavaScript framework. With the use of angular-cli you can create projects, modules, components etc.

Things you need to know in Angular:

  • You should learn TypeScript, which is the official language for Angular.
  • Learn modules and components based architecture in Angular.
  • Learn interpolation and property binding.
  • Learn Angular modules, directives, components, services and pipes.
  • Learn how to share data between the components using @Input(), @Output() and Services
  • Learn angular routing.
  • Learn to make http calls using HttpClientModule.
  • Learn to create template driven forms, reactive forms and dynamic forms and also make use of built-in validators or create custom validators.
  • Learn state management throughout the application using Redux, ngrx

2. React

React is an unopinionated and widely used JavaScript framework powered by Facebook. Popular companies including AirBnb, Netflix, Dropbox etc are using React for their projects. checkout: https://github.com/facebook/react/wiki/sites-using-react

Things you need to know in React:

  • Learn react components
  • Learn JSX syntax for writing dynamic HTML.
  • Learn ReactDom to render DOM.
  • Learn React props to share data between components
  • Learn React Router

3. Vue JS

Vue is another popular JavaScript framework to build user interfaces in web. Popular companies including Adobe, Xiomi, Alibaba etc are using Vue JS. checkout: https://madewithvuejs.com/

  • Learn Vue components
  • Learn Vuex state management for Vue
  • Learn declarative rendering
  • Learn vue routing
  • Learn interpolation, directives etc.
  • Learn event handling.