case cochée

Prends rendez-vous avec Claire !
Elle répondra à toutes tes questions :

case cochée
Format et déroulé des formations
case cochée
Financement CPF, les démarches et son fonctionnement
Explication en détail de la valeur ajoutée des formations et de la correspondance avec ton profil et ton projet
case cochée
Rendez-vous avec Simbel
crois pour fermer

Apprenez le responsive web design avec HTML, CSS, Flexbox et CSS Grid.

Créer des sites web responsive
Design
Software engineering
Code & No Code 💻

Créer des sites web responsive

Anthony Welc
groupe
9.4/10 (20 avis)
groupe
Communauté
chapeau de certification
Certification
ICDL - Edition de site web (Wordpress et Dreamweaver)
icone de format
Format
Vidéos à la demande

Les avis

No items found.

Le contenu

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

Le format

Le formateur

emoji d'un héroCréer des sites web responsive
Anthony Welc
Développeur Web
Anthony Welc forme des développeurs depuis 2017. Il est aussi le créateur du programme Hardcoders. Déjà plusieurs milliers d'élèves se sont formés sur ses cours vidéo, principalement sur JavaScript et React.

L'organisme de formation

Créer des sites web responsive

Anthony Welc

Nous formons les dév de leur première ligne de code jusqu'à la fin de leur carrière, principalement sur JavaScript et React. Le nouveau programme Hardcoders est un outils unique en francophonie qui permet aux élèves de pratiquer les leçons en même temps qu'ils apprennent la théorie. L'objectif est de former les développeurs web de demain, autonomes et avec des compétences robustes.

La certification

La communauté