Scribd
Importer
27 vues18 pages

Presentation HTML CSS Extended

La formation HTML & CSS proposée par SuperSimpleDev est un cours complet de 5 heures destiné aux débutants, couvrant les bases du développement web, y compris la structure des pages avec HTML et la stylisation avec CSS. Les objectifs incluent l'apprentissage des éléments HTML, l'utilisation de CSS pour la mise en forme, et la pratique de concepts de design responsive. Le document aborde également des sujets avancés comme les pseudo-classes, les variables CSS, et l'accessibilité des pages web.

Transféré par

oubouh.ayoub.2005
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PPTX, PDF, TXT ou lisez en ligne sur Scribd
27 vues18 pages

Presentation HTML CSS Extended

La formation HTML & CSS proposée par SuperSimpleDev est un cours complet de 5 heures destiné aux débutants, couvrant les bases du développement web, y compris la structure des pages avec HTML et la stylisation avec CSS. Les objectifs incluent l'apprentissage des éléments HTML, l'utilisation de CSS pour la mise en forme, et la pratique de concepts de design responsive. Le document aborde également des sujets avancés comme les pseudo-classes, les variables CSS, et l'accessibilité des pages web.

Transféré par

oubouh.ayoub.2005
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PPTX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 18

Formation HTML & CSS

Présentation basée sur la formation


SuperSimpleDev
Introduction à HTML & CSS
• Dans le cadre de ma formation, j’ai choisi de
suivre une vidéo éducative sur YouTube
intitulée Cours complet HTML et CSS -
Débutant à Pro. Ce cours, proposé par la
chaîne SuperSimpleDev, m’a permis de
découvrir les bases essentielles du
développement web et de mieux comprendre
la structure et la stylisation des pages web.
Présentation de la vidéo et de la chaîne
• Nom de la chaîne : SuperSimpleDev
• Titre de la vidéo : Cours complet HTML et CSS -
Débutant à Pro
• Durée : Environ 5 heures
• Description : Cette vidéo complète s’adresse aux
débutants et couvre les fondamentaux du
développement web en utilisant HTML pour
structurer les pages et CSS pour leur mise en forme.
Objectifs de la formation
• Cette formation vise à :
a. Acquérir une compréhension des éléments de
base du HTML (titres, paragraphes, images,
liens, etc.).
b. Apprendre à utiliser le CSS pour styliser et
personnaliser les pages web.
c. Mettre en pratique les concepts de conception
web, tels que le design responsive pour
s'adapter aux différents écrans.
Chapitre 1
 Créer une Structure de Base en HTML

• Je crée un paragraphe avec la balise


<p>.
• Je place un bouton avec la balise
<button>.
• Je mets un lien vers YouTube avec la
balise <a>.

• href="https://www.youtube.com/" : L'URL vers laquelle le lien pointe


(YouTube dans ce cas).
• target="blank" : Permet d'ouvrir le lien dans un nouvel onglet du
navigateur.
Chapitre 2
 Créer et Styliser des Boutons en HTML et CSS
• Je crée trois boutons dans le fichier HTML avec des balises
<button>.
• Je stylise chaque bouton en utilisant des classes CSS :
• Je définis une couleur de fond, des bordures, et des coins arrondis.
• Je modifie la taille, le texte et le comportement au survol.
• Je rends chaque bouton unique grâce aux classes .subscribe-
button, .join-button et .tweet-button.

Le resultat
 Pour le bouton "SUBSCRIBE" :

• Je définis la couleur de fond avec background-color: rgb(200, 0, 0)


pour le rendre rouge.
• Je mets la couleur du texte en blanc avec color: white.
• Je supprime la bordure avec border : none.
• Je fixe une hauteur de 36px et une largeur de 105px pour la taille
du bouton.
• Je rends les coins légèrement arrondis avec border-radius: 2px.
• Je configure le curseur pour qu'il devienne une main au survol avec
cursor: pointer.
• J’ajoute un espace entre ce bouton et les autres avec margin-right:
8px
 Pour le bouton "JOIN" :

• Je mets une couleur de fond blanche avec background-color:


white.
• Je définis une bordure bleue avec border-color: rgb(41, 118,
211) et un style solide grâce à border-style: solid.Je précise
une largeur de bordure de 1px avec border-width: 1px.
• Je choisis un texte bleu avec color: rgb(41, 118, 211) pour
harmoniser avec la bordure.
• Je règle la hauteur à 36px et la largeur à 62px pour une
apparence compacte.
• Je rends les coins légèrement arrondis avec border-radius:
2px.
• Je fais en sorte que le curseur devienne une main au survol
avec cursor: pointer.
 Pour le bouton "Tweet" :

• Je choisis une couleur de fond bleue avec background-color: rgb(2,


158, 255).
• Je mets le texte en blanc avec color: white.
• Je supprime les bordures avec border: none.
• Je ajuste la taille avec une hauteur de 36px et une largeur de 74px.
• Je donne des coins très arrondis avec border-radius: 18px.
• Je rends le texte plus visible en utilisant une police en gras avec
font-weight: bold et une taille de texte de 15px avec font-size: 15px.
• Je ajoute un espace à gauche pour séparer ce bouton des autres
avec margin-left: 8px.
• Je configure le curseur pour qu'il devienne une main au survol avec
cursor: pointer.
Les pseudo-classes CSS
• - Les pseudo-classes permettent de styliser des
éléments selon leur état.
• - Exemple :
• ```css
• a:hover {
• color: red;
• }
• ```
• > Change la couleur des liens au survol.
Les pseudo-éléments CSS
• - Les pseudo-éléments permettent de styliser une
partie spécifique d'un élément.
• - Exemple :
• ```css
• p::first-line {
• font-weight: bold;
• }
• ```
• > Met en gras la première ligne des paragraphes.
Les variables CSS
• - Exemple de variable :
• ```css
• :root {
• --main-color: #3498db;
• }

• body {
• color: var(--main-color);
• }
• ```
• > Simplifie la gestion des couleurs et autres valeurs répétitives.
Les unités CSS avancées
• - Les unités CSS utiles :
• - `vh` et `vw` : Pourcentage de la
hauteur/largeur de la fenêtre.
• - `em` et `rem` : Taille relative à la police.
• - `fr` : Fraction de l'espace dans un conteneur
Grid.
Les éléments sémantiques HTML
• - Les éléments sémantiques donnent un sens
au contenu :
• - `<header>` : En-tête de la page ou section.
• - `<footer>` : Pied de page.
• - `<main>` : Contenu principal.
• - `<section>` : Regroupe des contenus
connexes.
Accessibilité et bonnes pratiques
• - Rendre les pages web accessibles :
• - Ajouter des attributs `alt` aux images.
• - Utiliser des balises sémantiques.
• - Vérifier les contrastes de couleur.
• - Tester avec des lecteurs d'écran.
Outils pour les développeurs
• - Outils pour déboguer et tester le code :
• - **Inspecteur d'éléments** des navigateurs
(Chrome DevTools, Firefox Developer Tools).
• - Validateurs de code HTML/CSS.
• - Générateurs de couleurs et de palettes.

Vous aimerez peut-être aussi