Apprendre le développement web : HTML, CSS, JS

Apprendre la programmation web ?

Voici une liste de tous les langages à maîtriser pour devenir développeur web.

Je fais volontairement la différence entre le front-end (HTML, CSS, JS) et le back-end (côté serveur avec la base de données).

Si tu souhaites devenir développeur web, tu vas devoir passer par toutes ces étapes afin de savoir ce qui te correspond le mieux, car des métiers dans le monde du web, il y en a plein :

• Développeur front(-end) / back(-end)
• Développeur fullstack
• DevOps
• Data analyst
• Développeur mobile (Android / IOS / …)
• Intégrateur web
• …

Avant de commencer le développement web

Si tu débutes l’apprentissage du développement web, il est très important que tu passes par la pratique !

Lire des tutos sans pratiquer ne te fera JAMAIS progresser.

Pour commencer à pratiquer, installe tout de suite un éditeur de code comme VSCode.

De cette manière dès que tu voudras commencer à coder, tu n’auras rien à installer.

C’est également très important d’avoir un projet en tête pour commencer.

Avoir un projet te permettra d'apprendre beaucoup plus rapidement et de manière ludique !

Ça te motivera également davantage.

Si tu n’as pas d’idée de projets voici quelques idées :

• Faire son CV en ligne
• Créer son site web perso (comme un portfolio)
• Proposer à un ami de lui créer son site
• Faire une application web suite à une de tes idées

Si vraiment tu n'as pas d'idée, tu peux faire une todo list. C'est amusant à faire et ça couvre pas mal de notions du web.

Autrement tu peux trouver de l’inspiration dans cet article : comment gagner de l’argent en tant que développeur.

HTML

Le HTML est un format interprété et affiché par le navigateur suivant le moteur de rendu qu’il propose.

Chaque moteur affiche le HTML de manière différente car il doit le lire pour ensuite le comprendre.

C’est pour cela que le rendu change de Chrome à Firefox, le moteur est différent.

Commencer par le HTML c'est la garantie de bien comprendre comment sont affichées les pages web.

C’est un pré-requis nécessaire au fait de devenir développeur web.

Tu as déjà dû entendre parler des balises HTML5 ?

Ce sont des marqueurs destinés à rendre plus compréhensible les balises HTML pour les robots qui les exploitent (comme celui de Google).

Par exemple ici, la balise main n’a aucune différence avec une div.

Cependant de part son nom, on saura qu’elle comporte le contenu principal de la page.

Malinx !

Où apprendre le HTML ?

• Le tutoriel HTML de Mozilla (MDN)
• Introduction HTML w3schools
• Cours OpenClassroom
• Vidéos de Grafikart : Apprendre l’HTML

CSS

Le CSS permet d’appliquer du style à des éléments HTML : comme une couleur, des bords arrondis…

Le CSS est assez abordable dans son ensemble, car les noms sont assez transparents.

background-color: blue;

On comprend assez facilement que l’élément qui contient cela verra son fond devenir bleu.

Néanmoins le CSS peut-être très complexe… On peut faire des portraits de personnes, directement en CSS (avec du HTML bien sûr).

Heureusement la plupart du temps lorsque l’on fait de l’intégration HTML, on applique surtout du style sur des boutons, des menus, des liens…

Finalement, voici le code que l’on aura besoin de produire pour faire un simple bouton orange.

Où apprendre le CSS ?

N’oublie pas qu’avant d’apprendre le CSS, tu dois d’abord bien maitriser HTML.

• Le tutoriel CSS de Mozilla (MDN)
• Vidéos de Grafikart : Apprendre le CSS

JavaScript

Le JavaScript (JS) est le seul langage informatique que le navigateur comprend (en tout cas pour le moment).

Le JavaScript permet d’interagir avec la page, par exemple un clic sur un bouton ou le chargement d’une ressource.

On peut également faire des requêtes vers d’autres sites comme des API.

document.getElementById("main");

Cela permet de récupérer l’élément HTML ayant pour ID main.

On peut par exemple lui appliquer un style directement en JavaScript pour rendre notre site web dynamique.

La MDN donne un petit exemple pour mieux comprendre.

Où apprendre le JavaScript ?

• Vidéos de Grafikart : Apprendre le Javascript
• Vidéos de John Taieb : Cours Javascript

Ligne de commande

Les lignes commandes sont souvent utilisées par les développeurs pour lancer des projets ou pour installer des dépendances.

En tant que futur développeur web, tu verras que tu les utilises souvent.

Les interfaces graphiques sont lourdes et parfois inutiles pour lancer un petit bout de coder.

npm install bootstrap

Cette simple ligne permet par exemple de lancer la commande npm avec l’argument install et le paramètre bootstrap.

Ce genre de commande, tu vas souvent être amené à en lancer.

Où apprendre la ligne de commande ?

Suivant le système d’exploitation que tu utilises, les commandes ne seront pas les mêmes.

• Julien Dubreuil : Les commandes de bases Linux / MacOS

Git

Git permet de versionner ses fichiers et de les partager avec d’autres développeurs.

Expliquer Git serait trop long et de très bons tutoriels l’expliqueront mieux que moi.

Il ne faut par ailleurs pas confondre Git et Github 🙂

Github permet de mettre du code via Git et de l'exposer à d'autres développeurs.

Une fois que tu maitriseras git, il est très important que tu comprennes le git flow.

La plupart des procédures de livraisons de code utilisent ce système.

Où apprendre Git ?

• Pierre Giraud : Apprendre git et github
• Vidéo de Graven : Les bases de git

Sass et SCSS

Ce sont des langages de programmations destinés à améliorer l’écriture du code CSS.

Ces langages ne sont pas interprétés par le navigateur et doivent être compilés avant.

Ils permettent de gagner beaucoup de temps et de séparer les feuilles de style de manière propre (on évite de tout mettre dans une seule grosse feuille de style style.css).

Que choisir entre Sass et SCSS ?

Tous les deux utilisent le même moteur de rendu.

Le code sera compilé exactement de la même manière.

Ce qui fera la différence c’est la syntaxe du langage de programmation.

C’est une question de goût.

Où apprendre Sass et SCSS ?

Il n’y a rien de très compliqué quand on sait déjà coder en CSS.

Sass apporte surtout des petites astuces pour réduire la taille du code et mieux organiser ses fichiers.

• Le guide officiel de Sass est très bien fait, en 10 minutes tu auras fait le tour.
• Tutorialspoint : Sass Overview

Pour la mise en place de Sass, tu auras toujours des outils clés en main pour t’aider.

Mais si tu veux l’installer tout seul, consulte la page d’installation de Sass.

Le web design

Les développeurs ne sont pas toujours sensibles au graphisme.

Pour ma part, j’ai même détesté ça pendant un moment.

Aligner des div, c'est galère !

J’ai dû apprendre le design et désormais, j’adore ça.

N’oublions pas que le design influe sur énormément de choses, notamment celles-ci :

• La fiabilité du site (avec un site moche on ne te prend pas au sérieux)
• Les taux de conversion (le site doit donner envie)

L’habit fait le moine.

Si tu es développeur front, tu dois absolument développer une sensibilité graphique.

Comment apprendre le web-design ?

J’étais nul en design (je le suis désormais un peu moins), mais j’ai pu m’améliorer.

Pour preuve, j’ai fait le design de ce blog tout seul et j’en suis assez fier !

Pour apprendre le design

• Si tu es vraiment nul, utilise des frameworks CSS comme Bulma avec des boutons déjà tout fait, ils sont déjà tout beaux, ça te donnera une ligne directrice ;
• Regarde les sites internet ayant les meilleurs design ;
• Fais de la veille, sur Dribbble par exemple ;
• Essaye d’intégrer une équipe côté front (même si les clients viennent souvent avec une maquette, tu assimileras des choses en l’intégrant) ;
• Sois curieux, suis les tendances comme le Material Design ;
• Utilise Google pour t’améliorer, par exemple si tu crées un portfolio, tape « design portfolio » ;
• Suis des formations.

Framework CSS

Les frameworks CSS sont des outils créés par d’autres développeurs web et mis à disposition, le plus souvent gratuitement pour la communauté.

Le principe des frameworks CSS est le suivant :

Plutôt que de réinventer la roue, utilise des éléments que d'autres développeurs ont fait avant toi.

Le but, c’est de te simplifier la vie.

Par exemple, tu cherches à créer une barre de progression pour ton application.

En utilisant un framework CSS, voici ce que tu peux faire, en une seule ligne de HTML (le style est inclût dans le framework).

Quel framework CSS choisir ?

Il existe beaucoup de framework CSS, tous ont leur particularité.

En voici quelques-uns.

• Bootstrap (le plus connu)
• Bulma (une belle alternative à Bootstrap)
• Tailwind (le plus à la mode en ce moment)
• Milligram (le plus minimaliste)

Framework JavaScript (JS)

Les frameworks JavaScript sont d’une telle popularité qu’aujourd’hui, des développeurs front-end sont spécialisés sur certaines technos JS comme Angular, React ou Vue.

* Je ne fais pas de distinction entre Framework et Library afin de rendre cette section plus abordable.

Les développeurs spécialisés dans des technos ont souvent moins de mal à trouver du travail en tant que développeur web.

Quel framework JS choisir ?

Tout dépend de ton besoin et de tes affinités avec le framework.

Tu peux aussi te baser sur la communauté et les recherches d’emploi pour ce framework.

Les 3 frameworks dont on parlait plus haut sont les tops des frameworks JS.

Cependant Svelte est aussi en train de gagner de plus en plus en popularité.

Finalement peu importe ton choix, si tu choisis un de ces quatre-là tu es sûr de ne pas perdre.

Langage de programmation back-end

Afin de pouvoir récupérer du contenu, tu vas avoir besoin d’utiliser des APIs.

Les APIs sont des routes exposants des données.

Par exemple si tu souhaites afficher une liste d’utilisateurs depuis le Front, tu peux appeler la route suivante :

GET https://jsonplaceholder.typicode.com/users

Et cette API te renverra une liste d’utilisateurs au format JSON.

C’est le genre de données que l’on expose côté back-end.

Les contrôleurs appellent généralement des ressources dans une base de données.

On se sert des APIs pour créer, supprimer, mettre à jour des informations...

Aussi simple que cela !

Le back-end comporte aussi des notions de sécurité, des queues, de la validation de données, de l’envoi de mail, de l’authentification, des imports, etc.

Quel langage back-end choisir ?

Chaque langage dispose de ses propres frameworks, encore une fois.

Là où JavaScript propose quelques frameworks pour le front, le back est bien plus riches en technologies.

• ASP.NET (le langage de Microsoft)
• GoLang (le langage de Google, pas pour les débutants)
• JakartaEE / Spring Boot (faire du web en Java)
• NodeJS (faire du javascript côté back)
• Ruby On Rails (très à la mode de par sa simplicité)
• PHP (le langage utilisé par WordPress, le plus accessible)
• Scala (un langage fonctionnel utilisant la JVM)
• Et tellement plus encore…

Choisir un langage se fait surtout selon ces 4 critères :

• Popularité
• Communauté
• Affinités avec la syntaxe
• Réponse à tes besoins

Si jamais tu souhaites commencer dans le web, je te conseille de partir sur PHP avec le framework Symfony.

C’est assez simple à apprendre et la documentation est d’une grande qualité.

Les bases de données

Comme leurs noms l’indiquent, les bases de données permettent de… stocker des données.

Le plus souvent, on les stocke sous forme de table.

On crée ensuite des relations entre ces tables, par exemple pour dire qu’un utilisateur appartient à une entreprise.

Quelle base de données choisir ?

Tu as le choix entre deux types de base de données.

Les bases de données relationnelles classiques (comme MySQL / MariaDB ou PostgreSQL) ou celle dites « NoSQL » (No pour Not Only) comme MongoDB.

Très honnêtement pour commencer la programmation, pars sur la stack la plus simple possible.

MySQL est très abordable pour les débutants.

Si jamais tu es parti sur un univers full JS, tu peux t’amuser avec MongoDB et Mongoose.

Où apprendre le SQL ?

Aujourd’hui, on fait rarement des requêtes SQLs à la main.

On privilégie l’abstraction avec des ORM / ODM pour modéliser la structure de données.

Voici un exemple avec Doctrine (pour PHP).

La commande SQL que Doctrine va lancer devrait ressembler à celle-ci :

INSERT INTO products (name) VALUES ("Formation pour devenir un nouveau développeur");

Mais pour toi, c’est totalement transparent.

Je suis tout de même de ceux qui pensent qu’avoir une base en SQL est important pour un développeur web, alors voici quelques ressources.

• SQL.sh
• FX Jollois : Cours et exercices

Les serveurs (web, dns, ftp)

Si tu travailles dans le web, il va falloir te familiariser avec l’administration système en général.

Comprendre comment est fait un site c’est bien, mais comprendre comment on accède à ce site est encore mieux.

Les hébergeurs comme OVH proposent des solutions comprenant serveur de base de données, serveur web, dns et ftp.

Les serveurs web exposent des pages à l’utilisateur. Ces pages peuvent par exemple être en HTML ou en JSON comme on l’a vu tout à l’heure.

Les serveurs web les plus connus sont :

• Apache HTTPD
• nginx

Les serveurs DNS permettent de traduire des IPs en nom de domaine, mais aussi de configurer des services e-mails.

Les serveurs FTP offrent la possibilité de gérer des fichiers sur un serveur distant.

Conclusion

Voici la roadmap pour apprendre le développement web, toutes les technologies à maîtriser pour débuter y sont renseignées.

Bien entendu, tu peux te spécialiser dans le back, le front ou devenir fullstack (en faisant les deux).

Apprendre développement web est une aventure incroyable.

Bon courage pour ton apprentissage !

PS : Ce site (roadmap.sh) donne des infos un peu plus visuelles sur les différentes roadmaps à suivre pour devenir développeur web.

Plus de contenu 💡

Pour lire plus de contenu similaire dans le même thématique.

• Blagues sur les développeurs : Jusqu'où ira-t-on ?
• Coder sur papier, vraiment utile ?
• CV de développeur : Constuire un résumé percutant
• Devenir développeur sans diplôme, est-ce possible ?
• Emploi de développeur : le plan pour trouver du travail
• Études pour devenir développeur : Quelle voie choisir ?
• IDE : Quel est le meilleur environnement de développement intégré ?
• Le meilleur langage pour commencer la programmation
• Le salaire d'un développeur web : Combien espérer ?
• Les développeurs détestent WordPress
• Portfolio : Guide complet (+ exemples)
• Reconversion développeur : Le guide
• Stage pour développeur (les trouver + les réussir)