CSS3 : Créez des sites Web modernes et responsive

Sélecteurs de base

Nous verrons les sélecteurs de base comme les sélecteurs de balise standard, les classes, les ID et même ce que l'on appelle le sélecteur universel.
Afin de suivre toute les vidéos de la formation, vous trouverez un fichier zippé reprenant tous les cours vu ensemble.

Gestion des couleurs

Nous verrons en détail la gestion des couleurs en CSS (couleur primaire, couleur en RGB, couleur en HSL ou couleur en hexadécimal).

Gestion des polices

Comme pour toute page web, il est souvent important de mettre en avant la police ou la font utilisée, on pourra même si on le souhaite intégrer des fonts depuis par exemple Google Fonts, afin d'avoir des fonts atypiques.

Gestion d'un bloc

Primordial pour comprendre la prochaine section sur la gestion des bloc avec les techniques Flexbox et Grid, comprendre la différence entre une DIV, un SPAN et plus encore.

Unités de mesure

Vous verrez qu'il y a plein de manières de pouvoir utiliser des unités de mesure, en fonction du besoin recherché on pourra utiliser différents types de mesures comme la mesure relative, courante fixe et plus encore.

Résumons

On a vu pas mal de choses dans cette section et si on résumait cela par une vidéo afin de bien appuyer les bases à assimiler, comprendre et digérer le CSS, entrainez-vous à bien comprendre ces bases, c'est primordial pour la suite.

Gestion des positions

Comme vous le savez, tout peut-être comparé à des boîtes, mais parfois on vouloir placer à ces boîtes à des endroits bien précis, nous verrons donc ce que l'on appelle les positions relative, absolute, fixed et plus encore.

Gestion de la flottaison

C'est une veille technique, mais il est possible que vous rencontriez encore celle-ci donc autant comprendre ce qui se passe, vous verrez que malgré tout c'est très pratique dans certains cas.

Gestion de la technique FlexBox

Avec cette technique, on pourra très rapidement aligner des blocs de manière horizontale ou verticale sans aucun efforts, vous verrez qu'il existe plein d'options, ne nous verrons pas tout, mais comme d'habitude, vous aurez accès à la documentation en fonction de vos besoins.

Gestion de la technique Grid

Une autre technique qui va permettre de pouvoir positionner ses blocs dans la page web avec très peu d'efforts, là cette technique va nous permettre de positionner des blocs où bon nous semble.

Gestion des sélecteurs avancées

Après avoir découvert les sélecteurs de base, vous allez voir qu'il existe une multitude de sélecteurs afin d'accéder à l'emplacement de votre choix de manière chirurgicale.

Gestion de l'arrière plan

Arrière pourra utiliser une couleur unie ou alors un dégradé de couleur et même encore mieux la gestion de 1 ou plusieurs images afin de donner un super style à votre page web.

Gestion des bordures

Nous verrons que l'on pourra affecter un couleur, un type et une épaisseur à une bordure, cela pourra servir à une image, un texte et plus encore.

La gestion de Box-sizing

Cette propriété est super important surtout lorsque vous voulez utiliser des bordures sur des boîtes, celui-ci calculera automatiquement comment ne pas dépasser du cadre et évitera cette horrible barre horizontale sur votre navigateur.

Gestion de la propriété Transform

Avec cette propriété, on pourra transformer nos éléments comme une image qui pourra être déplacée, redimenssionée, ou lui faire subir une rotation.

Gestion de la propriété Transition

Avec cette propriété, on pourra donner un délai à notre image par exemple afin d'avoir un rendu plus fluide par exemple lorsque la souris passe sur cette fameuse image.

Gestion des Media Queries

Ce qui est cool, c'est qu'en fonction de la résolution de votre écran, on pourra modifier des paramètres de la page web afin de la rendre plus adaptée au media utilisé.

Gestion des FrameWork

Un framework c'est un ensemble de mot clef qui permettra de gagner un temps considérable juste avec des classes en CSS, vous pouvez trouver un exemple de formation gratuite et payante sur le framework Bootstrap 5.X

Gestion des variables

Lorsque vous tapez toujours la même chose, il peut être utile de répéter à maintes fois toujours le même code, c'est là que va rentrer en selle la gestion des variables.

Gestion du reset et Normalize

Lorsque vous créer une page web, même sans CSS, votre navigateur va intégrer son propre CSS, on aura donc deux fichiers qui permettront d'annuler le CSS du navigateur et un autre afin d'harmoniser celui-ci. 

Mise en ligne du site web

Comme je travaillais sur un serveur gratuit, je n'ai plus accès à ce serveur afin de mettre le site web, mais pas d'inquiétude, j'ai en sorte de mettre les 3 sites web sur mon site web perso à l'adresse suivante: https://savoirpourtous.eu/Autre/index.html

Validation du site web

Une fois que notre site web sera créé, il va être fort utile de vérifier si celui-ci est conforme à la norme standard W3C, voilà pourquoi on utilisera les 2 liens ci-dessous afin de vérifier HTML et CSS.

- HTML: https://validator.w3.org/
- CSS: https://jigsaw.w3.org/css-validator/