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
- 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
Méthodes mobilisées
- Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
- Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
- Un support de cours en version numérique sera remis à chaque participant
Modalités d’évaluation
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Auto-positionnement en amont et aval de la formation
Accessibilité aux personnes handicapées
Nous nous engageons à rendre notre formation HTML, CSS et les bases du web accessible aux personnes en situation de handicap. Merci de nous contacter afin que nous puissions réaliser les adaptations nécessaires en amont de la formation.Avis
Nicolas D.
Philippe G.
Laurent L.
Chayma B.
Ludovic R.
Commentaire général
Need to practice
Saifeddin D.
Mohamed Ali B.
Mouna N.
Aymen C.
Rabii C.
Nawres G.
Safa A.
Houda G.
La formation
en presentiel ca aurait etre plus efficace
Louay G.
Ahmed Aziz B.
La formation
Un peu trop d'info en peu de temps, sinon ça va.
Mohamed Amine C.
Wassim A.
Sara B.
Les +
Les différentes excercices
Malek L.
Abdeljabar M.
Sarra S.
Jingyi L.
Ines B.
Gerald H.
Florent V.
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.
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.
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.
Asma Y.
Lamia B.
Amani B.
Nabil B.
Nizar T.
Amel T.
Marwa A.
Omar S.
Intissar Z.
Hervé C.
La formation
Peut être plus se concentrer sur les dernières versions des normes.
Wissem A.
Le formateur
Merci Romain.
Claire R.
Le formateur
Je ne pense pas qu'une pause de 1/4 d'heure toutes les heures soit vraiment nécessaire.
Sébastien L.
Les +
Rythme de la formation.
Alain L.
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.
Edin K.
Les +
Les différentes pauses nous permettent de revoir des apecs qu'on aurait pu louper
Stéphane F.
Stéphane L.
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 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.
Quentin G.
Les +
Pour une formation à distance, les outils et logiciels à installer ont été communiqué bien en amont.
Michel Z.
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.
Pascale M.
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.
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.
Frédéric C.
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.
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.
Catherine L.
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.
Khaoula E.
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.
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.
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.