DeveloperRoadMap-2019.md

Web Developer Road Map for 2019

Found this great "Web Development In 2019 - A Practical Guide" from Traversy Media, where he discuss about practical guide for web development in 2019. I decided to list it down and follow along to improve my web development skills.

HTML & CSS – Always the very first thing to learn

semantic HTML elements
Basic CSS (Positioning, box model)
FlexBox & CSS Grid CSS Variables (Custom Properties)

• HTML Crash Course for Beginners
• CSS Crash Course for Beginners
• CSS Grid Crash Course
• FlexBox in 20 Minutes

Responsive Layout – Responsive layouts are no longer a luxury, they are a necessity

Set viewport
Fluid Widths
Media queries
Rem over px
Mobile first
Stacked columns

• Build an HTML Website with a Responsive Layout
• Responsive Landing Page
• Build a Responsive Mobile First Website
• Pluralsight Login Page Clone

Basic Deployment – Learn to deploy a static website

Register a doamin name(Namecheap, Google Domains)
Managed shared hosting or VPS (Inmotion, Hostgator, Bluehost)
FTP, SFTP File Upload (Filezilla, Cyberduck)
Static Hosting (Netlify, Github Pages)

• Web Hosting & cPanel Guide
• Deploy websites in seconds with Netlify
• Github deploy & domain

SaaS Pre-Processor

Structured CSS
Variables
Nested CSS
Mixings & Functions
Inheritance

• Resonsive Portofolio
• Fancy Form UI from scratch
• SaaS workflow with Gulp

Vanilla JavaScript - Start learning JavaScript without any framework

Data types, functions, conditionals, loops, operators
DOM manipulation and events
JSON
Fetch API
ES6 Arrow functions, Promises, async/await, destructuring

• JS Fundamentals for Beginners
• JavaScript DOM Crash Course
• Vanilla JS Playlist(Projects)

HTML/CSS Framework - HTML/CSS frameworks are becoming bit less relevant but I would suggest learning one. They can make your life much easier and great for prototyping

Bootstrap
Materialize
Bulma
Semantic UI

• Bootstrap Crash Course
• Materialize Crash Course
• Bulma Crash Course

Git & Tooling - Git is absolutely necessary for all web developers. Here are some othe tooling suggestions

Basic Command Line - Use for so much including these tools
Git – Version Control
NPM or Yarn – Installing Packages
Webpack or Parcel - module bundling
Gulp or Grunt – task runners
Editor Extensions – ESLint, Prettier, Live Server etc

• Linux Command Line Basics
• Beginners Guide to the Bash Terminal
• Git Crash Course
• NPM Crash Course
• Yarn Crash Course
• Webpack Crash Course
• Gulp Crash Course
• VS Code Setup Video

Front-end Framework – It is becoming necessity to learn a JS front-end framework

React – Most popular in the industry
Vue – Easy to use and really gaining traction
Angular – Fading a Bit – Used in enterprise
Very popular in the industry
More interactive & interesting UIs
Component & modular front end code
Good for teams

• React Crash Course
• Learn React – React Crash Course
• Vue.js in 60 minutes
• Angular in 60 minutes

State Management - For larges apps with a framework, you may need to learn methods to manage app-lvel state

Concepts(Immutable state, Stores, Reducers, Mutations, Getters, Actions, Observables) Redux, Context API Appollo(GraphQL Client) VueX NgRx

• Reducx Crash Course
• React & Context API Project

Server Side Language - To be a full stack or software engineer, you will need to learn a server-side language /technology

Things to learn - Fundemantal Syntax, Structure & Workflow, Package Management, HTTP/Routing
Node.js
Python
C#
Go
PHP

• Node.js for Beginners
• Node.js Tutorial for Beginners
• Python Programming for Beginners
• Learn Python - Full Course for Beginners
• PHP - Front to Back
• C# Appliation in 60 Minutes
• Go Crash Course

Server Side Framework - Do not reinvent the wheel. Learn a framework to build better and faster

Node.js - Express, Koa, Adonis
Python – Django, Flask
PHP – Laravel, Symfony
C# - ASP.NET

• Express Crash Course
• Koa Crash Course
• Adonis Series
• Django Crash Course
• Flask Series
• Laravel Series
• Symfony Series

Database – Most applications will use some kind of database. There are different types, here are some options

Relational Database – MYSQL, PostgreSQL, MS SQL
NoSQL – MongoDB, Couchbase
Cloud – Firebase, AWS, Azure DocumentDB
Lightweight – SQLite, NeDB, Redis

• SQL Crash Course
• MongoDB in 30 minutes
• Redis Crash Course

Server Rendered Pages – Frameworks like React, Vue & Angular can also be rendered on the server which can actually make things relatively easy

Next.js - React
Nuxt.js - Vue
Angular Universal - Angular

• Next.js Crash Course

CMS – Content management systems allow for quick development and give your clients the ability to update their content. May not be a bad idea to pick one up. Great for freelancers.

PHP Based – Wordpress, Drupal
JS Based – Ghost, Keystone
Python Based – Mezzazine
.NET - Piranha, Orchard CMS

DevOps, Deployment – Learning languages and frameworks is one thing, setting up environments, testing and deployment is another

Deployment – Linux, SSH, Git, Server Software (Nginx, Apache)
Platforms – Digital Ocean, AWS, Heroku, Azure
Virtualization – Docker, Vagrant
Testing – Unit, Integration, Functional, System

• Getting Started with Docker
• Vagrant Crash Course
• Jest Testing
• Deploy Node Apps

Mobile Development – There are some frameworks that allow us to create native apps with web technologies

React Native – Build Native apps with React
NativeScript – Angular, TypeScript, JavaScript
Ionic – Hybrid apps with HTML/CSS/JS
Flutter – Mobile SDK for Android & iOS (Uses Dart)
Xamarin – Mobile apps with C#

• React Native Crash Course
• Ionic Series

Desktop Apps with Electron – Electron is used to build powerful cross-platform desktop applications using JavaScript

Used Chromium & Node.js
Compatible with Windows, Mac & Linux
Crash reporting, debugging & profiling

• Intro to Electron
• Build an Electron App

GraphQL & Apollo – GraphQL is a revolutionary new way to think about APIs. Query language is much less rigid that standard REST.

Ask for only what you want
Front & back end can collaborate more smoothly
Writing queries are very easy and similar to JSON
Apollo is a client to make requests to a GraphQL server
Used with the Gatsby static site generator

• Build a GraphQL Server
• App with React, Apollo &GraphQL

TypeScript – TypeScript is a superset of JS with additional features including static typing

Types of variables, functions
Classes
Other ES6 like features
Used in Angular but can be implemented in React & Vue

• TypeScript Crash Course

Serverless Architecture – Eliminate the need for creating and managing your own server

Used 3rd party services to execute Serverless Functions (Faas) Examples are AWS, Netlify & Firebase Popular with Gatsby static sites Serverless framework – toolkit for building serverless apps

• Lambda Functions with Netlify

AI & Machine Learning – AI & ML have been huge in almost every area of programming & technology including web development

Machine learning can allow web apps to adapt over time
AI has a long way to go but I suspect we will see more of it in web development
Used heavily in Python but we also have JS libraries like Tensorflow.js and Brain.js

• Machine Learning in JavaScript with Brain.js

Blockchain Technology – Companies are using blockchain for digital transactions in order to make them more efficient and secure.

Solidity – Language for implementing contracts
Mist – Used for Storing Ethereum, sending transactions and contracts
Coinbase API – Blockchain des can easily build apps and integrate Bitcoin

Progressive Web Apps – PWA are regular web apps but give the user a native app experience in terms of layout and functionality

Responsive to fit any form factor
Service workers for offline availability
App-like interactions
HTTPS
Reliable, Fast & Engaging

• Intro to Service Workers

Web Assembly – Assembly-like binary format for code that can be executed by the web browsers. Can be generated from higher level languages like C/C++ *& Rust.

Faster than JavaScript Secure - Enforces same origin & security policies in the browser Open & debuggable