課程信息
4.8
3,178 個評分
665 個審閱
專項課程
100% 在線

100% 在線

立即開始,按照自己的計劃學習。
可靈活調整截止日期

可靈活調整截止日期

根據您的日程表重置截止日期。
完成時間(小時)

完成時間大約為18 小時

建議:6 hours/week...
可選語言

英語(English)

字幕:英語(English)...

您將獲得的技能

Web DesignStyle SheetsCascading Style Sheets (CCS)Web Development
專項課程
100% 在線

100% 在線

立即開始,按照自己的計劃學習。
可靈活調整截止日期

可靈活調整截止日期

根據您的日程表重置截止日期。
完成時間(小時)

完成時間大約為18 小時

建議:6 hours/week...
可選語言

英語(English)

字幕:英語(English)...

教學大綱 - 您將從這門課程中學到什麼

1
完成時間(小時)
完成時間為 5 小時

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....
Reading
8 個視頻(共 80 分鐘), 8 個閱讀材料, 2 個測驗
Video8 個視頻
01-02 Cascading Style Sheets16分鐘
01-03 Colors9分鐘
01-04 Styling Your Text12分鐘
01-05 Code Together9分鐘
01-06a Display and Visibility - Part 111分鐘
01-06b Display and Visibility - Part 27分鐘
01-07 Optional -- Homework Description4分鐘
Reading8 個閱讀材料
Syllabus10分鐘
Resources10分鐘
Help us learn more about you!10分鐘
Building Your First Web Page10分鐘
Early coding3分鐘
Code Placement5分鐘
Homework One Description10分鐘
Peer Review1分鐘
Quiz1 個練習
Styling Syntax and Theory26分鐘
2
完成時間(小時)
完成時間為 5 小時

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....
Reading
8 個視頻(共 79 分鐘), 9 個閱讀材料, 3 個測驗
Video8 個視頻
02-02 Code Together8分鐘
02-03 Styling Links and Lists11分鐘
02-04 Advanced Selectors12分鐘
02-05 Browser Capabilites11分鐘
02-06 Code Together7分鐘
02-07 Designing For Accessibility6分鐘
02-08 Optional - Homework Description6分鐘
Reading9 個閱讀材料
Resources1分鐘
Coding Together1分鐘
Supplemental reading on complex selectors20分鐘
Shorthand rules5分鐘
Browsers6分鐘
Code Together2分鐘
Background Images and Opacity6分鐘
Optional - The importance of headings10分鐘
Homework Two Description8分鐘
Quiz2 個練習
Optional Practice Quiz: Review26分鐘
Advanced Selectors Quiz32分鐘
3
完成時間(小時)
完成時間為 1 小時

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....
Reading
5 個視頻(共 29 分鐘), 5 個閱讀材料, 1 個測驗
Video5 個視頻
03-02 Transitions5分鐘
03-03 Transforms5分鐘
03-04 Code together - Transitions4分鐘
03-05 Positioning10分鐘
Reading5 個閱讀材料
Resources1分鐘
OPTIONAL READINGS - Transitions, Transforms, and Animation2分鐘
Positioning2分鐘
Why not a Peer Assignment this week?1分鐘
Some Fun Links1分鐘
Quiz1 個練習
Final Quiz18分鐘
4
完成時間(小時)
完成時間為 3 小時

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....
Reading
7 個視頻(共 34 分鐘), 3 個閱讀材料, 1 個測驗
Video7 個視頻
04-02 Creating Navigation Menus3分鐘
04-03 Accessible Navigation7分鐘
04-04 Creating Navigation Menus 23分鐘
04-05 Creating Navigation Menus 35分鐘
04-06 Optional - Homework Description6分鐘
04-07 Conclusion2分鐘
Reading3 個閱讀材料
Resources1分鐘
OPTIONAL: A Change to the Accessibility of Headings2分鐘
Final Project Description7分鐘
完成時間(小時)
完成時間為 15 分鐘

Where To Go From Here?

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....
Reading
4 個閱讀材料
Reading4 個閱讀材料
Coursera Options1分鐘
CodeAcademy - other badge tutorials2分鐘
Meetups2分鐘
Post-course Survey10分鐘
4.8
職業方向

45%

完成這些課程後已開始新的職業生涯
工作福利

83%

通過此課程獲得實實在在的工作福利
職業晉升

17%

加薪或升職

熱門審閱

創建者 AFDec 26th 2015

Excellent course! Well paced and the course really builds skills in using CSS3! Highly recommend this course to anyone looking to get a good grounding in CSS or who wants to go over the basics again.

創建者 PAAug 20th 2018

The lecturer is a marvellous person. She makes the course very engaging. It takes you through most of the challenges I shall encounter as I progress in the field. I shall continue to study with her.

講師

Avatar

Colleen van Lent, Ph.D.

Lecturer
School of Information
Avatar

Charles Severance

Associate Professor
School of Information

關於 University of Michigan

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

關於 Web Design for Everybody (Basics of Web Development and Coding) 專項課程

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....
Web Design for Everybody (Basics of Web Development and Coding)

常見問題

  • 注册以便获得证书后,您将有权访问所有视频、测验和编程作业(如果适用)。只有在您的班次开课之后,才可以提交和审阅同学互评作业。如果您选择在不购买的情况下浏览课程,可能无法访问某些作业。

  • 您注册课程后,将有权访问专项课程中的所有课程,并且会在完成课程后获得证书。您的电子课程证书将添加到您的成就页中,您可以通过该页打印您的课程证书或将其添加到您的领英档案中。如果您只想阅读和查看课程内容,可以免费旁听课程。

還有其他問題嗎?請訪問 學生幫助中心