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.
Table of Contents
- General Resources
- Getting Started
- The Building Blocks
- Make It Live
- Better CSS
- Get Dynamic
- You're Skill Set
- Now What?
- Easier UI's & Prototyping
- Your Workflow
- JavaScript
- You're Skill Set
- Backend Programming
- Full Stack Programming
- You're Skill Set
- Beyond The Browser
- 2019 Trends
- Contributing
General Resources
- Youtube Channels
- Articles
- Curriculum-like Learning / Free resources
- Practice
- Paid Resources
Getting Started
Basic Software & Tools
Basic tools for web development
- Text Editor or IDE:
- Web Browser:
- Design & Mockup (Optional):
- 3rd Party Terminal (Optional):
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:
- Youtube Videos
- Udemy Courses
- Articles
- Books
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:
- Youtube Videos
- Articles
Make It Live
Basic Deployment
Learn to deploy a static website
- Register a Domain Name:
- Managed Shared Hosting or VPS:
- FTP or SFTP File Upload:
- Static Hosting (Need to know Git):
Resources:
- Youtube Videos
- Articles
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:
- Youtube Videos
- Articles
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:
- Youtube Videos
- Udemy Courses
- Articles
- Books
- Practice
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:
- Youtube Videos
- Articles
- Scrimba
- Udemy
Your Workflow
Git & Tooling
Git is absolutely necessary for all web developers. Here are some other tooling suggestions
- Basic Command Line (Used for so much including these tools)
- Git
- NPM or Yarn (Installing packages)
- Webpack or Parcel (Module bundling)
- Gulp or Grunt (Task runners)
- Editor Extensions (ESLint, Prettier, Live-Server, etc...)
Resources:
- Youtube Videos
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:
- Youtube Videos
- Articles
- Scrimba
- Udemy Courses
State Management
For larger apps with a framework, you may need to learn methods to manage app-level state
- Redux, Context API
- Apollo (GraphQL Client)
- VueX
- NgRx
What to be proficient in:
- Immutable State
- Stores
- Reducers
- Mutations
- Getters
- Actions
- Observables
Resources:
- Youtube Videos
- Udemy Courses
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:
- Youtube Videos
- Udemy Courses
Server Side Framework (Choose One)
Do not reinvent the wheel. Learn a framework to build better and faster
Resources:
- Youtube Videos
Database (Choose One or Two)
Most applications will use some kind of database. There are different types, here are some options...
- Relational Database:
- NoSQL:
- Cloud:
- Lightweight:
Resources:
- Youtube Videos
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
- Next.js - React
- Nuxt.js - Vue
- Angular Universal - Angular
Resources:
- Youtube Videos
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
- PHP Based:
- JS Based:
- Python Based:
- .NET:
Resources:
- Youtube Videos
DevOps, Deployment & More
Learning languages and frameworks is one thing, setting up environments, testing & deploying is another
- Deployment:
- Platforms:
- Virtualization:
- Testing:
- Unit
- Integration
- Functional
- System
Resources:
- Youtube Videos
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
- 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#
Resources:
- Youtube Videos
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:
- Youtube Videos
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:
- Youtube Videos
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:
- Youtube Videos
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:
- Youtube Videos
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:
- Youtube Videos
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:
- Youtube Videos
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:
- Youtube Videos
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.