HTML, CSS et Javascript… Ces acronymes sonnent doux à votre oreille, mais vous ne savez pas encore tout à fait de quoi il s’agit ? C’est parfait, car l’équipe d’Ironhack adore expliquer le code aux débutant·e·s. Laissez-vous guider pour appréhender ces trois langages front-end, c’est-à-dire qui concernent le côté client d’un site, ce qu’on voit à l’œil nu (par opposition au côté serveur, le backend, qui concerne plutôt ses bases de données). En bonus, vous trouverez même les bons conseils des profs de nos bootcamps en développement web pour coder vos premier site Internet. La classe à Dallas.
HTML et CSS
Comme Tic et Tac, Dupont et Dupont ou Batman et Robin, le HTML et le CSS vont de pair. Ce sont les deux premières choses que vous allez apprendre si vous faites une formation de web developer. Et pour cause : ils sont indispensables pour comprendre la logique, l’architecture et le design d’un site Internet !
Le HTML, l’archi en chef
Le HTML (HyperText Markup Language), est le langage de base utilisé pour créer des pages Web. Il fonctionne en utilisant des balises qui indiquent au navigateur comment structurer et afficher le contenu d'une page. C’est un peu la signalisation sur l’autoroute, pour prendre l’image de la conduite.
Par exemple, la balise <h1> est utilisée pour créer un titre de premier niveau,
<p> est utilisée pour créer un paragraphe de texte,
<img> est utilisée pour afficher une image, et ainsi de suite.
C’est simple à comprendre et c’est la base du code. On ne peut pas faire l’impasse sur ce langage de programmation. Grâce à ses balises, vous pourrez créer des listes, des liens, des tableaux et donner des instructions (mettre en gras, afficher une image, etc).
En bref, il existe trois éléments principaux du HTML : les balises, les éléments et les attributs. Sa version la plus récente est HTML5. Elle possède toutes les caractéristiques de base mais est plus dynamique et comporte moins de code. Simple is the new black.
Le CSS, l’artiste de la bande
Là où le HTML donne des instructions précises à une page pour se structurer, le CSS (Cascading Style Sheets) refait la peinture. Il est utilisé pour styliser et mettre en forme les pages Web créées avec HTML. Pour cela, il définit des règles pour modifier les couleurs, les polices, les marges, les dimensions et d'autres aspects de l'affichage des éléments HTML. Par exemple, avec CSS, on peut changer la couleur de fond d'une section, ajuster la taille et le style du texte, ajouter des bordures et des ombres, et bien plus encore. CSS permet de créer des designs attrayants et cohérents pour les pages Web, en séparant la présentation du contenu, ce qui facilite la maintenance et la personnalisation du style d'un site Web.
Pour certains puristes, ces deux langages n’en seraient pas vraiment. Ils les appellent en effet de la syntaxe, indispensable dans le cadre du développement informatique front-end, mais qui ne comporte pas d’algorithmie. Un écrivain pourrait faire une différence similaire entre un cours de grammaire et de la poésie.
Le plus important dans tout cela, c’est qu’ils sous-tendent la structure et le design d’une page Web. Et pour cela, bon nombre de devs les appellent effectivement des langages informatiques.
Javascript, le langage front-end par excellence
On dit souvent que le Javascript est LE langage front-end par excellence.
Javascript est présent sur presque tous les sites Web fonctionnels. Il les rend dynamiques et interactifs. C’est ce langage qui fait que les sites répondent aux commandes des utilisateurs.
HTML était l’archi, CSS le peintre, JavaScript est le marionnettiste.
Par exemple, avec Javascript, vous pouvez :
lire un aperçu lorsque votre curseur survole une vidéo
ajouter des effets visuels mouvants
créer un formulaire interactif
lancer une animation lorsque vous faites défiler vers le bas
faire apparaître un menu lorsque vous appuyez sur un bouton du clavier
créer des jeux en ligne
lancer automatiquement un diaporama de photos
faire changer l’aspect d’un élément lorsque vous passez la souris dessus… etc.
JavaScript est aujourd'hui l'un des langages de programmation les plus largement utilisés dans le développement Web. Il dispose également d'une vaste communauté de développeurs qui contribuent à son évolution et à l'élaboration de nombreuses bibliothèques et frameworks JavaScript, tels que React, Angular et Vue.js, qui facilitent le développement d'applications et de sites plus complexes.
Très versatile, Javascript peut aussi être utilisé côté serveur (en back-end) grâce à des environnements comme node.js.
Comment le HTML, CSS et Javascript interagissent-ils ?
Prenons un exemple concret.
Vous entrez sur le site de votre marque de vêtements préférée.
La première chose qui pop up sur la page est une fenêtre qui vous indique une remise de 10% avec le code 10ANS, pour l’anniversaire de la marque. C’est animé avec du Javascript.
Maintenant, rendez-vous sur la page de la veste que vous aimeriez vous offrir.
Le prix, la taille, l’image, le texte s’affichent grâce à des balises HTML qui explique au site où et comment afficher ces infos.
La page vous donner envie parce que la photo de la veste est belle, mais aussi grâce à la magie visuelle du CSS : de belles couleurs, une police de caractère harmonieuse et de taille adéquate, des fonds de couleur chatoyants, etc.
Ça y est, vous connaissez toutes les subtilités d’utilisation du HTML, CSS et Javascript. Vous allez pouvoir briller au prochain dîner entre copains en expliquant tout cela à vos amis ébahis. Et surtout, vous allez pouvoir mettre ces infos en pratique en codant !
Si vous brûlez d’impatience de mettre tout cela en pratique aujourd’hui même, voici aussi quelques conseils utiles pour créer votre tout premier site Web. Nous sommes ravis de vous aider : on aime les devs passionné·e·s.
5 conseils à suivre pour créer votre premier site Web avec HTML, CSS et Javascript
1. Faites une maquette sommaire
Quel genre de site Web voulez-vous créer et que voulez-vous qu’il comprenne ? Des outils de maquettage très simples existent. Grâce à eux, vous aurez déjà une idée de ce à quoi vous voulez que ressemble le site. Partir d’un projet concret, cela motive ! Utilisez Figma ou Sketch pour créer cette version finale fictive que vous allez maintenant coder.
Vous pouvez toujours vous inspirer d'autres sites Web que vous aimez, mais restez simple au début. Par exemple, réfléchissez à l'endroit où vous voulez placer la navigation principale et à ce que vous voulez mettre dans le pied de page.
2. Réfléchissez le design (Hello le CSS !)
Faites des recherches sur l'inspiration visuelle. En ce qui concerne CSS, vous devrez penser au design lui-même, comme la largeur, la hauteur, la marge, le remplissage, la position, la couleur d'arrière-plan, la taille de la police, etc. Nous vous recommandons donc de visiter certains sites Web que vous aimez comme point de référence ou de repère pour avoir un concept visuel plus clair. Canva donne de très bonnes idées côté design : un petit tour sur leur bibliothèque de projets s’impose.
3. Codez petit à petit
Sur votre premier site, vous allez forcément faire des erreurs ! Ce n’est pas grave, c’est même normal et souhaitable. Elles feront de vous un·e meilleur·e dev. Allez-y donc doucement : une petite maquette, un design simple et des plages horaires de code où vous resterez concentré·e.
4. Demandez l’avis de devs plus expérimentés ou de la communauté
La communauté dans la tech est très active ! Peut-être avez-vous un·e ami·e qui peut regarder votre travail et vous faire des retours constructifs, ou mieux encore, pouvez-vous poster votre travail, par exemple sur un forum de StackOverflow. Gardez en tête que c’est dans le partage que vous apprendrez le plus et le plus rapidement.
5. Musclez vos compétences de rédacteur·trice
Eh oui, quand on est dev sur un projet global comme un site, on peut utiliser des compétences connexes ! Vous pouvez tout à fait ajouter des lorem ipsum de remplissage sur votre site. Mais si vous sentez l’âme d’un·e écrivain·e, écrivez directement vos textes. Cela vous évitera de revenir en arrière, car le texte sera là, prêt à être intégré. Cela vous aidera aussi à calibrer les espaces nécessaires.
_______________________
Nous espérons que cette introduction aux langages Front-end vous aura plu. À présent, il ne vous reste qu’à choisir quel projet de site vous souhaitez entamer… Lorsqu’il sera terminé, vous ressentirez beaucoup de fierté (et nous aussi).
Pour aller plus loin et faire du développement informatique votre métier, découvrez les bootcamps développeur Web d’Ironhack, à Paris, à distance ou sur nos campus à l'étranger
