Front end

HTML

  • Learn the Basics
  • Writing semantic HTML
  • Basic SEO
  • Acessibility
Learn the Basics

CSS

  • Learn the Basics
  • Making Layouts
    • #Floats
    • #Positioning
    • #Display
    • #Box Model
    • #CSS Grid
    • #Flex Box
  • Media Queries
  • Learn CSS3

Basics Of Javascript

  • Syntax and Basic Constructs
  • Learn DOM Manipulation
  • Learn Fetch API/AJAX (XHR)
  • ES6+ and modular Javascript
  • Understand the concepts; Hoistings, Event Bubbling, Scope Prototype, Shadow DOM, strict, how browsers work, DNS, HTTP

Package Managers

NPM

NPM improved a lot, post v5+, but it still behind Yarn in some features, nothing serious tough. Pick any!

Yarn

CSS Pre-processors

    SASS

    PostCSS

    Post is not a pre-processor but can be use as one. Go for SASS and revisit Post CSS later. There is still some Less in the market but i won't go for it if i was startinf in 2019.

    Less

Css Frameworks

Bootstrap

Materialize CSS

Bulma

Semantic UI

CSS Architecture

BEM

With modern front-end frameworks, there is more push towards CSS in JS methodologies with wich you are not going to need these. However, you should still learn BEAM at-least, wich would prove helpful in the long run.

OOCSS

SMACSS

Semantic UI

Build Tools

Task Runners

  • #npm scripts
  • #gulp

Linters and Formatters

  • #Prettier
  • #ESLint
  • #JS Hint
  • #JS Lint
  • #JSCS

Module Bundlers

  • #Webpack
  • #Parcel
  • #Rollup

Framework

React.js

  • #Redux
  • #MobX
    • *Not specific to React, can be used in any framework or app

Angular

  • #RxJS
  • #ngrx

Vue.js

  • #Vuex