PARTIE 01 HTML à placer

CHAPITRE 01 Avant de commencer

_LEÇON 01 Que sont HTML, CSS et JavaScript ?
Du HTML pour tout assembler, du CSS pour la mise en forme, et du JavaScript pour exécuter les opérations.
__Pourquoi les éléments écrits en HTML, CSS, etc. sont-ils appelés « documents » ?

LEÇON 02 Mise en place de l'environnement
__Installer un navigateur web
__Installation de VS Code
__Configuration des options pour faciliter la programmation dans VS Code
__Installer des plugins utiles dans VS Code
Notes HTML conviviales de Yalko

CHAPITRE 02 Créer votre première page Web avec des balises de base

LEÇON 03 Créer votre première page Web
Créez un fichier __index.html
__Saisissez le premier élément de la page Web
__Voir le code source de la page

_LEÇON 04 Utilisation de la première balise
__En savoir plus sur les étiquettes
__Balises de titre et balises de paragraphe
__Balises liées au texte
Utilisation de l'attribut __tag

LEÇON 05 Lister plusieurs éléments avec des balises
__Étiquette représentant une liste
__Termes et définitions des listes de tags
Notes HTML conviviales de Yalko

CHAPITRE 03 Insertion de divers éléments dans une page Web

LEÇON 06 Utilisation des balises d'image
__Insertion d'images avec des chemins absolus et relatifs
__Redimensionner l'image

LEÇON 07 Utilisation des tableaux
Balise de tableau de base
__table area tag
Balise de fusion de cellules
__column group tag

_LEÇON 08 Liens vers d'autres sites
Aller au lien avec la balise __a
Déplacez-vous vers l'emplacement souhaité en utilisant la valeur __id
Associer les contacts à des __tags
Notes HTML conviviales de Yalko

CHAPITRE 04 Réception des données saisies par les utilisateurs

_LEÇON 09 Utilisation de la balise de formulaire
Attributs de la balise __form
Regrouper les éléments à l'intérieur de la balise __form

_LEÇON 10 Utilisation de la balise input
__Balises d'entrée liées au texte
Balises d'entrée liées aux nombres
__Vérifiez les balises d'entrée associées
__Autres balises d'entrée
attributs communs de la balise __input

LEÇON 11 Utilisation d'autres balises
balise __textarea
__Balises liées à la sélection d'options
Étiquettes exprimant __ degré
__pre tag
Balise __iframe
__Étiquettes que vous devriez connaître
__Étiquette « Ne rien faire »
Notes HTML conviviales de Yalko

PARTIE 02 Décoration CSS

CHAPITRE 05 Comprendre les bases du CSS

LEÇON 12 Comment appliquer le CSS et les sélecteurs
Trois façons d'appliquer le CSS
__Sélecteur par défaut
Sélecteur de balises
__sélecteur de classe
Sélecteur __id
__sélecteur de groupe

_LEÇON 13 Combinateurs et classes virtuelles
__descendant combinateur
__Frère Combineur
classe virtuelle
Notes CSS amicales de Yalko

CHAPITRE 06 Application des polices et des styles de texte

_LEÇON 14 Styles de police
__Italique et gras
__Taille de la police
Décorez le texte

_LEÇON 15 Styles de paragraphe et de liste
__Alignement et espacement
Style de liste
Notes CSS amicales de Yalko

CHAPITRE 07 Comprendre les modèles en ligne, en bloc et en boîte

_LEÇON 16 Éléments en ligne et éléments de bloc
__Largeur et concept de base
__Ajuster la largeur et la hauteur
__occupent l'espace horizontal
__Appliquer les marges

_LEÇON 17 Modèle de boîte
__taille de l'élément
__Marges extérieures et marges intérieures
Attribut __border
Propriété d'ombre de la boîte __
Notes CSS amicales de Yalko

CHAPITRE 08 Décorer les pages Web avec des couleurs et des images

LEÇON 18 Exprimer les couleurs
Quatre façons d'exprimer la couleur

LEÇON 19 Décorer le fond
Utiliser une image comme arrière-plan
__Ajoutez un dégradé à l'arrière-plan
Notes CSS amicales de Yalko

CHAPITRE 09 POSITIONNEMENT ET MISE EN PAGE

LEÇON 20 Positionnement
attribut __position
propriété __z-index

_LEÇON 21 Mise en page flexible
Flexibilité appliquée aux parents
Flex appliqué à __enfants

_LEÇON 22 Comment masquer des éléments
Trois façons de masquer des éléments en CSS
__Modifier la forme du curseur de la souris
Notes CSS amicales de Yalko

PARTIE 03 Approfondir le HTML

CHAPITRE 10 Utiliser les étiquettes en fonction de leur finalité

_LEÇON 23 Étiquettes en haut
__DOCTYPE
__head tag

_LEÇON 24 Balises sémantiques
__Avantages de l'utilisation des balises sémantiques
__Types d'étiquettes sémantiques

LEÇON 25 : Insertion d’autres médias
__Image SVG
Audio et vidéo
Notes HTML conviviales de Yalko

CHAPITRE 11 Créer un site web accessible à tous

_LEÇON 26 Accessibilité Web
Décrire les images avec l'attribut __alt
__Explication des éléments cachés
attribut __aria-label
attribut __aria-hidden et attribut de rôle
balise __figure et balise figcaption

_LEÇON 27 Nommer pour faciliter la lecture
__Nom basé sur les balises
Nommez-le en fonction de la classe
Nommage avec __BEM
Notes HTML conviviales de Yalko

PARTIE 04 Approfondir le CSS

CHAPITRE 12 Une méthode sophistiquée pour spécifier les éléments

LEÇON 28 Répétition et styles courants
Importer un autre fichier CSS
Utilisation des variables CSS

LEÇON 29 : Les sélecteurs en détail
Sélecteur d'attributs
classe virtuelle

LEÇON 30 : Héritage et réinitialisation
__Biens hérités, biens non hérités
__Réinitialiser toutes les propriétés

_LEÇON 31 Préfixes des fournisseurs
__Utilisation des préfixes de fournisseurs
Notes CSS amicales de Yalko

CHAPITRE 13 Mise en forme des polices et des tableaux

_LEÇON 32 Polices de caractères et polices Web
propriété __font-family
__Application des polices web

_LEÇON 33 Approfondissement du texte
propriété __vertical-align
attribut __white-space
propriété __text-overflow

LEÇON 34 : Mise en forme de table
__Attributs de style de tableau
propriété __display de l'élément de tableau
Notes CSS amicales de Yalko

CHAPITRE 14 Création d'effets avec des transformations de mise en page et des animations

_LEÇON 35 Propriété flottante
__propriété flottante et propriété transparente
__Résoudre le problème de la taille des parents

_LEÇON 36 Mise en page en grille
__Grille appliquée au parent
Grille appliquée aux enfants

LEÇON 37 Transformations et animation
attribut __transform
attribut __transition
propriété __animation
Notes CSS amicales de Yalko

CHAPITRE 15 : Apprenez-en davantage sur la conception web adaptative et le CSS.

LEÇON 38 : Site web adaptatif
Web adaptatif vs. Web réactif
__Créer un site web adaptatif

LEÇON 39 Autres propriétés à connaître
propriété __clip et propriété clip-path
propriété __scroll-snap
attribut __aspect-ratio
propriété __backdrop-filter

_LEÇON 40 Frameworks et bibliothèques
__Front-end framework
Bibliothèque d'icônes
Notes CSS amicales de Yalko

PARTIE 05 Projet final utilisant HTML et CSS

CHAPITRE 16 : Créer un site web pour un cours de programmation

LEÇON 41 Installation du projet et configuration de l'environnement
__Installation du projet
Compléter le fichier __style.css

LEÇON 42 Introduction
__intro.css

LEÇON 43 En-têtes et menus
__header.css

_LEÇON 44 Principale et à propos
__main.css
__about.css

_LEÇON 45 Section HTML et CSS
__html-css.css

_LEÇON 46 Programme d'études
__curriculum.css

LEÇON 47 Nous contacter et pied de page
__contact.css
__footer.css


PARTIE 05 Commande de JavaScript

CHAPITRE 17 Avant de commencer

LEÇON 48 Créer un environnement de pratique
Outils pratiques

LEÇON 49 Utilisation de la console et des commentaires
__console
__annotation
Notes amicales de Yalko sur JavaScript

CHAPITRE 18 : Comprendre les bases de JavaScript

LEÇON 50 Stockage des données dans des variables et des constantes
__variables et constantes
Conventions d'appellation des identifiants

LEÇON 51 Types de données et opérateurs de base
__type de données
__opérateur

LEÇON 52 Objets et tableaux
__objet
__arrangement

_LEÇON 53 Les énoncés conditionnels
instruction __if / else
instruction __switch

_LEÇON 54 Boucles
instruction __pour
instruction __while

_LEÇON 55 Fonctions
Définition de __fonction
Utilisation de la fonction __
Notes amicales de Yalko sur JavaScript

CHAPITRE 19 Ajout de JavaScript à HTML et CSS

LEÇON 56 : Sélection et manipulation des éléments HTML
Concept DOM
Comment sélectionner __éléments
__Comment manipuler les éléments sélectionnés

LEÇON 57 : Ajouter un événement
__événement
Objet __Événement
Notes amicales de Yalko sur JavaScript

CHAPITRE 20 : SUPPLÉMENT DU PROJET FINAL

LEÇON 58 Création d'éléments à partir de données existantes
__Navigation
__à propos

LEÇON 59 Création d'animations d'événements
__Programme d'études
__Contactez-nous
__Bouton de menu mobile

__Trouver

★ Les conférences populaires de YouTube et d'Inflearn sont de retour sous forme de livres mis à jour !
★ La configuration optimale pour apprendre les trois technologies nécessaires à la création de pages web.
★ Un aperçu complet des dernières technologies CSS que même les développeurs en activité peuvent facilement manquer.

Une explication simple et conviviale, compréhensible même par un novice en programmation.

Pour quelqu'un qui ne connaît rien à la programmation, les technologies les plus faciles à apprendre en premier sont HTML et CSS.
Grâce à sa structure intuitive qui permet de vérifier rapidement les résultats, il est idéal pour comprendre les principes de la programmation.
Cependant, il est rare de trouver des développeurs qui l'étudient en profondeur et l'utilisent « correctement ».
Ce livre est organisé de manière systématique afin de fournir une mine de connaissances aux débutants en programmation, des concepts de base aux concepts plus complexes et aux propriétés détaillées, ce qui en fait une ressource précieuse tant pour les développeurs professionnels que pour les éditeurs.

En suivant les étapes une à une, vous pouvez apprendre le HTML, le CSS et le JavaScript dans un seul livre !

Ce livre est organisé en parties selon leur niveau de difficulté.
Commencez par apprendre les bases du HTML et du CSS dans la PARTIE 01~02.
Si cela ne vous suffit pas et que vous souhaitez approfondir vos connaissances, poursuivez avec les parties 3 et 4 pour explorer plus en détail le HTML et le CSS. Dans la partie 5, vous créerez rapidement un site web de cours de programmation en utilisant uniquement les connaissances en HTML et CSS acquises jusqu'à présent.
Bien qu'il soit possible de créer un site web avec seulement deux langages, l'ajout de JavaScript le fait passer à un niveau supérieur.
Par conséquent, dans la PARTIE 06, nous utiliserons les connaissances de base en JavaScript nécessaires à la création de pages Web pour mettre à jour le site Web du cours de programmation que nous avons créé précédemment et finaliser le résultat final.

[Lecteurs qui ont besoin de ce livre]

- Les personnes qui débutent dans l'apprentissage du codage
- Les concepteurs web qui souhaitent autoéditer
- Développeurs souhaitant perfectionner leurs compétences en HTML, CSS et JavaScript
- Les développeurs qui souhaitent étudier en profondeur les principes du HTML, du CSS et du JavaScript.
- Les développeurs qui souhaitent créer un « bon site web » conforme aux normes du web

[Recommandation]

Ma partie préférée de ce livre, ce sont les « Notes amicales de Yalko ».
Je pense que c'est une caractéristique de Yalco de penser au lecteur en résumant sur une seule page les concepts longuement expliqués dans le texte, afin que le lecteur puisse facilement retenir ce qu'il a appris.
De plus, malgré son contenu exhaustif, j'ai trouvé ce livre plus facile à lire que d'autres, grâce à l'accent mis tout au long de l'ouvrage sur les concepts clés.
De plus, le processus d'expérimentation à travers des exemples concrets de projets est structuré de manière systématique, permettant ainsi aux débutants de suivre sans aucune difficulté.
- Kim Bitna / YouTubeuse qui enseigne la programmation (@user-yu8so2ck1z)

Ce livre est basé sur la conférence populaire de Yalko « HTML CSS Selling Properly » sur Infraon, et y ajoute un contenu plus approfondi.
J'ai écrit des livres basés sur des conférences, mais de nos jours, les gens préfèrent les vidéos courtes aux longues, donc il y a eu de nombreuses fois où j'aurais voulu en parler longuement mais je n'ai pas pu.
Si la vidéo offre un aspect dynamique, les livres ont l'avantage de permettre de les ouvrir n'importe où, n'importe quand, et de réfléchir sereinement. Je suis convaincu que même ceux qui ont déjà assisté à la conférence trouveront dans le livre une expérience différente.
- Lee Kun-hee / YouTubeur Gunny Coding (@gunnycoding)

Comme son titre l'indique, « TROP DE GENTILLESSE », ce livre propose l'approche d'apprentissage la plus conviviale et la plus simple que j'aie jamais rencontrée.
J'ai été particulièrement impressionné par la manière systématique dont le contenu était organisé, rendant l'apprentissage facile et ludique, non seulement des notions simples, mais aussi des concepts complexes et difficiles à comprendre, grâce à divers supports complémentaires tels que des images, des résumés, des vidéos et des espaces de jeu.
Ce livre guidera même ceux qui se lancent avec un minimum de motivation vers le véritable plaisir de la programmation grâce à un guide convivial et clair qui ne laissera aucune place à l'ennui.
- Jeon Byeong-woo / YouTubeur To the J (@ttj)

Ce livre couvre en détail tous les aspects, depuis la compréhension conceptuelle du développement web jusqu'aux méthodes d'application pratiques et enfin au projet final, offrant ainsi une expérience de projet de haute qualité.
Plus particulièrement, les deux avantages d'un environnement pratique appelé « terrain de jeu » et de cours en ligne constituent les points les plus attrayants pour les débutants en développement.
Si vous souhaitez savoir si vous avez des aptitudes pour le développement front-end, ou si vous travaillez déjà dans le développement back-end mais que vous manquez d'une compréhension approfondie du front-end, je recommande ce livre pour acquérir des bases solides.
- Jung Woo-hyun / YouTubeur Comgong Senior (@comgongbro)

[Un mot de ceux qui ont assisté à la conférence en premier]

J'ai apprécié la façon dont il expliquait comment configurer un environnement de programmation, m'a donné de nombreux conseils utiles et m'a montré comment poursuivre mes études par moi-même.
- H** -
Le projet final était vraiment excellent.
Je n'ai pas souvent l'occasion de créer mon propre site web, mais utiliser ce que j'ai appris pour en créer un m'a énormément aidé dans mon apprentissage.
- rivière** -
J'ai été impressionné par la composition méticuleuse et détaillée, ainsi que par l'effort déployé pour la rendre facile à comprendre et fournir de nombreuses informations sur les fonctions et les propriétés.
- k** -
J'avais le sentiment de bien transmettre le contenu, j'ai donc beaucoup appris et ce fut une expérience d'apprentissage agréable.
C'était formidable de pouvoir m'entraîner à utiliser les différents éléments, mais les conseils de saisie simples étaient également très utiles car ils me permettaient de mémoriser les balises au fur et à mesure que je les tapais.
- m** -
Cela m'a vraiment aidé à assimiler les notions fondamentales de HTML et de CSS. Je ne me rendais pas compte que le CSS offrait autant de fonctionnalités.
- algues** -
Ce fut une période enrichissante pour apprendre et organiser les principes de fonctionnement de choses que je n'avais utilisées jusque-là que intuitivement.
- Ky** -
* En matière de développement web, il était assez fastidieux de se contenter d'une lecture superficielle du HTML et du CSS, mais il était important de maîtriser les bases, le flux global et de comprendre les dernières tendances.
- article** -