This course is part of the Web Design for Everybody: Basics of Web Development & Coding Specialization

4.8
stars
9,167 ratings

Colleen van Lent, Ph.D. +1 more instructor

191,228 already enrolled

Offered By

Web Design for Everybody: Basics of Web Development & Coding SpecializationUniversity of Michigan

About this Course

129,194 recent views

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 take 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.

Flexible deadlines

Reset deadlines in accordance to your schedule.

Shareable Certificate

Earn a Certificate upon completion

100% online

Start instantly and learn at your own schedule.

Course 2 of 5 in the

Web Design for Everybody: Basics of Web Development & Coding Specialization

Approx. 11 hours to complete

English

Could your company benefit from training employees on in-demand skills?

Try Coursera for Business

Skills you will gain

Web Design
Style Sheets
Cascading Style Sheets (CSS)
Web Development

Flexible deadlines

Reset deadlines in accordance to your schedule.

Shareable Certificate

Earn a Certificate upon completion

100% online

Start instantly and learn at your own schedule.

Course 2 of 5 in the

Web Design for Everybody: Basics of Web Development & Coding Specialization

Approx. 11 hours to complete

English

Could your company benefit from training employees on in-demand skills?

Try Coursera for Business

Instructors

Instructor rating

4.83/5 (851 Ratings)

Colleen van Lent, Ph.D.

Lecturer

School of Information

608,913 Learners

11 Courses

Charles Russell Severance

Clinical Professor

School of Information

3,767,399 Learners

56 Courses

Offered by

University of Michigan

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

Syllabus - What you will learn from this course

Content Rating97%(46,950 ratings)

Week1

Week 1

4 hours to complete

Week One: Getting Started with Simple Styling

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.

4 hours to complete

8 videos (Total 80 min), 9 readings, 2 quizzes

8 videos

01.01 Course Welcome7m01-02 Cascading Style Sheets16m01-03 Colors9m01-04 Styling Your Text12m01-05 Code Together9m01-06a Display and Visibility - Part 111m01-06b Display and Visibility - Part 27m01-07 Optional -- Homework Description4m

9 readings

Syllabus10mResources10mHelp us learn more about you!10mSyllabus10mBuilding Your First Web Page10mEarly coding3mCode Placement5mHomework One Description10mPeer Review1m

1 practice exercise

Styling Syntax and Theory30m

Week2

Week 2

4 hours to complete

Week Two: Advanced Styling

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 we move on to new properties that tend to require a little bit of tweaking to get the desired results. In particular we will talk about the Box Model, background images, opacity, float, columns, visibility, and designing for different browsers.

4 hours to complete

8 videos (Total 79 min), 9 readings, 3 quizzes

8 videos

02-01 Box Model13m02-02 Code Together8m02-03 Styling Links and Lists11m02-04 Advanced Selectors12m02-05 Browser Capabilites11m02-06 Code Together7m02-07 Designing For Accessibility6m02-08 Optional - Homework Description6m

9 readings

Resources1mCoding Together1mSupplemental reading on complex selectors20mShorthand rules5mBrowsers6mCode Together2mBackground Images and Opacity6mOptional - The importance of headings10mHomework Two Description8m

2 practice exercises

Optional Practice Quiz: Review30mAdvanced Selectors Quiz30m

Week3

Week 3

1 hour to complete

Week Three: Psuedo-classes, Pseudo-elements, Transitions, and Positioning

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 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. It is also the first step to adding simple animation to your site. 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.

1 hour to complete

5 videos (Total 29 min), 5 readings, 1 quiz

Week4

Week 4

2 hours to complete

Week Four: Putting It All Together

This week I am going to do some code review. I will show you how I used pseudo-classes and pseudo-elements to style a table. Then I give you a demonstration of three different navigation bars that utilize different styling options. We will want to step back and talk about how these different options may affect the accessibility of our site. 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.

2 hours to complete

7 videos (Total 34 min), 3 readings, 1 quiz

25 minutes to complete

Where To Go From Here?

25 minutes to complete

5 readings

Reviews

4.8

1888 reviews

5 stars
82.18%
4 stars
15.55%
3 stars
1.79%
2 stars
0.17%
1 star
0.28%

TOP REVIEWS FROM INTRODUCTION TO CSS3

by PBMay 26, 2020

I expected more content on transform and transitions. Nevertheless, it was a beginners course so i couldn't expect that but it would have been really nice to grasp all that in just one course

by MKSep 25, 2020

This course is a recommendable for all beginners who are interested in designing and styling their web pages. The whole course is interesting and challenging at the end of the course and I enjoyed it.

by AGFeb 24, 2016

This was challenging, but interesting, engaging, and I learned a lot about the different ways to style elements on a page. I feel pretty confident in making my own web page after this course.

by WSDec 29, 2019

I recomend the course it gives you the basic knowledge of ccs3, the teacher and the materials, as well as the asignments are great and very fun to do.

Thanks Coursera for the economic help.

View all reviews

About the Web Design for Everybody: Basics of Web Development & Coding Specialization

This Specialization covers how to write syntactically correct HTML5 and CSS3, and how to create interactive web experiences with JavaScript. Mastering this range of technologies will allow you to develop high quality web sites that, work seamlessly on mobile, tablet, and large screen browsers accessible. During the capstone you will develop a professional-quality web portfolio demonstrating your growth as a web developer and your knowledge of accessible web design. This will include your ability to design and implement a responsive site that utilizes tools to create a site that is accessible to a wide audience, including those with visual, audial, physical, and cognitive impairments.

Frequently Asked Questions

When will I have access to the lectures and assignments?
Access to lectures and assignments depends on your type of enrollment. If you take a course in audit mode, you will be able to see most course materials for free. To access graded assignments and to earn a Certificate, you will need to purchase the Certificate experience, during or after your audit. If you don't see the audit option:
The course may not offer an audit option. 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. If you only want to read and view the course content, you can audit the course for free.
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.

More questions? Visit the Learner Help Center.

Build employee skills, drive business results

Discover Coursera for Business

Introduction to CSS3

About this Course

Skills you will gain