---
title: 'Web Development In 2019 - A Practical Guide'
disqus: lvltcode
---
Web Development In 2019 - A Practical Guide
===
License: [Youtube Video](https://www.youtube.com/watch?v=UnTQVlqmDQ0)
Basic software and tools
---
* VS Code
* Chrome
* Adobe XD
* Git Bash
I. Front-end Developer
===
HTML & CSS
---
* Semantic HTML5 Elements
* Basic CSS (positioning, box model...)
* Flexbox & CSS Grid
* CSS Variables (Custome properties)
* Browser Dev Tools
**Youtube**: CSS grid Crash course
Responsive Layout
---
* Set viewport
* Fluid widths
* Media queries
* rem over px
* Mobile first stack columns
**Youtube**:
* Build an HTML5 Website With a Responsive Layout
* Responsive Landing Page
* Build a Responsive Mobile first Website
* Pluralsight Login Page Clone
Basic Deployment
---
* Register a Domain Name (namecheap)
* Manage shared hosting or VPS (Inmotion)
* FTP, SFTP file upload (Filezilla)
* Static hosting (need to know git) - Netlify
**Youtube**:
- Web Hosting & cPanel Guide
- Github Deploy & Domain
Sass Pre-Processor
---
* Structured CSS
* Variables
* Nested CSS
* Mixins & Functions
* Inheritance
**Youtube**
* Responsive Porfolio Website Series
* Fancy Form UI from Scratch
* Sass workflow with Gulp
Vanilla Javascript
---
* Data types, function, conditionals, loops, operators
* DOM Manipulation & Events
* JSON
* Fetch API
* ES6+ (Arrow functions, promises, async/await, destructuring)
**Youtube**
* JS Fundamentals For Beginners
* JavaScript DOM Crash Course
* Vanilla JS Playlist (Projects)
## Level 1 - Basic Front-End Web Developer
* Build static websites (Small business, informational)
* Build UI layouts (Take a design and create the HTML/CSS)
* Add dynamic functionality (modals, slideshows, etc)
* Deploy and maintain websites
*It is posible to find an entry level job, but you are most likely going to need to know more.
What Next?
---
Depends:
* HTML/CSS Framework (Bootstrap)
* Git & Tooling
* Front End JS Framework (ReactJS)
* Server Side Language & Database (PHP, Python, C#)
HTML/CSS Framework (Bootstrap)
---
* Bootstrap 4 (|| Materialize || Bulma )
**Youtube**:
* Bootstrap Crash Course
* Materialize Crash Course
* Bulma Crash Course
Git & Tooling
---
* Basic Command Line
* 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
**Youtube**
* Linux Command Line Basics
* Git Crash Course (at least 10 commands)
* NPM Crash Course
* Yarn Crash Course
* Webpack Crash Course
* Gulp Crash Course
* VSCode Setup Video
Front End JS Framework (Choose One)
---
* **React** - Most popular in the industry
* Vue - easy to use and really gaining traction
* Angular - Fading a bit, Used in enterprise
**Youtube**
* React Crash Course
* Vue.js in 60 minutes
* Angular in 60 minutes
* Project Series
State Management (Javascript)
---
*For larger apps with a framework, you may need to learn methods to manage app-level state
* **Redux, Context API (Reacts)**
* Apollo (GraphSQL Client)
* VueX (Vue)
* NgRx (Angular)
**Concepts**: Immutable State | Stores | Reducers | Mutations | Getters | Actions | Observables
**Youtube**
* Redux Crash Course
* React & Context API Project
## Level 2 - Full Fledged Front-End Web Developer
* Build incredible front-end applications
* Smooth & steady front-end workflow
* Work well with teams & familiar with Git
* Connect to backend APIs & work with data
*You should be able to get a front-end job or work for yourself and do pretty well
II. Backend Programming
===
Server Side Language (Choose One)
---
* **Node.js**
* Python (choose this if you want to learn Machine Learning, AI in future)
* PHP
* C#
* Go
**Things To Learn**: Fundamental Syntax | Structure & Workflow | Package Management | HTTP/Routing
**Youtube**
* Node.js For Beginners
* Python Fundamentals
* PHP Front to Back
* C# Projects in 60 minutes
* Go Crash Course
Server Side Framework (Choose One)
---
* Node.js: Express
* Python: Django (Speed), Flask (Freedom)
* PHP: Laravel
* C#: ASP.NET
**Youtube**
* Express Crash Course
* Django Crash Course
* Flask Series
* Laravel Series
* C#.NET App in 60 minutes
Database (Choose One or Two)
---
* Relational Database: MySQL, **PostgreSQL**, MS SQL
* NoSQL: **MongoDB**, Couchbase
* Cloud: **Firebase** (small app), AWS, Azure DocumentDB
* Lightweight: SQLite, NeDB, Redis
**Youtube**
* 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 easier
* **Next.js** (React)
* Nuxt.js (Vue)
* Angular Universal (Angular)
**Youtube**
Next.js Crash Course
CMS (Fast Projects - Choose One)
---
*Content Management System (Website Builder) 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**
* JS Based: Ghost, Keystone
* Python Based: Mezzazine
* .NET: Piranha, Orchard CMS
**Youtube**
III. DevOps, Deployment & More (Full Stack Programming)
===
*Setting up enviroments, testing & deployment*
* Deployment: Linux, SSH, Git, Server Software(**Nginx**, Apache)
* Platforms: **Digital Ocean**, AWS, **Heroku**, Azure
* Virtualization: **Docker**, Vagrant
* Testing: Unit, Integration, Functional System.
**Youtube**
* Getting Started With Docker
* Vagrant Crash Course
* Jest Testing
* Deploy Node Apps
## Level 3: Full Stack Badass
* Setup full stack dev environments & workflows
* Build back-end APIs & mirco-services
* Work with databses
* construct full-stack apps (Front-end framework & server)
* Deploy to the cloud (SSH, Git, Servers, etc)
IV. Beyond the Browser - Mobile Development
===
* **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#
**Youtube**
* React Native Crash Course
* Ionic Series
Desktop Apps With Electron
---
*Electron is used to build powerful cross-platform desktop applications using JavaScript*
* Uses Chromium & Node.js
* Compatible with Windows, Mac & Linux
* Crash reporting, debugging & profiling
VSCode & Atom & Postman build by Electron
V. 2019 Trends
===
GraphQL & Apollo
---
*GraphQL is a revolutionary new way to think about APIs. Query language that is much less rigid than 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 reuests to a GraphQL server
* Used with the Gatsby statis site generator
**Youtube**
* Build a GraphQL Server
* App with React, Apollo & GraphQL
TypeScript
---
*TS is a superset of JS additional features including static typing*
* Types for variables, functions, etc
* Classes
* Other ES6-like features
* Used in Angular but can be implemented in React & Vue
**Youtube**
* TypeScript Crash Course
Serverless Architecture
---
*Eliminate the need for creating and managing your own server*
* use 3rd party services to execute "Serverless Functions" (FaaS)
* Examples are AWS, **Netlify** & Firebase
* Popular with Gatsby static sites
* Serverless framwork (Toolkit for building serverless apps)
**Youtube**
* Lambda Functions With Netlify
AI & Machine Learning
---
* Machine learning can allow web apps to adapt over time
* AI has a long way to go, see more in web dev.
* Used heavily in Python but we also have JS libraries like Tensorflow.js and Brain.js
**Youtube**
* Machine Learning in Javascript With Brain.js
Blockchain Technology
---
* Solidity: Language for implementing contracts
* Mist: Used for storing Ethereum, sending transactions & contracts
* Coinbase API: Blockchain devs can easily build apps and integrate Bitcoin
PWA
---
Progressive Web Apps 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
**Youtube**
* Intro to Service Workers
Web Assembly
---
* Faster than Javascript
* Secure - Enforces same origin & security policies in the browser
* Open & debuggable
###### tags: `Web Development` `Guide 2019` `Fullstack Web`