--- 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`