Beyond Basic CSS: Typography, Color, Effects, & Animation
Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Beyond Basic CSS: Typography, Color, Effects, & Animation
This course is part of Web Development for Beginners Specialization
Instructor: William Mead
Included with
Ask Coursera
Skills you'll gain
Tools you'll learn
Details to know
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- Learn new concepts from industry experts
- Gain a foundational understanding of a subject or tool
- Develop job-relevant skills with hands-on projects
- Earn a shareable career certificate
There are 4 modules in this course
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!
What's included
12 videos1 reading1 assignment2 discussion prompts
12 videos•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 reading•Total 1 minute
- Course Navigation and Safety Statement•1 minute
1 assignment•Total 20 minutes
- Module 1 Quiz•20 minutes
2 discussion prompts•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.
What's included
12 videos1 assignment1 discussion prompt
12 videos•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 assignment•Total 30 minutes
- Module 2 Quiz•30 minutes
1 discussion prompt•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.
What's included
16 videos1 assignment1 discussion prompt
16 videos•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 assignment•Total 20 minutes
- Module 3 Quiz•20 minutes
1 discussion prompt•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.
What's included
20 videos1 assignment2 discussion prompts
20 videos•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 assignment•Total 30 minutes
- Module 4 Quiz•30 minutes
2 discussion prompts•Total 30 minutes
- Module 4 Discussion•15 minutes
- Self-Reflection•15 minutes
Earn a career certificate
Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.
Instructor
Offered by
Explore more from Mobile and Web Development
- Status: Free Trial
Course
- Status: Free Trial
Course
- Status: Free Trial
Course
- Status: Free Trial
Course
Why people choose Coursera for their career
Frequently asked 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.
More questions
Financial aid available,