Learn Web Development

A web developer is responsible for implementing website functionality as opposed to a web designer who is responsible for designing the look and feel of it.

• The #1 resource for web development is MDN - The Mozilla Developer Network
• Frontend Masters Free Bootcamp
• Frontend Masters Internet Fundamentals videos

• How the Web works

• FreeCodeCamp
• LevelUp Tutorials
• WebDev Simplified YouTube Channel is all about teaching web development skills and techniques in an efficient and practical manner.
• The Front End Developer Handbook 2024 lists the most popular libraries and frameworks in front end development today
• Can I Use? provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers
• What Web Can Do Today - An overview of the device integration HTML5 APIs
• Quirksmode.org is the prime source for browser compatibility information on the Internet.
• Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.
• W3C Markup Validation Service
• Build a Space Travel Website with Frontend Mentor

Hosting Services

• Hostinger
• Render.com
• Vultr

Tools

IDE's and Editors

Check out this fine article on IDEs

• Visual Studio Code. See also:
  • Awesome VSCode
  • VSCode Playlist
  • Become a VSCode Superhero
• Sublime Text is a sophisticated text editor for code, markup and prose.
• Nuclide - A unified developer experience for web and mobile development, built as a suite of packages on top of Atom to provide hackability and the support of an active community.
• Atom (old)
• Vim
• Phoenix Code
• WebStorm by JetBrains is a lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js

Cloud IDE's and Editors

• AWS Cloud9
• CodePen
• CodeSandbox - An instant IDE and prototyping tool for rapid web development.
• JS Fiddle
• JSON Editor Online
• StackBlitz - Create, edit & deploy fullstack apps

Browsers

• Chrome
• Firefox

Terminal Emulators

• Powershell
• Git Bash
• Zsh
• Hyper
• iTerm
• Bash

Design Tools

• Figma
• Adobe XD
• Sketch
• Photoshop
• Resources
  • Design Course YouTube Channel
  • Adrian Twarog YouTube Channel

HTML

• State of HTML 2024
• Best Practices
• Semantic HTML
• Forms & Validation
• Accessibility
• SEO
• Resources
  • HTML Crash Course Video

CSS

• Basics
• Flexbox
• CSS Grid
• Custom Properties
• Transitiona/Animations
  • Plain CSS
  • GSAP
  • anime.js
• Responsive Design
  • Mobile First
  • Rem units
  • Viewport
  • Fluid widths
  • Media Queries
• CSS Preprocessors
  • Sass
  • PostCSS

Front-End Development

JavaScript

• Basic Syntax
• DOM Manipulation
• Fetch API
• JSON
• ES6+
• Resources
  • JS Tutorial for Beginners
  • Learn JSON in 10 mins
  • JavaScript Playlist codeSTACKr
  • JavaScript Shorts codeSTACKr
  • TypeScript - The Basics by Fireship

Front-End Frameworks

• List of frameworks
• Framework Resources
  • React Playlist - codeSTACKr
  • Vue - Program with Erik
  • Vue - Faraday Academy
  • Angular Crash Course - Traversy Media
  • Svelte Crash Course - Traversy Media

Server-Side Rendering (SSR)

• Nuxt.js for Vue
• Next.js for React
• SvelteKit for Svelte

Static Site Generators

• Gatsby for React
• Next.js for React
• Nuxt.js for Vue
• Gridsome for Vue
• 11ty - Eleventy, a simpler static site generator.
• HUGO - A fast and modern static website engine
• Publican is a simple HTML-first static site generator for Node.js
• Vitepress - Vite & Vue-Powered Static Site Generator

Tools

Package Managers

• npm, pnpm
• yarn

Task Runners

• npm scripts
• Gulp

Linters/Formatters

• ESLint
• Prettier

Module Bundlers

• Parcel
• Rollup
• Vite
• Webpack

Other

• Version Control - Git + Github
• GraphQL (Apollo)
• Progressive Web Apps (PWA)
• JAMStack
• Speech Recognition
• Web Assembly