Apprendre le Responsive Web Design

Saisissez l'occasion de faire des économies ! Bénéficiez de 40 % de réduction sur 3 mois de Coursera Plus et d'un accès complet à des milliers de cours.

Apprendre le Responsive Web Design

Ce cours fait partie de plusieurs programmes.

Instructeur : Kevin Powell

Inclus avec

6 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

15 avis

niveau Intermédiaire

Expérience recommandée

2 semaines à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

6 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

15 avis

niveau Intermédiaire

Expérience recommandée

2 semaines à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

Ce que vous apprendrez

Responsive Web Design, CSS, HTML

Compétences que vous acquerrez

Catégorie : Responsive Web Design
Catégorie : Web Development
Catégorie : Web Design and Development
Catégorie : Web Design
Catégorie : Typography
Catégorie : HTML and CSS
Catégorie : Usability

Outils que vous découvrirez

Catégorie : Cascading Style Sheets (CSS)
Catégorie : UI Components

Détails à connaître

Certificat partageable

Ajouter à votre profil LinkedIn

Évaluations

6 devoirs

Enseigné en Anglais

Découvrez comment les employés des entreprises prestigieuses maîtrisent des compétences recherchées

En savoir plus sur Coursera pour les affaires

logos de Petrobras, TATA, Danone, Capgemini, P&G et L'Oreal

Élaborez votre expertise du sujet

Ce cours est disponible dans le cadre de

Lorsque vous vous inscrivez à ce cours, vous devez également sélectionner un programme spécifique.

Apprenez de nouveaux concepts auprès d'experts du secteur
Acquérez une compréhension de base d'un sujet ou d'un outil
Développez des compétences professionnelles avec des projets pratiques
Obtenez un certificat professionnel partageable

Il y a 6 modules dans ce cours

Ce cours vous amènera à un niveau professionnel en matière de Responsive Web Design. Vous apprendrez à construire des mises en page avancées tout en résolvant des défis de codage amusants en cours de route. Permettez-moi de vous poser quelques questions : Voulez-vous apprendre à construire des sites Web réactifs qui ont l'air 100% professionnels ? Voulez-vous être sûr que votre site Web fonctionne bien sur tous les appareils ? Êtes-vous fatigué de sentir que votre CSS est un gâchis ? Si votre réponse est OUI, alors c'est le cours parfait pour vous !

Il vous donne une compréhension profonde du CSS et du design réactif tout en vous gardant pleinement engagé tout au long du chemin. Vous apprendrez à créer quatre mises en page différentes : un blog, une page d'atterrissage, une bannière et un site web d'entreprise. Chacune d'entre elles vous permettra de franchir un nouveau palier. Pour que les connaissances restent gravées dans votre mémoire, des défis de codage interactifs vous sont proposés au fur et à mesure de votre progression. C'est comme si vous et le formateur faisiez de la programmation en binôme ! Ce type d'interactivité rapide n'est tout simplement pas possible avec une autre plateforme que Scrimba !

Le module d'apprentissage plonge dans les fondamentaux de CSS, fournissant aux apprenants une base solide dans la syntaxe CSS, les sélecteurs, les propriétés et les techniques de mise en page pour styliser et structurer efficacement les pages web avec créativité et précision.

Inclus

1 devoir26 plugins

1 devoir Total 30 minutes

Les principes de base du CSS : devoir noté 30 minutes

26 plugins Total 176 minutes

Bienvenue aux leçons interactives ! 1 minute
Bienvenue dans le cours ! 4 minutes
Note importante avant de commencer 1 minute
Introduction au module "CSS Fundamentals 3 minutes
Marge et espacement - Marges et espacement du texte 5 minutes
Marge et remplissage - Réduction des marges 7 minutes
Marge et marge - Cohérence et nouveau type de sélecteur 5 minutes
Éléments Inline et Block 6 minutes
L'élément span 4 minutes
Liens de style 12 minutes
C'est l'heure de l'entraînement ! 22 minutes
Bloc en ligne 5 minutes
Boutons de style 9 minutes
Les bases de la spécificité 5 minutes
Spécificité - deux sélecteurs de même valeur 2 minutes
Sélecteurs de composés 15 minutes
Sélecteurs de composés et spécificité 7 minutes
Une meilleure façon de nommer nos classes CSS 9 minutes
Les propriétés du texte 3 minutes
Famille de polices et piles de polices 6 minutes
Comment utiliser les polices Google 9 minutes
Héritage 2 minutes
Utilisation, écrasement et application de l'héritage 4 minutes
La mise en place de l'ensemble 8 minutes
Assembler le tout - le CSS 18 minutes
Solution au défi et synthèse du module 4 minutes

Le module d'apprentissage forme les développeurs à adopter un état d'esprit responsive lors de la création de sites web et d'applications en HTML et CSS.

Inclus

1 devoir45 plugins

1 devoir Total 30 minutes

Commencer à penser de manière réactive Devoir noté 30 minutes

45 plugins Total 246 minutes

Commencer à penser de manière réactive 3 minutes
Unités CSS 3 minutes
Unités CSS - Pourcentage 6 minutes
Contrôler la largeur des images 5 minutes
largeur minimale et maximale 3 minutes
Unités CSS - L'unité em 5 minutes
Le problème de l'ems 2 minutes
Unités CSS - rems 5 minutes
Choix de l'unité à utiliser 4 minutes
ems et rems - un exemple 8 minutes
Rafraîchissement sur Flexbox et mise en place d'un peu de HTML 8 minutes
Styles de base et configuration des colonnes 7 minutes
Ajout de la couleur d'arrière-plan 4 minutes
Réglage de la largeur des colonnes 4 minutes
Espacement des colonnes 4 minutes
Contrôle de la position verticale des éléments flexibles 5 minutes
Principes de base de la requête média 10 minutes
Rendre notre mise en page réactive avec flex-direction 7 minutes
l'orientation de la flexion expliquée 3 minutes
Créer une navigation 5 minutes
Utiliser flexbox pour commencer à styliser notre navigation 8 minutes
Rendre notre navigation attrayante 7 minutes
Ajout du soulignement 4 minutes
Une navigation plus compliquée 7 minutes
Rendre la navigation réactive 7 minutes
Regarder le reste du projet 4 minutes
Mise en place de la structure 8 minutes
Structure de l'article en vedette 5 minutes
La page d'accueil - HTML pour les articles récents 2 minutes
page d'accueil - html pour l'aparté 6 minutes
Démarrage du CSS pour notre page 15 minutes
Commencer la mise en page - une vue d'ensemble 9 minutes
Commencer à penser mobile d'abord 3 minutes
Mise en page de l'article vedette 6 minutes
Modifier l'ordre visuel avec flexbox 5 minutes
Jouer avec la position du titre et les inconvénients des marges négatives 5 minutes
Mise en forme des articles récents pour les grands écrans 8 minutes
Modifier la taille des images avec object-fit 4 minutes
Mise en place des widgets et des points d'arrêt de la conversation 7 minutes
Utilisation d'une nouvelle pseudo-classe pour envelopper la page d'accueil 7 minutes
Création de la page des messages récents 3 minutes
Mise en place de la page À propos de moi 4 minutes
Régler quelques détails en suspens 4 minutes
Note importante : La balise méta viewport 4 minutes
Synthèse du module 3 minutes

Améliorez vos compétences en matière de style en HTML et CSS, et équipez-vous de techniques avancées et de meilleures pratiques pour créer des conceptions visuellement époustouflantes et soignées sur le web.

Inclus

1 devoir38 plugins

1 devoir Total 25 minutes

Amélioration de notre style Cahier d'évaluation 25 minutes

38 plugins Total 172 minutes

Il est temps d'améliorer notre style 3 minutes
Un coup d'œil sur la hauteur des lignes 5 minutes
text-transform : uppercase 4 minutes
Faciliter la lecture grâce à l'espacement des lettres 4 minutes
Un joli truc de couleur avec rgba() 5 minutes
images d'arrière-plan 4 minutes
Images d'arrière-plan et chemin d'accès au fichier (note très importante) 2 minutes
Contrôler nos images d'arrière-plan 8 minutes
BBQ Splash Page - Introduction du projet 3 minutes
Écrire le HTML pour la page d'accueil du BBQ 7 minutes
Commencer à se styliser - BBQ Splash Page 11 minutes
Ajout de l'image de fond - BBQ Splash Page 4 minutes
Modification de l'ordre - BBQ Splash Page 4 minutes
Styliser la zone de contenu principale - Page d'accueil BBQ 3 minutes
Ajout de la requête média - BBQ Splash Page 4 minutes
Configurer la typographie pour les grands écrans - BBQ Splash Page 2 minutes
Commencer à préparer les choses pour les grands écrans - BBQ Splash Page 3 minutes
Unités de visualisation 7 minutes
Ajout d'unités de visualisation à la page d'accueil du barbecue 2 minutes
Saisir la taille de la boîte : border-box 7 minutes
Utiliser flexbox pour centrer verticalement le contenu principal - BBQ Splash Page 3 minutes
Correction de la section d'introduction sur les petits et grands écrans - BBQ Splash Page 3 minutes
Traiter les écrans de très grande taille solution #1 4 minutes
Solution pour les écrans de très grande taille #2 5 minutes
Les bases des formulaires 11 minutes
Les bases du formulaire - les attributs du formulaire 4 minutes
Les bases de la stylisation des formulaires 5 minutes
Ajout du formulaire - BBQ Splash Page 4 minutes
Commencer à styliser le formulaire - BBQ Splash Page 4 minutes
Donner de l'allure aux intrants - BBQ Splash Page 4 minutes
Dégradés CSS 6 minutes
Styliser le bouton - BBQ Splash Page 5 minutes
Transitions de base 5 minutes
Introduction aux transformations (et un petit mot sur la performance) 3 minutes
Nous pouvons effectuer une transition plus poussée que :hover 3 minutes
Dégradés de la bordure 5 minutes
Mélange d'images, de couleurs et de dégradés avec le mode de mélange d'arrière-plan 4 minutes
Récapitulation 2 minutes

Ce module porte votre compréhension de Flexbox à de nouveaux sommets, en explorant des concepts et des techniques avancés qui maximisent la puissance de Flexbox pour construire des mises en page complexes et réactives

Inclus

1 devoir17 plugins

1 devoir Total 15 minutes

Faire passer Flexbox à l'étape suivante - devoir noté 15 minutes

17 plugins Total 76 minutes

Faire passer la boîte à outils au niveau supérieur 2 minutes
flex-direction, flex-wrap et flex-flow 5 minutes
justify-content et align-items et leur relation avec flex-direction 7 minutes
Explorer align-content 4 minutes
flex-grow et flex-shrink expliqués 5 minutes
base flexible 4 minutes
La propriété abrégée de flex 4 minutes
Alignement des éléments individuels sur le "soi" aligné 2 minutes
Marge auto et flexbox 4 minutes
Construire un composant carte avec flexbox - Introduction 3 minutes
Construire un composant de carte avec flexbox - Le balisage 5 minutes
Construire un composant de carte avec flexbox - Typographie 6 minutes
Construire un composant carte avec flexbox - Mise en page mobile 11 minutes
Construire un composant de carte avec flexbox - Grands écrans, première partie 5 minutes
Construire un composant de carte avec flexbox - Grands écrans, deuxième partie 5 minutes
Centrer quelque chose à l'écran avec flexbox 2 minutes
Synthèse du module 2 minutes

Libérez la puissance de la Grille CSS, vous permettant de créer des grilles de page polyvalentes et complexes avec facilité, précision et des capacités réactives.

Inclus

1 devoir19 plugins

1 devoir Total 25 minutes

Grille CSS : L'outil ultime de mise en page Devoir noté 25 minutes

19 plugins Total 96 minutes

Introduction à la Grille CSS 3 minutes
Mise en place d'une grille de base 5 minutes
Placer des éléments sur la grille 4 minutes
abréviations grid-row et grid-column 5 minutes
Colonnes de filtrage 2 minutes
Quelques similitudes avec flexbox 5 minutes
Utilisation d'une grille pour notre composant carte 13 minutes
La propriété d'espacement de la grille 3 minutes
Ajouter l'écart à notre carte 3 minutes
La grille implicite et explicite 6 minutes
Explorer les zones quadrillées 8 minutes
les zones de grille et les requêtes médiatiques 6 minutes
minmax() 4 minutes
l'unité fr 3 minutes
minmax() et l'unité fr 2 minutes
Utilisation de la grille - partie 1 12 minutes
Utilisation de la grille - partie 2 4 minutes
répéter() 3 minutes
auto-fit et auto-fill 5 minutes

Découvrez comment concevoir des sites web époustouflants et riches en fonctionnalités, avec une finesse esthétique exceptionnelle.

Inclus

1 devoir29 plugins

1 devoir Total 20 minutes

Passer à l'étape suivante Devoir noté 20 minutes

29 plugins Total 121 minutes

Passer au niveau supérieur 2 minutes
Analyse de la mise en page 3 minutes
Début du travail sur la page d'accueil 3 minutes
Le HTML de la page d'accueil 4 minutes
Les premières lignes de CSS doivent toujours être écrites 4 minutes
Configurer notre grille pour les petits écrans 3 minutes
Poursuite de la zone des héros 5 minutes
La section "info 4 minutes
Mise en place du pied de page 3 minutes
Utiliser Font Awesome pour nos icônes 5 minutes
Terminer le pied de page 2 minutes
Configuration de la grille et du héros pour les écrans plus grands 5 minutes
Configuration du reste de la page pour les écrans plus grands 6 minutes
Commencer à styliser notre navigation 3 minutes
Configurer notre navigation pour les petits écrans avec le positionnement 5 minutes
Création du bouton de fermeture 3 minutes
Ajouter le bouton "ouvrir" à notre navigation 4 minutes
Adapter la navigation aux grands écrans 2 minutes
Amélioration de la navigation et de la zone du héros 6 minutes
Création de la deuxième page 2 minutes
Style de la page à propos 9 minutes
Explorer les ombres en boîte pour obtenir l'effet sur nos images 5 minutes
Utilisation de pseudo-éléments pour ajouter les lignes jaunes 5 minutes
Ajouter la barre jaune à nos titres 3 minutes
Création de la page de contact 4 minutes
Style du formulaire de contact 7 minutes
Adapter le formulaire de contact aux écrans plus larges 6 minutes
Les points en suspens 5 minutes
Vous avez réussi ! 3 minutes

Obtenez un certificat professionnel

Ajoutez ce titre à votre profil LinkedIn, à votre curriculum vitae ou à votre CV. Partagez-le sur les médias sociaux et dans votre évaluation des performances.

Instructeur

Kevin Powell

Scrimba

5 Cours 9 742 apprenants

Offert par

Scrimba

En savoir plus sur Développement mobile et web

Packt
CSS Modern Responsive Web Design – Build 5 Websites
Cours
Statut : Essai gratuit
Scrimba
Build a Responsive Website with HTML and CSS
Cours
Statut : Essai gratuit
Board Infinity
Mastering Responsive UI Design for Modern Web Development
Cours
Statut : Essai gratuit
Scrimba
Responsive Web Essentials: Design & Navigation
Cours

Pour quelles raisons les étudiants sur Coursera nous choisissent-ils pour leur carrière ?

Felipe M.

Étudiant(e) depuis 2018

’Pouvoir suivre des cours à mon rythme à été une expérience extraordinaire. Je peux apprendre chaque fois que mon emploi du temps me le permet et en fonction de mon humeur.’

Jennifer J.

Étudiant(e) depuis 2020

’J'ai directement appliqué les concepts et les compétences que j'ai appris de mes cours à un nouveau projet passionnant au travail.’

Larry W.

Étudiant(e) depuis 2021

’Lorsque j'ai besoin de cours sur des sujets que mon université ne propose pas, Coursera est l'un des meilleurs endroits où se rendre.’

Chaitanya A.

’Apprendre, ce n'est pas seulement s'améliorer dans son travail : c'est bien plus que cela. Coursera me permet d'apprendre sans limites.’

Avis des étudiants

5 stars
73,33 %
4 stars
13,33 %
3 stars
6,66 %
2 stars
0 %
1 star
6,66 %

Affichage de 3 sur 15

Révisé le 30 sept. 2023

Detailed, hands-on and fun. This course simplifies intimidating CSS concepts like Flex-box, CSS Grid and Media - Queries. The instructor is amazing. Thanks so much for this terrific course.

Révisé le 23 déc. 2023

I have been following Kevin from youtube, he really puts of the great content, I really like the way he teaches to make site responsive effortlessly

Voir plus d’avis

Ouvrez de nouvelles portes avec Coursera Plus

Accès illimité à 10,000+ cours de niveau international, projets pratiques et programmes de certification prêts à l'emploi - tous inclus dans votre abonnement.

Faites progresser votre carrière avec un diplôme en ligne

Obtenez un diplôme auprès d’universités de renommée mondiale - 100 % en ligne

Découvrir les diplômes

Rejoignez plus de 3 400 entreprises mondiales qui ont choisi Coursera pour les affaires

Améliorez les compétences de vos employés pour exceller dans l’économie numérique

Foire Aux Questions

Pour accéder aux supports de cours, aux devoirs et pour obtenir un certificat, vous devez acheter l'expérience de certificat lorsque vous vous inscrivez à un cours. Vous pouvez essayer un essai gratuit ou demander une aide financière. Le cours peut proposer l'option "Cours complet, pas de certificat". Cette option vous permet de consulter tous les supports de cours, de soumettre les évaluations requises et d'obtenir une note finale. Cela signifie également que vous ne pourrez pas acheter un certificat d'expérience.

Lorsque vous vous inscrivez au cours, vous avez accès à tous les cours de la spécialisation et vous obtenez un certificat lorsque vous terminez le travail. Votre certificat électronique sera ajouté à votre page Réalisations - de là, vous pouvez imprimer votre certificat ou l'ajouter à votre profil LinkedIn.

Oui, pour certains programmes de formation, vous pouvez demander une aide financière ou une bourse si vous n'avez pas les moyens de payer les frais d'inscription. Si une aide financière ou une bourse est disponible pour votre programme de formation, vous trouverez un lien de demande sur la page de description.