Points forts

Crée une tonne de projets et OBTIENS UN MEILLEUR JOB de Développeur Web

Tu veux changer de vie en devenant développeur web ?

Le Programme Hardcoders est pour toi si tu veux :

• Une méthode inédite qui vise l'excellence
• Créer des applications web interactives
• Apprendre les fondamentaux pour designer un site web
• Te former aux techniques modernes
• Si tu es débutant ce programme est parfaitement adapté pour toi.
• Si tu as déjà un peu d'expérience tu iras simplement plus vite.

Objectifs

• Maîtriser HTML
• Maîtriser CSS
• Maîtriser CSS Grid
• Maîtriser Flexbox

Programme

Les bases du HTML

• Ton premier élément HTML
• Comprendre les titres avec l'élément h2
• Informe avec la balise paragraphe
• Remplir la page avec du Lorem Ipsum
• Décommenter du HTML
• Commenter du HTML
• Supprimer un élément HTML
• Introduction aux éléments HTML5
• Ajouter des images
• Créer un lien vers une page externe avec une ancre
• Lier vers une section interne
• Imbriquer un lien dans un paragraphe
• Créer un lien mort avec le dièse
• Transformer une image en lien
• Créer une liste à puces désordonnée
• Créer une liste numérotée
• Créer un champ de texte
• Ajouter un texte indicatif au champ
• Créer un formulaire
• Ajouter un bouton submit
• Utiliser l'attribut required
• Créer des boutons radio
• Créer des boutons checkbox
• Utiliser l'attribue value avec les boutons radio et checkbox
• Sélectionner une option par défaut
• Imbriquer plusieurs éléments dans une div
• Déclarer le Doctype d'un document HTML
• Définir le Head et le Body d'un document HTML

Les bases du CSS

• Changer la couleur du texte
• Utiliser les sélecteurs CSS
• Utiliser les classes
• Mettre en forme plusieurs éléments avec les classes
• Modifier la font-size du texte
• Modifier la police d'écriture
• Importer une Google Font
• Spécifier une police par défaut
• Dimensionner une image
• Ajouter des bordures aux éléments
• Arrondir les bordures border-radius
• Rendre une image circulaire avec border-radius
• Donner une couleur de fond à un élément
• Paramétrer l'id d'un élément
• Utiliser un id pour mettre en forme un élément
• Ajuster le padding d'un élément
• Ajuster la margin d'un élément
• Utiliser une marge négative
• Ajouter un padding différent à chaque côté d'un élément
• Ajouter une margin différente à chaque côté d'un élément
• Utiliser la notation raccourcie pour le padding
• Utiliser la notation raccourcie pour la margin
• Utiliser l'attribut pour sélectionner un élément
• Comprendre la différence entre la position absolute et relative
• Mettre en forme le body
• Style hériter du body
• Rendre un style prioritaire
• Écraser un style par un autre
• Écraser un déclaration de classe par celle d'un id
• Écraser un déclaration de classe par un style inline
• Écraser tous les styles avec !important
• Utiliser les couleurs hexadécimales
• Mélanger des couleurs hexadécimales
• Utilisation la notation raccourcie pour les couleurs hexadécimales
• Utiliser le RGB pour ajouter de la couleur à un élément
• Utiliser RGB pour mélanger des couleurs
• Découverte des variables CSS
• Créer une variable CSS
• Utiliser une variable CSS
• Utiliser une valeur par défaut avec une variable CSS
• Améliorer la compatibilité avec les anciens navigateurs pour les variables CSS
• Hériter d'une variable CSS
• Modifier une variable pour un élément spécifique
• Utiliser une media query pour modifier une variable

CSS niveau 2

• Comprendre la propriété text-align
• Modifier la largeur d'un élément avec width
• Modifier la hauteur d'un élément avec height
• Mettre un texte en gras avec la balise strong
• Souligner du texte avec la balise u
• Rendre un texte italique avec la balise em
• Rayer du texte avec la balise s
• Créer une barre horizontale avec la balise hr
• Modifier la couleur de fond du texte
• Modifier la taille d'un header VS du texte
• Ajouter des ombres grâce à box-shadow
• Changer l'opacité d'un élément
• Utiliser la propriété text-transform pour mettre un texte en majuscule
• Changer la taille de police des titres
• Changer la graisse des titres
• Changer la taille de police des paragraphes
• Modifier l'interligne du texte
• Changer de style au survol de la souris
• Changer la position relative d'un élément
• Déplacer un élément avec les offsets
• Positionner un élément en fonction de son élément parent
• Positionner un élément en fonction de la fenêtre d'affichage
• Déplacer un élément à gauche ou à droite avec float
• Modifier l'ordre d'empilage des éléments avec z-index
• Centrer un élément horizontalement avec margin
• Comprendre les couleurs complémentaires
• Comprendre les triades de couleur
• Modifier la couleur de plusieurs éléments
• Ajuster la teinte d'une couleur
• Ajuster la saturation et la luminosité d'une couleur
• Créer un dégradé linéaire en CSS
• Créer des rayures avec les dégradés CSS
• Créer une texture en utilisant une image
• Changer la taille d'un élément avec la propriété transform scale
• Utiliser la propriété transform scale au survol de la souris
• Utiliser propriété transform skewX pour obliquer un élément sur l'axe X
• Utiliser propriété transform skewY pour obliquer un élément sur l'axe Y
• Créer une forme en CSS
• Créer une forme plus complexe en CSS et HTML
• Comprendre comment les animations fonctionnent en CSS
• Utiliser une animation pour modifier l'état d'un élément au survol
• Modifier le fill mode d'une animation
• Créer du mouvement avec les animations CSS
• Donner une direction visuelle en faisant disparaître un élément
• Animer un élément continuellement avec infinite
• Faire battre un cœur avec les animations CSS
• Animer des éléments à différentes vitesses
• Animer plusieurs éléments à des vitesses variables
• Modifier l'animation timing avec un mot clef
• Comprendre comment fonctionnent les courbes de Bézier
• Utiliser une courbe bézier pour déplacer une forme
• Rendre une animation plus naturelle avec les courbes bézier

Web Design Responsive

• Créer une Media Query
• Rendre une image responsive
• Utiliser une image retina pour les grands affichages
• Rendre le texte responsive

CSS Flexbox

• Utiliser display: flex pour positionner deux éléments
• Ajouter flexbox à un élément
• Utiliser la propriété flex-direction pour faire une ligne
• Appliquer la propriété flex-direction pour créer une ligne
• Utiliser la propriété flex-direction pour faire une colonne
• Appliquer la propriété flex-direction pour créer une colonne
• Aligner des éléments avec la propriété justify-content
• Utiliser la propriété justify-content
• Aligner des éléments avec la propriété align-items
• Utiliser la propriété align-items
• Utiliser la propriété flex-wrap pour envelopper des éléments
• Utiliser la propriété flex-shrink pour rétrécir un élément
• Utiliser la propriété flex-grow pour agrandir un élément
• Utiliser la propriété flex-basis pour paramétrer la taille de base d'un élément
• Utiliser la propriété flex raccourcie
• Utiliser la propriété order pour réarranger les éléments
• Utiliser la propriété align-self

CSS Grid

• Créer une CSS Grid
• Ajouter des colonnes avec grid-template-columns
• Ajouter une ligne avec grid-template-rows
• Utiliser les unités de CSS Grid pour changer la taille des colonnes et des lignes
• Créer un écart entre les colonnes avec grid-column-gap
• Créer un écart entre les lignes avec grid-row-gap
• Ajouter un écart plus rapidement avec grid-gap
• Utiliser grid-column
• Utiliser grid-row
• Aligner un élément horizontalement avec justify-self
• Aligner un élément verticalement avec align-self
• Aligner tous les éléments horizontalement avec justify-items
• Aligner tous les éléments verticalement avec align-items
• Diviser une grille en plusieurs zones
• Placer des éléments dans la grille avec la propriété grid-area
• Utiliser grid-area sans nommer de zones
• Utiliser la fonction repeat
• Utiliser la fonction minmax
• Créer des layouts flexibles avec la propriété auto-fill
• Créer des layouts flexibles avec la propriété auto-fit
• Utiliser des Media Queries pour créer une grille responsive
• Créer une grille dans une grille

Pré-requis

• Pas de pré-requis