Logo HTML, CSS et les bases du web

Formation HTML, CSS et les bases du web

HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont deux langages de programmation utilisés pour créer et styliser des pages web. HTML est un langage de balisage qui permet de structurer le contenu d'une page web en utilisant des balises. Les balises HTML sont des mots-clés entourés de crochets qui indiquent à un navigateur web comment afficher le contenu de la page. Par exemple, la balise <h1> indique au navigateur que le contenu qui suit doit être affiché en tant que titre de niveau 1. HTML permet également de créer des liens entre les pages web, d'insérer des images et d'intégrer des vidéos et d'autres types de contenu multimédia. CSS est un langage de feuille de style qui permet de définir l'apparence d'une page web. Les règles CSS décrivent comment les éléments HTML doivent être affichés sur la page, tels que la couleur, la police, la taille, l'alignement et d'autres propriétés de mise en forme. Les développeurs peuvent utiliser CSS pour créer un design cohérent et attrayant pour une page web. HTML et CSS sont utilisés conjointement pour créer des pages web interactives et attrayantes. Ils sont indispensables pour le développement web et sont souvent utilisés avec d'autres technologies telles que JavaScript et PHP pour créer des sites web dynamiques et interactifs.

Objectifs pédagogiques / Compétences visées

  • Comprendre les fondamentaux du Web
  • Utiliser HTML pour décrire la structure d’une page
  • Pouvoir mettre en forme une page web en CSS
  • Connaitre les principaux outils du développement web

Pré-requis

  • Savoir utiliser un ordinateur, en particulier un navigateur web

Public

  • Développeurs
  • Chefs de projets

Programme

Jour 1

Les bases du web

  • Les navigateurs et les serveurs web
  • Les URL
  • Le Protocole HTTP
  • Les languages utilisés sur le web
  • Les outils de développement : IDE, serveurs de dev, validateurs…

HTML : Sémantique d’une page web

  • Les différentes versions : HTML 3.2, HTML 4.01, XHTML, HTML5, HTML Living Standard
  • Les balises et attributs pour décrire le contenu
  • Structure d’une page web : doctype, html, head, body

Les balises HTML de structure

  • Les balises du head : title, meta, link…
  • Les balises blocs : h1, p, div, header, main, footer…
  • Les listes : ul, ol, dl…
  • Les tableaux : table, tr, th, td…
  • Les balises inlines : span, b, i, u, strong, em, br…

Les balises interactives

  • Les liens vers d’autres pages : relatifs, absolus, ancres…
  • Intégrer du JavaScript et du CSS
  • Multimédia : img, audio, video, iframe…
  • Les formulaires : form, input, select

Jour 2

CSS : Mise en forme

  • Les différentes versions : CSS1, CSS2.1, modules CSS3, modules CSS4
  • Mise en page par défaut des navigateurs
  • Intégrer du CSS : externe, interne, inline
  • Compatibilité des navigateurs
  • Cascade de propriétés, héritage
  • Les Sélecteurs CSS, versions 1 à 4
  • Spécificité : priorité des sélecteurs

Les unités CSS

  • Les couleurs : noms, hexa, rgb, hsl, rgba, hsla
  • Pour l’écran : em, px, %
  • Les nouvelles unités : rem, vw, vh, vmin, vmax
  • Pour l’impression : em, cm, mm, in, pt, pc, %

Les propriétés texte

  • Polices, Largeur, hauteur, ligne, direction
  • Couleurs, italique, épaisseur, ombres
  • Soulignement, surlignement
  • Centrer horizontalement et verticalement

Le modèle de boîte

  • Hauteur, largeur, box-sizing, overflow
  • Marges et fusion
  • Padding, bordures, arrondis et fond
  • Centrer horizontalement et verticalement
  • Mettre en forme les listes et les tableaux

Jour 3

CSS Avancé

  • Transformations 2D et 3D
  • Transitions
  • Animations et keyframes
  • Variables et calc

Responsive Design

  • Viewport
  • Media Queries : width, height, device-width, device-pixel-ratio, orientation…
  • Concept de grille
  • Points de rupture
  • Images responsive

Layout Moderne

  • Flexbox : distribution, alignements, ordonnancement, flexibilité…
  • CSS Grid : template, zone nommées, répartition, gaps, flex

Jour 4

Outils de productivité CSS

  • Gestionnaires de dépendances : npm, yarn, pnpm…
  • Les Préprocesseurs : LESS, SASS, SCSS, Stylus
  • Les Postprocesseurs : PostCSS, PostCSS Preset Env, CSS Modules, cssnano, Browserslist, Autoprefixer…
  • Qualité du code : htmllint, stylelint, prettier...
  • Les méthodologies : Reset CSS, BEM, ITCSS…

Les frameworks CSS

  • Bootstrap
  • Semantic UI
  • Materialize
  • Bulma

Moyens pédagogiques et techniques

  • Formateur validé par nos équipes techniques et pédagogiques
  • Salle de formation informatisée
  • Support de cours numérique

Suivi et appréciation des résultats

  • Questions orales ou écrites (QCM)
  • Exercices pratiques
  • Formulaires d'évaluation

Avis

Nicolas D.

le 06 septembre 2023

Philippe G.

le 06 septembre 2023

Laurent L.

le 06 septembre 2023

Chayma B.

le 06 septembre 2023

Ludovic R.

le 06 septembre 2023

Commentaire général
Need to practice

Saifeddin D.

le 06 septembre 2023

Mohamed Ali B.

le 21 juin 2023

Mouna N.

le 21 juin 2023

Aymen C.

le 21 juin 2023

Rabii C.

le 21 juin 2023

Nawres G.

le 21 juin 2023

Safa A.

le 21 juin 2023

Houda G.

le 21 juin 2023

La formation
en presentiel ca aurait etre plus efficace

Louay G.

le 07 juin 2023

Ahmed Aziz B.

le 07 juin 2023

La formation
Un peu trop d'info en peu de temps, sinon ça va.

Mohamed Amine C.

le 07 juin 2023

Wassim A.

le 07 juin 2023

Sara B.

le 07 juin 2023

Les +
Les différentes excercices

Malek L.

le 07 juin 2023

Abdeljabar M.

le 01 mars 2023

Sarra S.

le 01 mars 2023

Jingyi L.

le 01 mars 2023

Ines B.

le 01 mars 2023

Gerald H.

le 01 mars 2023

Florent V.

le 01 mars 2023

Le formateur
Top, le rythme m'a permis d'aller un peu plus loin dans chaque exo pour mieux comprendre.
Le formateur est professionnel et sympa.
Ca donne envie d'aller plus loin et de mettre en pratique les connaissances acquises.

Laurent L.

le 01 mars 2023

La formation
pour un débutant complet comme moi, beaucoup de choses nouvelles, donc peu d'efficacité pendant les TP, besoin de temps pour assimiler un peu plus. Je suis content néammoins d'avoir découvert autant de choses

Le formateur
Très content de Romain, il connait le sujet :) , il est disponible à la moindre question.

Les +
Tout

Thomas D.

le 01 mars 2023

La formation
Faire un petit peu plus d'exercices avec un peu plus de temps notamment pour les derniers exercices du chapitre HTML / CSS.

Thouraya A.

le 12 octobre 2022

Asma Y.

le 12 octobre 2022

Lamia B.

le 12 octobre 2022

Amani B.

le 12 octobre 2022

Nabil B.

le 12 octobre 2022

Nizar T.

le 12 octobre 2022

Amel T.

le 12 octobre 2022

Marwa A.

le 12 octobre 2022

Omar S.

le 12 octobre 2022

Intissar Z.

le 11 mai 2022

Hervé C.

le 11 mai 2022

La formation
Peut être plus se concentrer sur les dernières versions des normes.

Wissem A.

le 11 mai 2022

Le formateur
Merci Romain.

Claire R.

le 11 mai 2022

Le formateur
Je ne pense pas qu'une pause de 1/4 d'heure toutes les heures soit vraiment nécessaire.

Sébastien L.

le 11 mai 2022

Les +
Rythme de la formation.

Alain L.

le 11 mai 2022

La formation
Le problème de ces formations en distanciel est toujours le même. Beaucoup moins d'intéractivité entre formateur et stagiaires. Cela nuit à la qualité, où parfois des petits échanges "supplémentaires" pourraient débloquer des situations (notamment lors des exercices).

Le formateur
Impressionnant ! J'aurais juste aimé à ce que la correction des exercices soit beaucoup plus commentée (textuellement, dans les exercices) et que les exercices soient numérotés. Pas sûr que je m'y retrouve le jour où je voudrais réétudier ce qui a été fait.

Les +
Le formateur et sa connaissance, même si parfois j'ai l'impression qu'il va vite (trop vite ?)

Commentaire général
Quand je réponds oui, opérationnel, j'entends qu'un retour sur ce qui a été fait dans cette formation (et les exemples notamment) me paraît indispensable.

François D.

le 11 mai 2022

Edin K.

le 11 mai 2022

Les +
Les différentes pauses nous permettent de revoir des apecs qu'on aurait pu louper

Stéphane F.

le 06 octobre 2021

Stéphane L.

le 06 octobre 2021

La formation
J'ai apprecie le rythme et la dynamique de la formation. Je ne trouve pas que le distanciel soit un handicap.
Les supports de cours pourrait etre ameliore en etant plus a jours et en offrant une structuration et des syntheses au vu de la quantitee. Des guides Best practices / erreurs a eviter serait pratique egalement.

Le formateur
Cours agreable et intelligible. Formateur en mesure de repondre aux questions

Les +
pas de probleme reseau.

Pascal H.

le 06 octobre 2021

Le formateur
Le déroulé global de la formation est un peu rapide.

Commentaire général
Vous estimez-vous opérationnel(le) à l'issue de la formation ?
Oui et non, tout dépend de ce qu'on entend par opérationnel. J'aurai besoin de pratiquer derrière.

Vincent G.

le 06 octobre 2021

Quentin G.

le 06 octobre 2021

Les +
Pour une formation à distance, les outils et logiciels à installer ont été communiqué bien en amont.

Michel Z.

le 06 octobre 2021

La formation
On 3.5 jours, il me semble tres difficile de pouvoir dire que l'on maitrise le sujet. Mais les principales clefs du sujet nous ont ete fourni.

Les +
La formation sur Zoom se passe tres bien.

Christophe M.

le 06 octobre 2021

Pascale M.

le 02 novembre 2020

La formation
Tres bonne approche tres pragmatique, avec une prise en main des outils de developpement et debug, des langages.
Supports de cours tres bien faits mais sur certains slides, les images cachent le texte (donc mise a jour a prevoir). Mettre en avant ce qui releve de la bonne pratique et les pratiques/syntaxes qui existent mais ne sont plus recommandees (obsolescence).
L'historique des technologies est interessant mais peut-etre un peu long. J'aurai aime voir un chapitre oriente "Specification/Design/Checklist" de ce qui est preferable de reflechir/decider en amont d'un projet Web avant de se lancer dans le developpement.

Le formateur
La problematique du distanciel c'est que c'est moins interactif. Sans doute prevoir un temps de feedback avant de passer sur un autre slide ou un autre chapitre de la presentation, pour qu'on puisse intervenir/poser nos questions sans deranger.

Les +
Partage d'ecrans (formateur et eleves), la possibilite de voir le formateur egalement.
Les exemples de code illustrant les concepts et la syntaxe. Il pourrait y en avoir plus.

Eric A.

le 02 novembre 2020

La formation
Sur certains supports la capture d'ecran masque le texte du slide qu'on ne peut pas lire.
Template un peu "charge" je trouve et parfois beaucoup de slides
Manque peut-etre certains slide de resume pour aider durant les exercices

Le formateur
Tres a l'ecoute et pedagogue.

Les +
Zoom marche bien !
15' de pause reguliere

Commentaire général
Les formateurs de Eclipse Source Theia sont mois agueris a la formation a distance je trouve

Patrice M.

le 02 novembre 2020

Frédéric C.

le 02 novembre 2020

La formation
Ne sachant pas trop sur quoi je vais travailler sur le projet qui est en train de se monter, j'ai du mal à dire que cela répond à mes attentes, car j'attends d'abord d'en savoir un peu plus sur la suite cote STM.

Après, j'ai passé quasiment toute ma carrière (30ans) sur des langages bien structurés (et je pense, structurant, au moins pour moi), C++ et Java.
Je ne suis pas sûr de pouvoir passer, facilement, sur ce type de programmation (HTML/CSS/JavaScript/Typescript/…).
J'ai, en particulier, du mal avec l'esthétique de la "chose": pour moi, ce n'est pas très beau (pour le moment).
J'espère que les prochains sujets me rassureront un peu. Quelques craintes néanmoins.

Le formateur
Le principal point de satisfaction pour moi de cette formation: la prestation du formateur (Romain).
Le sujet n'est pas forcément évident, mais la maniere d'animer m'a permis de suivre plus facilement.

Les +
La réactivité de Romain pour trouver une solution de partage qui tienne la route (après les problèmes initiaux)..

Commentaire général
J'attends les prochaines formations pour arriver à mieux me situer et trouver quelque chose qui me convienne plus tard (sur le futur projet).

Maxime D.

le 02 novembre 2020

La formation
Les TP en mode jeu sont un peu inhabituels mais au final terriblement efficaces !

Le formateur
Ayant déjà un petit background web (de bricoleur bien sûr), tout ne m'a pas été utile mais, sur les points techniques plus compliqués, j'ai pu passer l'écueil et comprendre le fonctionnement grâce aux explications, méthodes d'approche et réponses aux questions.
Petit bémol : ça m'inquiétait un peu de voir la durée de certaines digressions ; en même temps, le sujet est large, donc la tentation est grande d'aborder les sujets intéressants qui viennent à l'esprit, même s'ils ne sont pas prévus strictement dans le planning.

Les +
L'approche tout en mode "live"

Nabil S.

le 03 avril 2020

Catherine L.

le 03 avril 2020

La formation
je pense que cela est plutôt dû au fait de la formation à distance et de n'avoir qu'un seul écran qui etait ce que saisissait Romain donc pas facilement de quoi se raccrocher à un support en //
Souvent cela allait trop vite

les infornations dispensées sont denses et j'ai trouvé les TPs parfois compliqués à faire ds la foulée des explications, j'aurais apprécié des exemples

Très bien le rappel du cours de la veille :-)

Les 2 dernieres heures de la formation sur Node.js, j'aurais préféré un petit recapitulatif de ce que nous avions vu depuis le debut de la formation

Frédéric G.

le 03 avril 2020

Khaoula E.

le 03 avril 2020

Le formateur
Il est trop rapide par rapport à ce qui est affiché dans l'ecran (pas mal de fois il y a eu une désynchronisation).
Aborde plusieurs points au meme temps (parfois je me sens perdue)

Les +
Les quiz
Les exercises

Commentaire général
Merci pour la formation :)

Amel L.

le 03 avril 2020

La formation
ca sera bien, si on detaille plus dasn les slides, plusiurs choses importates sont dites en oral qu'on le trouve pas dans le slide

Le formateur
La partie quiz est importante, mais ca sera bine qu'il y a une correction détaillé derriere, ca peut aider surtout pour les questions ratées.
Parfoit, les exercices se font rapidement de coup on ne peut pas suivre surtout avec le decalage et le probleme de reso

Commentaire général
je la recommande mais pas a distance.

Aymen A.

le 03 avril 2020

Commentaire général
C'est la première fois que j'assiste à une formations à distance, je pensais que ça ne marche pas, mais au final je suis très satisfait. l'interaction avec le formateur est très bien, les manip se passent très bien. Les QUIZZ du matin m'ont poussé à réviser le contenu avant de venir :-) c'est un bon point. sinon comme amèlioration je proposerai que tu trouves le moyen de pouvoir voir avec les messages dans le chat en temps réel, des fois je vois que tu reçois des notif et des fois pas du tout, ça doit etre configurable, peut etre avoir le chat sur un écran secondaire, je ne sais pas si c'est faisable. Globalement je suis très satisfait de la formation et j'espère quand meme que la prochaine session sera en présence physique, j'ai hate de découvrir la suite.

Aymen.

Cédric C.

le 03 avril 2020
Dernière modification le 26/12/2022