Ne laissez pas la Covid vous empêcher d’atteindre vos objectifs. Nos classes sont désormais hybrides: formez-vous aux métiers du numérique depuis chez vous ou depuis l’un de nos campus!

En savoir plus

Les différences entre HTML, CSS et Javascript (et quelques bons conseils pour créer votre premier site web !)

Ironhack CSS Javascript

Avez-vous déjà hoché la tête pour dire que vous compreniez quelque chose, mais en réalité, ce n'était pas le cas ? Et ensuite vous vous dites, OMG, pourquoi j'ai fait ça ? Et l'instant d'après, on vous pose une question sur cette chose que vous disiez connaître ou, pire, on vous confie une tâche pour faire cette chose que vous disiez connaître. Cauchemar ! Eh bien, heureusement pour vous, si vous poursuivez votre lecture, vous n'aurez plus ce problème lorsqu'il s'agira de CSS, HTML et Javascript. Mais peut-être le ferez-vous encore dans d'autres aspects de votre vie, par exemple pour impressionner quelqu'un lors d'un rendez-vous. Vous : "oh ouais, j'adore ce groupe" - *regarde le groupe sur google dans les toilettes* (au fait, vous devriez vraiment arrêter de faire ça), mais bon, une chose à la fois, nous ne sommes que des humains ;). 

Bref, allons droit au but, d'accord ? Si vous avez eu l'idée de créer votre propre site web ou de gérer celui de quelqu'un d'autre, vous avez très probablement rencontré HTML, CSS et Javascript. Ce sont les trois principaux éléments constitutifs de tout site ou page Web. Ils travaillent ensemble, mais, comme nous allons l'expliquer, ils jouent tous des rôles distincts en matière de codage et de création de sites Web. 

Qu'est-ce que HTML ?

Peut-être qu'à un moment de votre vie, vous avez cliqué sur la petite icône HTML (</>) et vu tout un tas de ce qui ressemble à du texte et des symboles aléatoires et confus qui vous ont fait sursauter et vous ont donné l'impression d'être entré dans une version déroutante à petit budget de The Matrix et vous avez appuyé plusieurs fois sur Echap pour espérer que tout cela disparaisse ? Et prier pour que vous n'ayez rien gâché ? Voilà, mon ami, le monde du HTML ; nous vous promettons qu'il n'est pas aussi effrayant ou même déroutant qu'il n'y paraît. Une fois que vous l'aurez compris, c'est une autre langue ou un autre monde que vous apprendrez à apprécier et peut-être même à aimer. Commençons par l'abréviation HTML, qui est l'acronyme de Hypertext Markup Language. L'hypertexte est essentiellement le « texte structurel », et un langage de balisage est un « langage » ou un « contenu » spécial que les ordinateurs comprennent, qui a été conçu à l'origine pour décrire les pages Web et rendre le contenu interactif ; Considérez-le comme le squelette d'un site Web. HTML a été publié en 1989 en tant que langage de publication officiel du World Wide Web et constitue le premier élément constitutif de la création de pages Web. Il existe trois éléments principaux du HTML : les balises, les éléments et les attributs, et sa version la plus récente est HTML5. HTML5 possède toutes les caractéristiques originales du HTML ordinaire, mais il est plus dynamique et comporte beaucoup moins de code, ce qui vous permet de créer quelque chose de brillant en un rien de temps !

CSS, c'est quoi ?

Il y a deux CSS. Le premier est un groupe de rock alternatif killer girl des années 2000 sur lequel nous vous recommandons fortement de vous amuser ! Mais le second CSS, pour les besoins directs de cet article et de vos connaissances, est un élément essentiel pour coder votre site Web !

Ainsi, CSS dans le monde de la technologie signifie Cascade Styling Sheets (n'est-ce pas génial ?!). Comme son nom l'indique, CSS définit l'apparence et le style du site Web. Il permet de déterminer la couleur, les polices, le positionnement de certains éléments et même un peu d'animation. Cela signifie que CSS constitue une partie assez importante de votre site Web, à savoir les éléments visuels et l'esthétique. CSS a suivi la création du HTML pour rendre les sites Web plus agréables à l'œil, et c'est ce qui s’est passé, sinon les sites Web se ressembleraient tous, en noir et blanc, avec des liens hypertextes bleus et une nouvelle police de caractères romaine (ennuyeux !). Donc, si HTML est le squelette, CSS est la peau, les yeux, les cheveux, le nez et les pieds d'un site Web qui le rend unique et distinguable. 

Ainsi, bien que HTML et CSS fonctionnent bien ensemble, ce sont des langages bien distincts. Et apprendre les deux signifie que vous pouvez aussi les utiliser séparément, car ils ont tous deux une myriade d'applications différentes ! Vous pouvez vous concentrer sur ces deux éléments et créer un site web avec notre expert Uros Cirkovic en seulement 60 minutes et GRATUITEMENT. Cela semble bien, un peu trop bien, mais nous vous promettons qu'il n'y a pas de surprises cachées, juste d'excellentes connaissances, et qu'à la fin, vous aurez votre propre site web. Intéressé ? Découvrez « Comment créer un site Web avec HTML et CSS en 60 min ». 

Bon, nous y sommes presque...

Qu'est-ce que Javascript ?

C'est là que les choses se compliquent un peu plus. Javascript est présent sur presque tous les sites Web fonctionnels et permet aux sites Web d'être dynamiques et interactifs. Il s'agit du langage utilisé par les développeurs web pour créer des sites web qui répondent aux commandes et aux mouvements de l'utilisateur. Et Javascript peut en fait vous donner le pouvoir de modifier le HTML et le CSS d'un site web. C'est comme le marionnettiste.

Par exemple, avec Javascript, vous pouvez effectuer les opérations suivantes :

  • Lire un aperçu lorsque votre curseur survole une vidéo
  • Jouer une animation lorsque vous faites défiler vers le bas
  • Faire apparaître un menu lorsque vous appuyez sur un bouton du clavier
  • Créez des raccourcis clavier pour votre site
  • Créez une galerie de photos mobile pour que les utilisateurs puissent passer d'une diapositive à l'autre.

Et la liste est encore longue... 

Comment ces trois-là fonctionnent-ils tous ensemble ?

Un bref exemple : si vous avez une boutique de mode en ligne et que la première chose que vous voyez sur votre site Web est une fenêtre contextuelle « 10% de réduction si vous vous inscrivez aujourd'hui », c'est du Javascript. D’un autre côté, HTML est le prix, les tailles, la description, l'image de l'article, etc., Ensuite, CSS sera l'apparence de votre boutique en ligne, les couleurs, la police de caractères, la taille de l'image, les tableaux, etc. 

Maintenant que vous connaissez la différence entre HTML, CSS et Javascript et la façon dont ils s'entraident, nous avons quelques conseils essentiels pour commencer à planifier votre site Web. Et n'oubliez pas qu'il s'agit d'un processus, que vous pouvez vraiment apprécier !

Vous appréciez cet article ? Apprenez en plus sur Développement Web !

Faites le premier pas dans le monde de la technologie et découvrez notre bootcamp Développement Web.

8 conseils à suivre pour créer un site web à partir de zéro :

1. Choisir !

Choisissez ce que vous voulez mettre en pratique, comme rédiger un CV, un portfolio ou une page de destination sur une offre de service particulière.

2. Pourriez-vous, s'il vous plaît, ne pas vous concentrer sur son apparence à ce stade ? 

Enlevez cette pression ! Vous aurez bientôt l'occasion de faire briller votre site Web, mais à ce stade, il vous suffit de penser à la structure et au contenu. 

3. C'est dur !

Le mot "brouillon" a sa raison d'être : il s'agit d'une copie brute de votre idée brillante qui va bientôt se concrétiser. Considérez-le comme un diamant brut qui va bientôt être poli. 

4. Pensez à la structure 

Vous pouvez toujours vous inspirer d'autres sites Web que vous aimez, mais restez simple pour commencer. 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. Honnêtement, beaucoup d'entre nous, développeurs, se contentent de prendre un stylo et du papier et de dessiner rapidement pour imaginer la mise en page de base (beaucoup d'entre nous dessinent encore plus mal que des enfants de 7 ans, alors ne vous attendez pas à un chef-d'œuvre ; vous n'en avez pas besoin ici). 

5. Mettez en pratique vos compétences de rédacteur

Vous pouvez tout à fait ajouter des lorem ipsum de remplissage en ce moment, mais si vous sentez que votre créativité coule, n’hésitez pas à vraiment rédiger. Cela vous évitera de revenir en arrière, car le texte sera là, prêt et en attente. De même, si vous choisissez, par exemple, de pratiquer votre Portfolio, pensez à quelques lignes concernant ce que vous faites et qui vous êtes, les domaines dans lesquels vous travaillez et votre expérience professionnelle et éducative. 

6. Vérifiez au préalable quelques références de conception.

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.

7. Faites-le en regardant notre webinaire :)

Permettez-nous de vous aider ! Faites-nous confiance, c'est beaucoup plus facile, et nous sommes vraiment sympathiques :). Nous sommes donc certains que l'expérience d'apprentissage sera amusante et facile à assimiler plutôt que de lire et de tout essayer soi-même. Notre webinaire est presque comme un cours privé, et vous aurez terminé en seulement 60 minutes ! 

8. Célébrer !

Oooh ouais, vous l'avez fait ! Quoi qu'il en soit, vous avez fait un pas de géant ! Et donc pour rendre ce processus plus agréable, il est temps de célébrer ! Un verre de vin ? Boogie dans ta chambre sur votre chanson préférée ? Embrasser quelqu'un que vous aimez ? Quoi qu'il en soit, nous l'encourageons fortement ! 

Maintenant que vous avez lu cet article et que vous savez une ou deux choses sur la création d'un site web à partir de rien, vous vous dites peut-être : « C'est intéressant », « J'aime ça », « Je pourrais faire ça comme travail ». Pensez à toutes les célébrations que vous aurez à faire. Mais en toute honnêteté, vous pouvez en faire une carrière sérieuse et devenir un vrai pro (faites-nous confiance, vous serez très demandé !). Alors, si vous avez de grands rêves et que vous voulez devenir un maître du développement Web, consultez nos Bootcamps ici !

Rejoignez Ironhack

Prêt à nous rejoindre ?

Des milliers d'entrepreneurs et des personnes en reconversion professionnelle ont lancé leur carrière dans l'industrie du numérique après avoir suivi les bootcamps d'Ironhack.

Cours

Quelle formation voulez vous prendre?

Campus

Où voulez vous vous former?

Articles de blog connexes sur Développement Web

Front end vs back end

Front-end et Back-end : Quelle est la différence?

En savoir plus ...
développeur full stack

Qu’est-ce qu’un développeur full stack ?

En savoir plus ...
Coding Bootcamp

Qu’est-ce qu’un Coding Bootcamp?

En savoir plus ...

Annonce RNCP

En savoir plus ...

Comment je suis devenue développeur web en 6 mois ? (sans aucun background tech)

En savoir plus ...
Soyez les premiers informés de nos dernières actualités et événements en vous inscrivant à notre newsletter.
Veuillez écrire votre nom
Veuillez écrire votre nom
L'email n'est pas valide. Veuillez réessayer.