このコースについて
4.8
3,502件の評価
714件のレビュー

100%オンライン

自分のスケジュールですぐに学習を始めてください。

柔軟性のある期限

スケジュールに従って期限をリセットします。

約18時間で修了

推奨:7 hours/week...

英語

字幕:英語

習得するスキル

Web DesignStyle SheetsCascading Style Sheets (CCS)Web Development

100%オンライン

自分のスケジュールですぐに学習を始めてください。

柔軟性のある期限

スケジュールに従って期限をリセットします。

約18時間で修了

推奨:7 hours/week...

英語

字幕:英語

シラバス - 本コースの学習内容

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....
8件のビデオ (合計80分), 8 readings, 2 quizzes
8件のビデオ
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 分
8件の学習用教材
Syllabus10 分
Resources10 分
Help us learn more about you!10 分
Building Your First Web Page10 分
Early coding3 分
Code Placement5 分
Homework One Description10 分
Peer Review1 分
1の練習問題
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....
8件のビデオ (合計79分), 9 readings, 3 quizzes
8件のビデオ
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 分
9件の学習用教材
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 分
2の練習問題
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....
5件のビデオ (合計29分), 5 readings, 1 quiz
5件のビデオ
03-02 Transitions5 分
03-03 Transforms5 分
03-04 Code together - Transitions4 分
03-05 Positioning10 分
5件の学習用教材
Resources1 分
OPTIONAL READINGS - Transitions, Transforms, and Animation2 分
Positioning2 分
Why not a Peer Assignment this week?1 分
Some Fun Links1 分
1の練習問題
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....
7件のビデオ (合計34分), 3 readings, 1 quiz
7件のビデオ
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 分
3件の学習用教材
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....
4 readings
4件の学習用教材
Coursera Options1 分
CodeAcademy - other badge tutorials2 分
Meetups2 分
Post-course Survey10 分
4.8
714件のレビューChevron Right

48%

コース終了後に新しいキャリアをスタートした

44%

コースが具体的なキャリアアップにつながった

17%

昇給や昇進につながった

人気のレビュー

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

by 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

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)

よくある質問

  • 修了証に登録すると、すべてのビデオ、テスト、およびプログラミング課題(該当する場合)にアクセスできます。ピアレビュー課題は、セッションが開始してからのみ、提出およびレビューできます。購入せずにコースを検討することを選択する場合、特定の課題にアクセスすることはできません。

  • コースに登録する際、専門講座のすべてのコースにアクセスできます。コースの完了時には修了証を取得できます。電子修了証が成果のページに追加され、そこから修了証を印刷したり、LinkedInのプロフィールに追加したりできます。コースの内容の閲覧のみを希望する場合は、無料でコースを聴講できます。

さらに質問がある場合は、受講者向けヘルプセンターにアクセスしてください。