Web development


Web development is usually divided between two sides:

πŸ‘² Front-end πŸ‘²

This is what is displayed to the user.

  • Bootstrap, tailwindcss...
  • Vue.js, React, Angular, Ionic
  • ...

🌍 Back-end 🌍

The servers, the databases, and everything else.

  • PHP, Django, Symfony, Laravel...
  • SQL, NoSQL
  • Node.js, Express.js, Nest.js...
  • ...

There is also πŸ‘‘ Full-Stack πŸ‘‘ which is both the front-end and the back-end, along Mobiles (React Native...) and Desktops (Electron...).

Get Started


A client is a browser that will be used to access a website. Most of the front-end languages can be used without a server:

  • HTML
  • CSS
  • JavaScript

Simply drag and drop your HTML file inside your browser. Notice that the protocol is file:// instead of http:// or https://.


Most apps use a client-server approach. A client will request pages of a website (HTML, CSS, JS...) to a web server that can use a server-side technology to generate them.

It means that we need to set up a web server:

  • We often use Apache or nginx for PHP apps.
  • Node.js apps are usually creating a server from the code.

➑️ See also: Web server Routing.

➑️ To upload files to a remote server, use: SCP, FileZilla, etc.

😍 Developer tools (devtools) 😍

The devtools are tools for developers. You can open it using

  • F12 or Left-click > Inspect ✨
  • Settings > ... tools > development tools πŸ˜…

The 4 most used tools are

  • Tools > elements (CTRL+SHIFT+I): see/edit the HTML/CSS
  • Tools > (CTRL+SHIFT+C): select an element and see the corresponding HTML code in the Element tab.
  • Tools > (CTRL+SHIFT+M): preview the website on a phone...
  • Tools > Console: execute some JavaScript, try: 41+1

There are a lot more tools. If some are not available for you, you may have to enable them (see "+" in Edge, see "... > more tools" in Chrome...).

  • Tools > Sources πŸ•΅οΈ: see the code source of the page
  • Tools > Application πŸͺ„: see the local storage, the cookies, etc.
  • Tools > Problems 🧟: you can see problems using webhint
  • Tools > LightHouse πŸ₯‡: you can see the evaluation of a page by LightHouse (Google)

➑️ There is also a color picker, allowing you to find which color was used somewhere on a website.

πŸ‘» To-do πŸ‘»

Stuff that I found, but never read/used yet.