Roadmap pour devenir développeur web : uniquement l'essentiel
18/10/2024 • Melvynx
Loading...
18/10/2024 • Melvynx
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 (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 :
<!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 :
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 :
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 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 :
[
{
"code": "invalid_type",
"expected": "number",
"received": "string",
"path": [
"height"
],
"message": "Expected number, received string"
}
]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.
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 :
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..
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 :
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.
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 :
git init
git add .
git commit -m "Initial commit"
git push origin mainPublie 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.
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.
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 :
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]));Choisissez un framework JavaScript moderne comme React ou Vue.js pour construire des interfaces utilisateur dynamiques et réactives.
Exemple de composant React simple :
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.
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 :
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 :
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 🚀