The Basics


The Hypertext Markup Language (HTML) is essential for every website you’re implementing. By using HTML you’re defining and structuring the content of a website by using a simple markup syntax.

Getting it done:

  • Learn the basics of HTML.
  • Learn how to section the page properly.
  • Practice, practice, and more practice


Cascading Style Sheets (CSS) is a simple way for adding styling to your websites (e.g. adding fonts, colors, layout etc).

Getting it done:

  • Learn the basics of CSS.
  • Understand the CSS Box Model.
  • Learn about the Grid, Flexboxes, and Media Queries.


JavaScript is the essential building block for adding dynamic features to your website.

Getting it done:

  • Learn the basic construct and proper syntax.
  • Learn how to work with the DOM.
  • Learn ES6 features and writing modular Javascript.

Dive Deeper


Preprocessors allow you to add functionalities on top of CSS and lets you do things that CSS can't.

Getting it done:

  • Understand about "why" preprocessors are useful.
  • Learn and practice Sass.
  • Practice, practice, and more practice.


CSS frameworks have become the foundations of web projects and made easy web developing streamline. Most of these frameworks contain numerous grid system, cross browser device compatibility fixes, custom layout and many more opportunities.

Getting it done:

  • Look into Bootstrap.
  • Look into Materialize.
  • Choose one that works for you and practice.


Refers to the structure and build up of CSS in your projects. This way they are more maintainable.

Getting it done:

  • Look into BEM, OOCSS, SMACSS.
  • Understand the differences.
  • Choose one that works for you and practice.

Dive Even Deeper


The process of automating the creation of a software build and the associated processes including: compiling computer source code into binary code, packaging binary code, and running automated tests.

Getting it done:

  • Look into Gulp / Grunt / NPM Scripts as task runners.
  • Look into module bundling with Webpack.
  • Incorporate linting tools such as JSHint, ESLint, JSLint in your development to analyze your code for potential errors.


There are a number of frameworks and libraries available to learn and use at your disposal. The trick know about them but choose and master one first.

Key Differences to remember:

  • A library performs specific, well-defined operations.
  • A framework is a skeleton where the application defines the "meat" of the operation by filling out the skeleton. The skeleton still has code to link up the parts but the most important work is done by the application.


Testing Graphical User Interface (GUI), functionality and usability of website or application.The main aim of Frontend testing to make sure that every user is well-protected from bugs. It also helps you to get the complete clarity about the scope of the project.

Getting it done:

  • Learn some Front-end testing tools such as Jasmine, Needle, Browsera.
  • Learn about performance optimization.
  • Learn about testing frameworks such as Mocha, Jest, Protactor.