Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Découvre tous les secrets de la mise en page grâce au CSS
Rating: 4.5 out of 5(61 ratings)
1,620 students
Created byThomas Giraud
Last updated 11/2021
French

What you'll learn

  • Comprendre comment fonctionne le design sur le web ;
  • Utiliser l'inspecteur Chrome comme un dieu afin d'effectuer toutes les modifications de ton choix ;
  • Comprendre la dernière version du langage CSS dans son intégralité ;
  • Donner vie à n'importe laquelle de tes idées, des tes envies ou tes inspirations ;
  • Construire des sites web magnifiques composés d'un bon contenu mais surtout d'une allure qui déchire ;
  • Structurer n'importe quel fichier CSS pour construire des pages web propres et optimisées ;
  • Comprendre les systèmes plus poussés du CSS que certains développeurs Web ne maîtrisent toujours pas ;
  • Et bien plus encore !

Explore related topics

Course content

2 sections • 19 lectures • 1h 33m total length

  • Bienvenue dans ce cours !3:21

    Dans cette vidéo :

    Objectif de cette formation :

    • Comprendre la mise en forme en CSS ;

    • Apprendre le langage CSS ;

    • Être capable d'appliquer du style à tous les éléments de ton choix sur le web - peu importe la plateforme ;

    • Reproduire tes designs préférés sur ta propre plateforme ;

    • Te différencier de la concurrence ;

    • Créer des animations sur ton site web ;


    Comment communiquer ?

    • Sur slack en cliquant sur le lien en ressource ;

    Slack est un outil composé de channels publiques et privés sur lequel nous pourrons tous échanger. Slack est l'outil phare des startups et jeunes entreprises car il permet une énorme flexibilité.
    Tu peux l'ouvrir directement depuis ton navigateur ou bien télécharger l'application Slack.


    Plan du cours :

    Module 1 : Introduction

    Dans ce module nous allons poser toutes les bases !
    Un module orienté théorie pour comprendre comment fonctionne le CSS et comment l'utiliser.


    Module 2 : Les propriétés générales

    Lançons nous sans plus attendre dans la pratique !!
    Dans ce module, nous découvrirons toutes les propriétés générales qu'on utilise en CSS.

    À la fin de ce module, plus de secrets : Commentaires, styles de texte, hauteur - largeur, liens, ombres et j'en passe, nous allons voir tout ça un par un. Chaque vidéo en deux partie :
    - Première partie théorie sur slides
    - Deuxième partie pratique sur l'éditeur de texte et le navigateur !


    Module 3 : Les propriétés poussées

    On a déjà bien avancé... Mais... Il nous manque certaines propriétés pour passer au niveau supérieur en CSS.

    Et le niveau supérieur est indispensable pour boucler cette formation. Nous parlerons de filtres, transformations ou polices personnalisées mais SURTOUT d'animations, de transitions et d'événements.


    Bon visionnage et n'oublie pas de pratiquer à chaque étape ?

  • À quoi sert le CSS ?9:41

    Dans cette vidéo :


    Le CSS (Ou Cascading Style Sheets) sert à mettre en forme du HTML.

    Dans mise en forme nous parlons principalement de style et de design.

    Tu as du le voir dans la partie HTML, du HTML brut c'est pas très sexy du tout et aucun site web (même les plus moches) utilise au moins un peu de CSS.

    Une fois toutes les notions acquises, le CSS ne se limite qu'à ta créativité, tu peux absolument tout faire avec du CSS...

    Et quand je dis tout, c'est tout !!

    Plus de limites, il faut juste connaître les notions.

    Tu peux ajouter du Style CSS partout, sur n'importe quelle plateforme que tu utilises :

    • Site fait depuis 0 ;

    • Wordpress ;

    • Shopify

    • Tous les autres CMS ;

    • Et même des sites improbables munis d'un encart pour ajouter du CSS.


    Grâce au CSS tu pourras te différencier complètement sur la toile.

    Certaines notions (comme les couleurs) te serviront partout - Logiciels de montage photo / video et j'en passe !

    Tu pourras créer des boutons, des effets, des animations, des cartes, effectuer des calculs,

    Bref, c'est sans limite.

    Hate de te présenter la suite !

  • Comment écris-t-on du CSS ? Syntaxe !1:46

    Dans cette vidéo :


    La structure de base du CSS est la suivante :

    Indicateur {
        Propriété: Unité;
    }


    Exemple :

    h1 {
        color: blue;
    }

    Nous verrons toutes les propriétés, indicateurs et unités dans la suite des vidéos ?

  • 3 façons d'intégrer du CSS et celle que nous allons utiliser4:51

    Dans cette vidéo :


    3 Façons d’intégrer du CSS :

    • La première c’est de l’intégrer directement en attribut de balise grâce à l’attribut : style="Votre style"

    • La deuxième façon c’est d’écrire son CSS dans la balise html <head>. Pour ce faire, html dispose d’une balise <style> dans laquelle nous pourrons écrire du CSS.

    • La troisième manière et la meilleure, c’est de séparer son code CSS de son code HTML. Pour ce faire il suffit de créer un nouveau fichier avec l’extension .css. Ce fichier devra ABSOLUMENT être appelé dans la balise html <head> grâce à cette balise : <link rel="stylesheet" type="text/css" href="votrefichierstyle.css">

  • Qu'est-ce qu'un Sélecteur et comment l'utiliser ?8:55

    Dans cette vidéo :


    Class ou ID : Ces deux attributs sont particuliers en HTML puisqu’ils n’ont pas été créés pour préciser le fonctionnement d’un élément HTML en particulier (ce qui est normalement le rôle de tout attribut HTML) mais vont être principalement utilisés pour cibler certains éléments HTML et leur appliquer des styles en CSS.

    On peut identifier un élément de plusieurs manières :

    • Le sélecteur général ou * : Va viser tous les éléments ;

    • Par la balise : Va viser toutes les balises concernées ;

    • Par la Class : Va viser tous les éléments ayant la même class ;

    • Par l'ID : Va viser l'élément ayant l'ID en question


    ⚠️ Au système de priorités :

    • Du CSS en ligne en attribut de balise vaut 1000 - C'est le plus important et sera lu en priorité ;

    • Du CSS sur un ID vaut 100 - Moins important que le style en ligne mais plus important que le reste ;

    • Du CSS sur une Class vaut 10 ;

    • Sur une balise : 1 - C'est celui qui est le moins prioritaire.

  • Comment s'organise le système de parenté en CSS ?3:55

    Dans cette vidéo :


    Si deux class sont modifiées 2 fois, c'est celle du dessous qui sera interprétée car un fichier CSS est lu de haut en bas.

    Exemple CSS :

    .text {
        color: blue;
    }

    .text {
        color: green;
    }


    Rendra les éléments qui ont la class="text", verts et non bleus.

    D'autre part, si la class="text" est appliquée à un conteneur, exemple HTML :

    <div class="text">

        <p>Hello</p>

        <p>Hello</p>

        <p>Hello</p>

    </div>


    Toutes les balises p à l'intérieur seront vertes :)

  • Comment et pourquoi utiliser l'inspecteur de son navigateur ?4:22

    Dans cette vidéo :

    L’inspecteur Google Chrome peut se définir par la «Console» également. C’est plus court et c’est le terme le plus souvent utilisé.

    Pour ouvrir la Console, voici le raccourci clavier pour Mac : Cmd + Option/Alt + C

    Les autres raccourcis claviers sur Google Chrome :

    • Cmd + T = Ouvrir un nouvel onglet

    • Cmd + Shift + T = Ouvrir le dernier onglet fermé (Peut sauver des vies)

    • Cmd + W = Quitter l’onglet

    • Cmd + N = Ouvrir une fenêtre

    • Cmd + Shift + N = Ouvrir une fenêtre de navigation privée

    • Ctrl + Tab = Naviguer entre les onglets

    • Ctrl + Shift + Tab = Naviguer entre les onglets dans l’autre sens

    • Cmd + L = Accéder à la barre d’adresse

    • Cmd + A = Sélectionner tout le contenu

    • Cmd + X = Couper (Supprimer + Copier)

    • Cmd + C = Copier

    • Cmd + V = Coller

    • Tous les raccourcis clavier ici : https://support.google.com/chrome/answer/157179?hl=fr

  • Quel est le processus de mise en forme d'un élément en CSS ?2:41

    Dans cette vidéo :


    Pour mettre en forme du HTML, respecte bien ces étapes ! Elles te feront gagner du temps :

    1. Identifier l'élément avec la console ;

    2. Appliquer du style directement depuis la console ;

    3. Si le résultat nous convient, alors on sauvegarde le code en l'insérant directement dans notre fichier CSS.

  • Quelles sont les unités de mesure en CSS ?8:12

    Dans cette vidéo :


    Unités de mesure :

    • Pixels : px

    • Pouces : in

    • Centimetres : cm

    • Milimetres : mm

    • Points : pt

    • Viewport height : vh - Taille calculée en fonction de la hauteur de votre page

    • Viewport width : vw - Taille calculée en fonction de la largeur de votre page

    • Choisir son unité de mesure : https://graphiste.com/blog/unites-mesure-css

  • Comment utiliser les couleurs ? 3 façons d'utiliser les couleurs en CSS !5:15

    Dans cette vidéo :


    Différents moyens d'afficher de la couleur :

    • Hexadécimal : #000000 = Noir - Nombre hexadécimal en 00 et FF

    • RGB : rgb(255, 255, 255) = Noir - Nombre décimal entre 0 et 255

    • Standard : Black = Noir,


    Voici toutes les couleurs supportées par les navigateurs : https://www.w3schools.com/cssref/css_colors.asp

Requirements

  • Bases dans le langage HTML
  • Une dose de motivation ;
  • Une envie d'apprendre et se former ;
  • Un ordinateur ;
  • Une tasse de café ;

Description

Tu te demandes comment certains sites web peuvent avoir un si beau rendu ?

Sache que le CSS ne rendra pas ton site beau par magie : C'est l'utilisation que tu vas en faire qui fera la différence.

Tu as bien compris, il ne faut pas se contenter d'apprendre bêtement chaque notions. Il faut les combiner pour arriver à des résultats magnifiques.

Heureusement, tu es bien tombé, le CSS c'est ma grande spécialité !

Commencer avec le CSS peut sembler facile mais le CSS est en fait très (très très) profond. C'est pourquoi je vais te proposer un parcours bien pensé du début jusqu'à la fin pour ne rien louper de ce merveilleux langage.

Ce cours couvre tout : nous commençons par les bases en découvrant ce qu'est le CSS et à quoi il sert, comment il fonctionne et comment nous l'utilisons.

Plus nous avancerons, plus nous nous plongerons dans des sujets de plus en plus approfondis.

Comme d'habitude, nous le ferons en montrant à la fois des exemples pratiques et théorique pour couvrir chaque notions.

Le CSS ne sert pas seulement à appliquer de simples styles à nos pages web, il sert à leur donner vie !

Ce n'est pas qu'une simple façon de mettre de la couleur mais un langage complet pour refléter toute la puissance de ta marque, entreprise ou projet !

Ce cours est divisé en 3 parties :

  • Comprendre toutes les bases de CSS et les outils ;

  • Les propriétés générales qui te serviront partout ;

  • Les propriétés poussées qui te permettront de dompter le langage à tout jamais.


Prêt à exploser toutes les limites du design sur le Web ?

Who this course is for:

  • Tu veux apprendre et coder en CSS ;
  • Tu n'as aucune connaissance en CSS ;
  • Tu es impatient de découvrir toutes les dernières fonctionnalités CSS ;
  • Tu as mal compris certains concepts propres au CSS ;
  • Tu veux améliorer tes compétences en CSS et couvrir toutes les notions.

Report abuse