Retour • 18/10/2024

Roadmap pour devenir développeur web : uniquement l'essentiel

Écris par Melvyn Malherbe le 18/10/2024

Une roadmap sans bullshit pour devenir développeur web. On part de 0 et on maîtrise le web pour créer des SaaS, devenir freelance ou trouver un job en CDI. Pas le temps, commence à lire.

HTML : la base de toute page web

HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu d'une page web. C'est la fondation sur laquelle repose tout site internet.

Voici un exemple simple de structure HTML :

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page web</title>
</head>
<body>
    <h1>Bienvenue sur ma page</h1>
    <p>Ceci est un paragraphe.</p>
</body>
</html>

Certains vous feront croire que le HTML est compliqué ou super important, je ne suis pas un menteur. Le HTML peut très vite être appris surtout quand on n'a pas encore de CSS. Assure-toi juste de ça :

comprendre les balises
comprendre le concept d'attribut

CSS : donner du style à vos pages

CSS (Cascading Style Sheets) permet de styliser et mettre en forme vos pages HTML. C'est ce qui transforme une page basique en un design attrayant.

Exemple de CSS basique :

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    line-height: 1.6;
    margin-bottom: 20px;
}

Maîtriser les sélecteurs CSS est essentiel, pour les propriétés, c'est beaucoup plus simple. Tu peux taper sur Google "couleur de fond" ou autre et tu trouveras le nom des propriétés facilement. Pas besoin de perdre des heures à s'occuper de tout ça.

JavaScript pour le web

JavaScript est le langage de programmation qui rend vos pages web interactives. Il vous permet de manipuler le DOM, gérer les événements et effectuer des requêtes asynchrones.

Voici un exemple simple d'utilisation de JavaScript :

Ici, pour cette première étape, je te conseille de juste apprendre les bases de JavaScript uniquement pour faire un site web interactif.

C'est ce qui va t'apporter le plus de plaisir et t'éviter de perdre des heures dans la réflexion des concepts compliqués de classe ou autre.

Comprendre le web avec HTTP / API / Methods

Pour devenir un développeur web compétent, il est crucial de comprendre comment fonctionne le web. Cela inclut les protocoles HTTP, les API REST, et les différentes méthodes HTTP (GET, POST, PUT, DELETE, etc.).

Exemple d'utilisation de l'API Fetch pour effectuer une requête GET :

JAVASCRIPT

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Erreur:', error));

Ici, je te conseille de prendre du temps pour te familiariser avec les différents détails et pour ça tu peux aller voir mon article sur comment utiliser fetch.

Ici je t'invite aussi à créer ton premier serveur Fastify ou autre pour apprendre à créer toi-même des API Routes et voir l'envers du décor.

Avant de passer sur un framework complexe, concentre-toi sur comprendre les bases du web !

Le web fonctionne toujours de la même manière et personnellement j'ai créé un cours, BeginWeb pour faire de toi un développeur web rapidement avec toutes les bases que tu peux retrouver ici..

Le SQL et les bases de données

Les bases de données sont essentielles pour stocker et gérer les données de vos applications. SQL (Structured Query Language) est le langage standard pour interagir avec les bases de données relationnelles.

Exemple de requête SQL simple :

SQL

SELECT nom, email FROM utilisateurs WHERE age > 18;

Ici je t'invite à ajouter dans ton backend une database avec SQLite et d'afficher par exemple une simple Todo list en faisant toi-même les requêtes SQL pour apprendre. Par la suite on utilisera des ORM comme Prisma.

Utilisation de Git et de Github

Git est un système de contrôle de version essentiel pour tout développeur. GitHub est une plateforme populaire pour héberger des projets Git et collaborer avec d'autres développeurs.

Commandes Git de base :

BASH

git init
git add .
git commit -m "Initial commit"
git push origin main

Publie le projet que tu auras fait avec Fastify et ta Database SQLite sur GitHub et amuse-toi à commit les changements que tu fais. Si tu veux aller plus loin tu peux même créer des pull requests.

Déployer sur un VPS

Le déploiement de vos applications est une étape cruciale. Utiliser un VPS (Virtual Private Server) vous donne plus de contrôle sur votre environnement de production.

Si tu as le temps, suis une vidéo YouTube pour déployer ton serveur SQLite et Fastify sur un VPS avec des outils simples comme Coolify ou DigitalOcean.

L'algorithmie avec JavaScript

Avant de passer à React, avec les petites bases en JavaScript pour le web que tu as je te conseille de vraiment pratiquer un peu d'algorithmie.

L'algorithmie est fondamentale pour résoudre des problèmes complexes et optimiser vos applications. Pratiquez régulièrement la résolution de problèmes algorithmiques en JavaScript.

Exemple d'algorithme de tri à bulles en JavaScript :

JAVASCRIPT

function bubbleSort(arr) {
  const n = arr.length;
  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        // Échange
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}

console.log(bubbleSort([64, 34, 25, 12, 22, 11, 90]));

React ou Vue.js

Choisissez un framework JavaScript moderne comme React ou Vue.js pour construire des interfaces utilisateur dynamiques et réactives.

Exemple de composant React simple :

JSX

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>
        Cliquez ici
      </button>
    </div>
  );
}

export default Counter;

J'ai créé une formation React complète que tu peux retrouver juste ici ! Mais je te conseille de vraiment prendre le temps de comprendre chaque concept de React avant de passer à la suite.

Application Fullstack avec Next.js ou Nuxt.js

Next.js (pour React) et Nuxt.js (pour Vue) sont des frameworks fullstack qui permettent de créer des applications web complètes avec rendu côté serveur.

Exemple de page Next.js avec récupération de données :

JSX

import { useEffect, useState } from 'react';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);

  if (!data) return <div>Chargement...</div>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

NextJS va te permettre de créer :

des server-components pour récupérer des données
des server-actions pour modifier des données
des api Routes
des pages complètes avec des layouts, erreurs et chargement

Conclusion

Cette roadmap va te permettre d'avoir les compétences de base. Il y a plein de ressources que je peux te donner mais mes cours gratuits sur ces sujets sont sûrement les meilleurs :

Tu vas kiffer j'en suis sûr 🚀