Skip to content

Latest commit

 

History

History
658 lines (551 loc) · 28 KB

README.md

File metadata and controls

658 lines (551 loc) · 28 KB
Raw

A Practical Guide: Web Development

This guide is a compilation of resources for full stack web development.

The layout of this guide is borrowed from Traversy Media's Web Development Guide with additional links to resources.

Everything Is AWESOME

Table of Contents

General Resources

Getting Started

Basic Software & Tools

Basic tools for web development

The Building Blocks

HTML & CSS

Always the very first thing to learn

What to be proficient in:

  • Semantic HTML5 Elements
  • Basic CSS (Positioning, box model, etc)
  • Flexbox & CSS Grid
  • CSS Variables (Custom Properties)
  • Browser Dev Tools

Resources:

Responsive Layout

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

What to be proficient in:

  • Set Viewport
  • Fluid Widths
  • Media Queries
  • REM Over PX
  • Mobile First, Stacked Columns

Resources:

Make It Live

Basic Deployment

Learn to deploy a static website

Resources:

Better CSS

Sass Pre-Processor

Not mandatory but recommended. It is easy enough to learn the basics

What to be proficient in:

  • Structured CSS
  • Variables
  • Nested CSS
  • Mixins & Functions
  • Inheritance

Resources:

Get Dynamic

Vanilla JavaScript

Start learning JavaScript without any library or framework

What to be proficient in:

  • Data Types, Functions, Conditionals, Loops, Operators
  • DOM Manipulation & Events
  • JSON
  • Fetch API
  • ES6+ (Arrow Functions, Promises, Async/Await, Destructuring)

Resources:

You're Skill Set

Basic Front-End Web Developer

At this point, if successfully learnt and practiced the above technologies, it is possible to find an entry level job, but you are most likely going to need to know more. Freelancing is a possibility...

You Should Be Able To:

  • 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 Mantain Wesbites

Now What?

What To Learn Next

What to do next depends on what you want to do. You have a few choices

  • HTML/CSS Framework
  • Git & Tooling
  • Front End JS Framework
  • Server Side Language & Database

Easier UI's & Prototyping

HTML/CSS Framework (Choose One)

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

Resources:

Your Workflow

Git & Tooling

Git is absolutely necessary for all web developers. Here are some other tooling suggestions

Resources:

JavaScript

Front-End Framework

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

  • Very popular in the industry
  • More interactive & intersting UIs
  • Components & modular front end code
  • Good for teams

Most Common Front-End Frameworks:

  • React - Most popular in the industry
  • Vue - Easy to use and really gaining traction
  • Angular - Fading a bit, used in enterprise

Resources:

State Management

For larger apps with a framework, you may need to learn methods to manage app-level state

What to be proficient in:

  • Immutable State
  • Stores
  • Reducers
  • Mutations
  • Getters
  • Actions
  • Observables

Resources:

You're Skill Set

Full Fledged Front-End Web Developer

At this point, you should be able to get a front-end job or work for yourseld and do pretty well

You Should Be Able To:

  • Build incredible front-end applications
  • Smoot & steady front-end workflow
  • Work well with teams & familiar with Git
  • Connect to backend API's & work with data

Backend Programming

Server Side Language (Choose One)

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

What To Be Proficient In:

  • Fundamental Syntax
  • Structure & Workflow
  • Package Management
  • HTTP / Routing

Resources:

Server Side Framework (Choose One)

Do not reinvent the wheel. Learn a framework to build better and faster

Resources:

Database (Choose One or Two)

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

Resources:

Full Stack Programming

Server Rendered Pages

Frameworks like React, Vue & Angular can also be rendered on the server which can actually make things relatively easier

Resources:

Content Management System (CMS) (Choose One)

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

Resources:

DevOps, Deployment & More

Learning languages and frameworks is one thing, setting up environments, testing & deploying is another

Resources:

You're Skill Set

Full Stack Badass

You are a frigging rockstar!

You Should Be Able To:

  • Setup full stack dev environments & workflows
  • Build back-end APIs & micro-services
  • Work with databases
  • Construct full-stack apps (Front-end framework & server)
  • Deploy to the cloud (SSH, Git, Servers, etc)

Beyond The Browser

Mobile Development (Choose One)

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

Resources:

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

Resources:

2019 Trends

GraphQL & Apollo

GraphQL is a revolutionary new way to thing 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 requests to a GraphQL server
  • Used with the Gatsby static site generator

Resources:

TypeScript

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

What To Be Proficient In:

  • Types for variables, functions, etc
  • Classes
  • Other ES6-like features
  • Used in Angular but can be implements in React & Vue

Resources:

Serverless Architecture

Eliminate the need for creating and managing your own server

  • Use 3rd party services to execture "Serverless Functions" (FaaS)
  • Examples are AWS, Netlify & Firebase
  • Popular with Gatsby static sites
  • Serverless framework - Toolkit for building serverless apps

Resources:

AI & Machine Learning

AI & Machine Learning 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 Tenserflow.js and Brain.js

Resources:

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 strong Ethereum, sending transactions & contracts
  • Coinbase API - Blochain devs can easily build apps and integrate Bitcoin

Resources:

Progrssive Web Apps (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

Resources:

Web Assembly

Assembly-like binary format for code that can be executed by 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

Resources:

Contributing

If you would like to add quality resources to this guide, open a pull request. All I ask you is to follow the way I've been linking resources in this guide.