Bases de la mise en page du contenu - cours 3 900 RUB. d'Hexlet, formation 18 heures, Date: 1er décembre 2023.

1. Introduction
Travailler avec le contenu est un élément fondamental lors de la création d’un projet. Il y a du contenu caché derrière de belles animations, blocs et images. L'utilisateur vient sur le site ou ouvre une application pour celui-ci. Dans cette leçon, nous examinerons brièvement les sujets qui seront étudiés tout au long du cours.

théorie

2. Modèle de boîte et CSS
Quelles propriétés CSS affectent la taille des éléments lorsqu'ils sont affichés sur la page? Rappelons-nous le concept du modèle de boîte et étudions comment les propriétés margin, padding et border fonctionnent pour définir le remplissage externe/interne et les bordures visibles d'un élément. Faisons connaissance avec la propriété box-sizing, qui modifie le comportement standard du modèle de boîte

théorie

3. Styles de texte
Créer une page, c'est avant tout travailler avec du texte. Quelle que soit la beauté du design, si les informations sont difficiles ou impossibles à lire, l’utilisateur quittera rapidement la page. Dans cette leçon, nous nous familiariserons avec les propriétés de base du style de texte.

théorie
essais
exercice

4. Polices et travailler avec elles
Avez-vous entendu l'expression « jouer avec les polices »? Il est temps de faire ça. Nous apprenons à connecter les polices à l'aide de CSS, à contrôler la taille du texte, la conception et à définir l'espacement des lignes. À la fin de la leçon, nous étudierons la propriété de police généralisée, avec laquelle vous pouvez définir 6 styles de texte différents à la fois

théorie
essais
exercice

5. Listes
Les listes font partie intégrante du texte. Ils permettent de regrouper des fragments apparentés, en les unissant selon leur signification. Dans cette leçon, nous explorerons les types de listes disponibles en HTML, pratiquerons les listes imbriquées et aborderons le sujet du style des marqueurs de liste.

théorie
essais
exercice

6. Colonnes
La création d'une mise en page de magazine multi-colonnes était problématique avec CSS. Avec l'avènement de la norme CSS3, un nouveau module est apparu - CSS Multi-column Layout, qui permettait de créer des colonnes avec transfert automatique de contenu. Étudions les capacités du module CSS Columns et les limitations qui sont imposées avec cette méthode de style de texte

théorie
essais
exercice

7. Unités
Tout comme dans le monde réel, le monde de la mise en page utilise des unités de mesure pour indiquer la taille des éléments, le remplissage, la taille du texte, etc. Dans cette leçon, nous nous familiariserons avec les unités de mesure de base et leur relation avec les éléments du site. Étudions le concept d'unités relatives et absolues et identifions la différence entre les unités em et rem

théorie
essais
exercice

8. Éléments multimédias
Les visiteurs d’un site Web aiment non seulement lire du texte, mais perçoivent également des informations à travers des éléments médiatiques: images, vidéo, audio. Comment les ajouter correctement et prendre en compte les différences des navigateurs? Pourquoi l'image sur le site a-t-elle un petit retrait en bas? Explorons cela et un peu plus dans la leçon.

théorie
essais
exercice

9. les tables
Les tableaux sont le cauchemar d’un maquettiste. De nombreuses balises sont utilisées pour les créer, et de petites erreurs peuvent gâcher l'ambiance. Dans cette leçon, étape par étape, nous étudierons la création de tableaux simples et complexes, nous comprendrons d'où peuvent survenir les erreurs et comment les éviter. À la fin de la leçon, vous serez en mesure de créer des tableaux en toute confiance et de ne plus en avoir peur.

théorie
essais
exercice

10. Formes
Les formulaires sont un élément interactif important d’une page Web. Comme les liens, les formulaires assurent une interaction entre l'utilisateur et la page, vous permettant de soumettre des données. Apprenons à créer des formulaires, à ajouter des champs de texte, des champs de sélection, des listes et des boutons. Abordons le sujet de l'accessibilité des formulaires pour les personnes handicapées

théorie
essais
exercice

11. Sélecteurs
Pour cette leçon, nous avons appris et testé des sélecteurs simples qui nous ont permis de sélectionner des éléments par classe, identifiant ou balise. Sinon, comment pouvez-vous sélectionner un élément sur la page? Dans cette leçon, nous analyserons les sélecteurs associés et voisins, apprendrons à utiliser les sélecteurs par attribut

théorie
essais
exercice

12. Pseudo-classes
Continuons le sujet des sélecteurs en CSS et familiarisons-nous avec le concept de pseudo-classe. Apprenons comment les utiliser pour sélectionner des éléments pairs ou impairs, comment ajouter de nouveaux styles de survol souris sur un élément et pourquoi même les éléments seront comme ça en utilisant seulement un certain pseudo-classe. Comprenons les états des éléments et les pseudo-classes structurelles

théorie
essais
exercice

13. Pseudo-éléments
Des éléments manquants sur la page? Les pseudo-éléments viennent à la rescousse - des éléments créés à l'aide de CSS. Dans cette leçon, nous verrons comment les pseudo-éléments sont créés, pourquoi ils sont nécessaires et quelles sont leurs fonctionnalités. Voyons comment les marqueurs de liste sont stylés en CSS

théorie
essais

14. Débordement
Le débordement est une situation dans laquelle le contenu d’un conteneur est plus grand que la taille du conteneur lui-même. Cette situation peut gâcher la mise en page, même pour un maquettiste expérimenté. Nous apprendrons quoi faire avec cela et comment gérer le masquage de contenu à l'aide de la propriété overflow dans cette leçon. Examinons la propriété text-overflow et apprenons comment ajouter des points de suspension dans les textes s'il n'y a pas assez d'espace pour cela.

théorie
essais
exercice

15. Variables CSS
Imaginez que sur un site Web il y ait une douzaine de blocs avec un fond de la même couleur. Vous devez changer toutes ces couleurs. Comment faire cela sans remplacer constamment la couleur dans chaque sélecteur et comment les variables peuvent aider, nous l'apprendrons dans cette leçon. Regardons comment les variables sont créées et utilisées, découvrons la portée et pourquoi les variables globales sont meilleures que les variables par sélecteur

théorie
essais

16. Arrière-plan
Un concepteur de mise en page est souvent confronté à la nécessité de styliser non seulement des éléments spécifiques, tels que des tableaux, des listes, du texte, des éléments multimédias et des formulaires. Parfois, vous devez également styliser les blocs dans lesquels ils se trouvent. Pour ce faire, vous pouvez définir l'arrière-plan du bloc avec le contenu, et nous apprendrons comment procéder en utilisant la propriété background dans cette leçon. Étudions les propriétés de définition de la couleur, de l'image, apprenons à positionner l'arrière-plan et à définir sa taille

théorie
essais

17. Dégradés
Un arrière-plan ou une image d’une seule couleur n’est pas le seul moyen de styliser un bloc. Les artistes et les designers utilisent souvent des dégradés pour créer des arrière-plans: des transitions fluides d'une couleur à l'autre. Dans ce didacticiel, nous apprendrons à créer des dégradés linéaires et radiaux. À l'aide de dégradés et d'astuces, nous étudierons la création de transitions nettes entre les couleurs, et découvrirons également la roue chromatique et comment, avec son aide, trouver des combinaisons de couleurs pour les dégradés.

théorie
exercice

18. Travail indépendant
Tâches supplémentaires qui permettent de consolider la théorie acquise

19. Matériaux additionnels
Articles et vidéos sélectionnés par l'équipe Hexlet. Vous aidera à approfondir le sujet du cours