Bases de l'aménagement moderne - cours gratuit d'Hexlet, formation 9 heures, Date: 5 décembre 2023.
Miscellanea / / December 06, 2023
Vous en apprendrez davantage sur le balisage HTML et les capacités de la norme HTML5 moderne. Vous acquerrez également des connaissances de base sur le style à l'aide de CSS: apprenez à connecter des styles, à utiliser des sélecteurs et à travailler en cascade. En plus du HTML et du CSS, vous apprendrez à travailler avec les outils de débogage de mise en page intégrés au navigateur, en particulier Google Chrome DevTools. En conséquence, vous apprendrez à utiliser le langage de balisage HTML pour mettre en page du texte sur un site Web et vous familiariserez également avec les règles de base de l'utilisation du CSS et du style de texte.
Vous pourrez immédiatement mettre en pratique vos nouvelles compétences - nous étudierons les éditeurs de mise en page et les plugins correspondants. A la fin de chaque leçon vous trouverez de petites tâches indépendantes. Ils visent à une compréhension plus pratique du sujet traité et sont donc fortement recommandés pour leur mise en œuvre.
Les bases de la mise en page vous seront utiles si vous décidez d'étudier le développement Web, quelle que soit la direction. Les connaissances acquises dans ce cours aident les programmeurs à baliser les données et à les afficher sur le site. Ce cours s'adresse aux débutants et aux développeurs qui n'ont jamais rencontré
Introduction
Le cours « Principes de base de la mise en page moderne » constitue la base pour apprendre les bases de la mise en page de sites Web HTML et CSS. Dans cette leçon, nous parlerons brièvement de ce que nous apprenons pendant le cours et de la manière dont ces connaissances peuvent être appliquées dans la pratique.
Introduction au HTML
La leçon est consacrée à la mise en page HTML à partir de zéro. Nous parlons du rôle des attributs et étudions le schéma général de description des balises HTML.
Modèle de bloc
Quels éléments sont responsables du cadre de la page et lesquels aident au processus de stylisme ou d'ajout de parties fonctionnelles? Faisons connaissance avec les éléments HTML en bloc et en ligne et étudions l'influence des styles sur la largeur finale des éléments.
HTML sémantique
L'objectif principal de toute mise en page HTML est de transmettre la signification des blocs. Dans cette leçon, nous explorerons les capacités sémantiques de la dernière norme HTML5 et en apprendrons davantage sur l'accessibilité du Web.
Structure de base d'un document HTML
Tout document HTML possède une structure de base composée de balises et d'éléments de service. Le navigateur en a besoin pour afficher correctement les informations. Dans cette leçon, nous examinerons chaque ligne de cette structure.
Bases CSS
Le langage CSS a été créé pour la conception visuelle d'une page Web. Nous étudions les capacités de base du langage et découvrons comment les utiliser avec HTML. Nous apprenons à inclure des fichiers CSS et à nous familiariser avec les types de sélecteurs de base.
Cascade en CSS
Qu’est-ce que la cascade et comment ça marche en CSS? La leçon est consacrée aux différences dans les priorités des sélecteurs et à la possibilité de les utiliser dans vos projets.
Outils de développement Chrome
Lors de la conception d'un site Web, il est important de trouver les erreurs à temps ou de comprendre comment convertir correctement le bloc dont nous avons besoin. Auparavant, cela se faisait principalement à la main. De nos jours, les navigateurs modernes disposent d’une fonction d’inspecteur Web. Considérons les capacités de l'un d'eux - Chrome DevTools.
Éditeurs de code
Pour enregistrer votre travail, vous avez besoin d'un éditeur de code. Dans cette leçon, nous verrons comment installer Visual Studio Code. Il s'agit d'un outil puissant qui peut être utilisé non seulement pour la mise en page, mais également pour la programmation dans n'importe quel langage.
Emmet
Étudions l'un des plugins les plus utiles pour les concepteurs de mise en page - Emmet. Cela accélérera le balisage du code HTML et supprimera la plupart des étapes de routine.
Publication sur Internet
Pour mettre un projet sur Internet, vous devez utiliser l'hébergement - un serveur spécial qui stockera les fichiers et y donnera accès via un nom de domaine. Dans ce didacticiel, nous examinerons l'hébergement GitHub gratuit.
Editeur graphique
Il existe plusieurs éditeurs majeurs sur le marché. Certains d’entre eux sont spécifiques à un seul système d’exploitation, d’autres peuvent être installés sur n’importe lequel d’entre eux. Dans cette section, examinons les principales étapes lorsqu'un maquettiste travaille avec l'éditeur en ligne Figma.
Travail indépendant
Tâches supplémentaires qui permettent de consolider la théorie acquise
Matériaux additionnels
Articles et vidéos sélectionnés par l'équipe Hexlet. Vous aidera à approfondir le sujet du cours