When you enroll in this course, you'll also be enrolled in this Specialization.
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 5 modules in this course
The web today is almost unrecognizable from the early days of white pages with lists of blue links. Now, sites are designed with complex layouts, unique fonts, and customized color schemes. This course will show you the basics of Cascading Style Sheets (CSS3). The emphasis will be on learning how to write CSS rules, how to test code, and how to establish good programming habits.
When done correctly, the styling of a webpage can enhance your page. When done incorrectly the result can be worse than no styling at all. To ensure that your sites do not put up barriers for people with cognitive and/or physical disabilities, you will learn how to evaluate pages using the standardized POUR accessibility guidelines. Upon completion of the course, learners will be able to sketch a design for a given HTML page. Using that design they will use CSS to implement the design by adding fonts, colors, and layouts.
This is the second course in the Web Design For Everybody specialization. Subsequent courses focus on adding interaction with JavaScript and enhancing the styling with Responsive Design.
It will be difficult to complete this course if you do not have access to a laptop or desktop computer for the homework.
Welcome to Introduction to CSS3! In this course you will learn how to style your pages by taking advantage of the power of CSS3. We will focus on both proper syntax (how to write your styling rules) and the importance of accessibility design (making sure that your style enhances your site, not make it harder to navigate). It is so important that you jump in ready to make mistakes and typos in this course. The only way you will really understand the material is to practice typing it in on your own as often as possible.
Week Two: Advanced Selectors, Display, and Designing for Accessibility
Module 2•5 hours to complete
Module details
Colors and fonts are just the start to styling your page. The nice thing about starting with these properties is that they are usually very straightforward to implement. You pick a color and boom - instant, expected results. This week you will learn more about something called the display property. If you took the HTML course with us you know that some elements (like images) can be displayed side-by-side on the screen while others (like paragraphs) are placed underneath each other. I really like showing people the grid and flex properties to give you a little more power about where things can go on the screen. After learning how to style links and lists we will talk about more advanced selectors. Have you ever noticed on a web page that some links are blue and others are purple, depending upon if you have clicked on the links? How is it possible to style some anchor tags and not others?
This week has my favorite styling -- the box model. Learning how to add borders, padding, and margin can really make your page attractive. We end this week with the subject of positioning -- how to get elements to stick to a certain part of your page. Think about annoying pop-up ads. How do the programmers get them to stay RIGHT IN THE MIDDLE OF THE SCREEN despite the fact that you keep trying to scroll them away.
What's included
3 videos7 readings1 assignment
Show info about module content
3 videos•Total 29 minutes
Box Model•14 minutes
Code Together: Box Model•5 minutes
Positioning•10 minutes
7 readings•Total 53 minutes
Resources•1 minute
Borders•20 minutes
Margin and Padding•10 minutes
Code Together: Box Model•10 minutes
Positioning•1 minute
Additional Resources•10 minutes
Why not a Peer Assignment this week?•1 minute
1 assignment•Total 30 minutes
Final Quiz•30 minutes
Week Four: Pseudo-classes, Pseudo-elements, and a Final Project
Module 4•5 hours to complete
Module details
This week will be heavy on demos. You will learn how to style pseudo-classes (e.g. a link that has been visiting, an element that has the mouse hovering over it) and pseudo-elements (e.g. the first-letter of a heading, the first line of a paragraph). These elements are not difficult to style, but do require careful coding.
The final step to completing this course is the completion of the peer-graded project. You will have the chance to demonstrate the ability to follow styling guidelines while still putting your own personal touch on the project. Just remember, you need to validate your work for proper syntax and accessibility.
What's included
7 videos3 readings1 peer review1 app item
Show info about module content
7 videos•Total 42 minutes
Pseudo Classes and Elements •3 minutes
Code Together: Styling Images with Pseudo-classes•10 minutes
Transitions•6 minutes
Transforms•5 minutes
Accessible Navigation•7 minutes
Final Project Description•7 minutes
Closing•3 minutes
3 readings•Total 21 minutes
Resources•1 minute
Additional Resources•10 minutes
Final Project Description•10 minutes
1 peer review•Total 210 minutes
Final Project: Create your site!•210 minutes
1 app item•Total 10 minutes
Final Project: Optional Gallery Submission•10 minutes
Week Five: Where To Go From Here?
Module 5•11 minutes to complete
Module details
If you would like to do more now that you have finished this course, I have a few recommendations. The most important thing is that you continue to practice your skills and always have "something" that you are working on.
What's included
2 readings
Show info about module content
2 readings•Total 11 minutes
Coursera Options•1 minute
Post-Course Survey•10 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.
Instructors
Instructor ratings
Instructor ratings
We asked all learners to give feedback on our instructors based on the quality of their teaching style.
The mission of the University of Michigan is to serve the people of Michigan and the world through preeminence in creating, communicating, preserving and applying knowledge, art, and academic values, and in developing leaders and citizens who will challenge the present and enrich the future.
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
Jennifer J.
Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
Larry W.
Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
Chaitanya A.
"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."
Learner reviews
4.8
9,652 reviews
5 stars
82.47%
4 stars
15.14%
3 stars
1.85%
2 stars
0.17%
1 star
0.35%
Showing 3 of 9652
A
AW
5·
Reviewed on Sep 4, 2020
A great course for the beginners who had completed there html course and want to add some style to there website ,well organised really different than other courses.Thank you university of michigan
A
AA
5·
Reviewed on Jun 13, 2020
I came here knowing basically nothing about CSS. I admit that I learned a lot more stuff than I thought CSS even had. It is a wonderful course, and I am definitely continuing the specialization.
M
MW
5·
Reviewed on Dec 6, 2016
Excellent for learning how to learn about styling webpages. I'm not very artistic when it comes to using pen and paper, but I've really learned how to express myself creatively through this course.
When will I have access to the lectures and assignments?
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.
What will I get if I subscribe to this Specialization?
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.
Is financial aid available?
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.