Beyond Basic CSS: Typography, Color, Effects, & Animation

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.

Ce cours n'est pas disponible en Français (France)

Nous sommes actuellement en train de le traduire dans plus de langues. Consultez les langues disponibles.

Beyond Basic CSS: Typography, Color, Effects, & Animation

Ce cours fait partie de Spécialisation "Web Development for Beginners"

Enseigné en Français (doublage IA)

Instructeur : William Mead

Inclus avec

4 modules

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

niveau Intermédiaire

Certaines connaissances prérequises

1 semaine à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

4 modules

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

niveau Intermédiaire

Certaines connaissances prérequises

1 semaine à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

Compétences que vous acquerrez

Catégorie : Web Content Accessibility Guidelines
Catégorie : Web Design
Catégorie : Usability
Catégorie : HTML and CSS
Catégorie : User Interface (UI) Design
Catégorie : Visualization (Computer Graphics)
Catégorie : Web Design and Development
Catégorie : Color Theory
Catégorie : Typography
Catégorie : Animations

Outils que vous découvrirez

Catégorie : Cascading Style Sheets (CSS)

Détails à connaître

Certificat partageable

Ajouter à votre profil LinkedIn

Évaluations

4 devoirs

Enseigné en Français (doublage IA)

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 fait partie de la Spécialisation "Web Development for Beginners"

Lorsque vous vous inscrivez à ce cours, vous êtes également inscrit(e) à cette Spécialisation.

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 4 modules dans ce cours

In this course, you’ll learn how type communicates and how styling and organization of written content affects the message. You’ll look at advanced features of web fonts and see how type designers are taking the fields of digital type to the next level. Then, you’ll learn about color, color theory, and the practice of using color in your digital products and work with color by exploring gradients, other effects, and work to create a website using techniques learned in this course. Finally, we’ll wrap up the course by learning how to create animations in CSS using transitions, 2d and 3d transformations, as well as keyframes to create sophisticated animations on the web.

Welcome to the course! In this first module, we will start talking about typography. It is often said that 90% of web design is typography, so understanding the basics of how type communicates and how the styling and organization of written content affects the message and speaks to your audience is super important. Let’s get started!

Inclus

12 vidéos1 lecture1 devoir2 sujets de discussion

12 vidéos Total 101 minutes

Course Introduction 3 minutes
Module 1 Introduction 2 minutes
History of Typography on the Web, Part 1 5 minutes
History of Typography on the Web, Part 2 8 minutes
History of Typography on the Web, Part 3 8 minutes
Optional Web Font Setup 13 minutes
Basic Web Fonts, Part 1 6 minutes
Basic Web Fonts, Part 2 7 minutes
Basic Web Fonts, Part 3 12 minutes
Basic Web Fonts, Part 4 13 minutes
Basic Web Fonts, Part 5 13 minutes
Basic Web Fonts, Part 6 12 minutes

1 lecture Total 1 minute

Course Navigation and Safety Statement 1 minute

1 devoir Total 20 minutes

Module 1 Quiz 20 minutes

2 sujets de discussion Total 25 minutes

Learning Goals 10 minutes
Module 1 Discussion 15 minutes

Welcome to the second module! In this module we will look at some more advanced features of web fonts and see how type designers are taking the field of digital type to the next level. We will also dive more into color, color theory, and the practice of using color in your digital products. There are also exciting developments for the use of color on websites through CSS that we will explore.

Inclus

12 vidéos1 devoir1 sujet de discussion

12 vidéos Total 92 minutes

Module 2 Introduction 1 minute
Advanced Web Fonts, Part 1 6 minutes
Advanced Web Fonts, Part 2 10 minutes
Advanced Web Fonts, Part 3 9 minutes
Advanced Web Fonts, Part 4 10 minutes
Typography and Usability in Design 12 minutes
Color Spaces and Formats, Part 1 6 minutes
Color Spaces and Formats, Part 2 7 minutes
Color Spaces and Formats, Part 3 9 minutes
Color in Design, Part 1 6 minutes
Color in Design, Part 2 7 minutes
Color in Design, Part 3 9 minutes

1 devoir Total 30 minutes

Module 2 Quiz 30 minutes

1 sujet de discussion Total 15 minutes

Module 2 Discussion 15 minutes

Welcome to the third module! In this module we will continue to work with color by exploring gradients, as well as other effects such as drop shadows and repeating background patterns. You will follow this up by creating a whole website using the techniques learned so far in the course, putting it all together, and hosting it on GitHub.

Inclus

16 vidéos1 devoir1 sujet de discussion

16 vidéos Total 99 minutes

Module 3 Introduction 1 minute
CSS Backgrounds & Effects, Part 1 7 minutes
CSS Backgrounds & Effects, Part 2 8 minutes
CSS Backgrounds & Effects, Part 3 3 minutes
CSS Backgrounds & Effects, Part 4 7 minutes
CSS Backgrounds & Effects, Part 5 5 minutes
CSS Backgrounds & Effects, Part 6 8 minutes
Blog Project, Part 1 7 minutes
Blog Project, Part 2 8 minutes
Blog Project, Part 3 7 minutes
Blog Project, Part 4 7 minutes
Blog Project, Part 5 6 minutes
Blog Project, Part 6 5 minutes
Blog Project, Part 7 8 minutes
Blog Project, Part 8 6 minutes
Blog Project, Part 9 5 minutes

1 devoir Total 20 minutes

Module 3 Quiz 20 minutes

1 sujet de discussion Total 15 minutes

Module 3 Discussion 15 minutes

Welcome to the fourth and final module! In this module you will learn how to create animations in CSS. You will use transitions, 2d and 3d transformations, as well as keyframes to create sophisticated animations for the web. Along the way, you will learn about easing and how to use a few positioning properties to help construct sophisticated animations that could be included in your web pages.

Inclus

20 vidéos1 devoir2 sujets de discussion

20 vidéos Total 115 minutes

Module 4 Introduction 2 minutes
CSS Transitions, Part 1 6 minutes
CSS Transitions, Part 2 5 minutes
CSS Transitions, Part 3 4 minutes
CSS Transitions, Part 4 9 minutes
CSS Transitions, Part 5 5 minutes
CSS Transforms, Part 1 6 minutes
CSS Transforms, Part 2 8 minutes
CSS Transforms, Part 3 3 minutes
CSS Transforms, Part 4 4 minutes
CSS Transforms, Part 5 9 minutes
CSS Transforms, Part 6 9 minutes
Positioning Basics, Part 1 4 minutes
Positioning Basics, Part 2 5 minutes
Keyframe Animations, Part 1 6 minutes
Keyframe Animations, Part 2 8 minutes
Keyframe Animations, Part 3 7 minutes
Keyframe Animations, Part 4 12 minutes
Animation Practice 3 minutes
Course Summary 2 minutes

1 devoir Total 30 minutes

Module 4 Quiz 30 minutes

2 sujets de discussion Total 30 minutes

Module 4 Discussion 15 minutes
Self-Reflection 15 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

William Mead

University of California, Davis

8 Cours 326 621 apprenants

Offert par

University of California, Davis

En savoir plus sur Mobile and Web Development

Statut : Essai gratuit
Packt
Real-World Projects & Advanced Animations
Cours
Statut : Essai gratuit
Coursera
Typography and Color Theory in Design with Canva
Cours
Statut : Essai gratuit
Scrimba
CSS UI Effects: Shadows, Gradients & Animations
Cours
Statut : Essai gratuit
Packt
Styling with CSS – Layouts and Visual Design
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.’

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

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.