navigation

Welcome

Welcome to Dev Handbook, a practical web development handbook with notes, tutorials, and code examples for front-end developers.

In this handbook you will find handy references across the main areas of web development:

Created and maintained by Hannah Wood . Visit the About page to learn more about the work behind this handbook.

Web Development Guide

Basic tools

  • Computer: macOS, Linux, Windows
  • Text Editor: VSCode
  • Web Browser: Chrome, Firefox
  • Terminal: Bash
  • Design: Canva, Photoshop, Sketch
  • Git & GitHub
  • Chrome Dev Tools
  • Package manager: NPM or Yarn

Frontend Web development

1. HTML, CSS

  • HTML5
  • CSS Fundamentals
  • CSS Grid & Flexbox
  • CSS Transition
  • Sass (variables, nesting, conditionals)
  • CSS Frameworks (Bootstrap, Tailwind)

2. Responsive Design

  • Viewport
  • Media queries
  • Mobile-first responsive design

3. Vanilla JavaScript

  • Fundamentals
  • Modern JS (ES6+)
  • DOM (Document Object Model)
  • JSON
  • Fetch API

4. Web Deployment

You should learn how to deploy a website to a web server.

  • Domain registration (Namecheap)
  • Static hosting (Netlify, GitHub Pages)
  • Managed hosting
  • SSL Certificate
  • FTP (File Transfer Protocol)
  • SSH

5. Front-end Framework

Choose one of these front-end frameworks to learn:

6. Static site generators

Static site generators offer better SEO, file system routing, data fetching, plugins, and GraphQL.

Some popular static site generators:

  • Next.js / Gatsby (React)
  • Hugo (Go)
  • Nuxt (Vue)

Backend Web Development

1. Server-side language

Pick one of the following:

  • PHP
  • Python
  • Node.js
  • Golang

2. Server-side framework

  • PHP: Laravel
  • Python: Django, Flask
  • Node.js: Express

3. Database

SQL and one of the following:

  • Relational: MySQL, PostgreSQL
  • NoSQL: MongoDB
  • Cloud: AWS, Firebase
  • Lightweight: SQLite

4. Content Management System (CMS)

  • Traditional CMS: WordPress, Drupal
  • Headless CMS: Contentful, Sanity

5. Deployment

  • SSH
  • Web server environment: NGINX, Apache
  • App hosting: Heroku, Render, AWS
  • Testing
  • Security

Learning resources

These sites are great for learning web development: