Web development

introductiontowebapplications

Web development is usually divided between two sides:

👲 Front-end 👲

This is what is displayed to the user.

  • HTML, CSS, JS
  • 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

Client

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://.

Server

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.