Об этом курсе: 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.
Автор: Мичиганский университет
Преподаватели: Colleen van Lent, Ph.D., Lecturer
School of Information
Преподаватели: Charles Severance, Associate Professor
School of Information
| Основные сведения | Course 2 of 5 in the Web Design for Everybody (Basics of Web Development and Coding) Specialization |
| Язык | English |
| Как пройти курс | Чтобы пройти курс, выполните все оцениваемые задания. |
| Оценки пользователей |
Программа курса
НЕДЕЛЯ 1
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 видео, 8 материалов для самостоятельного изучения
- 阅读: Syllabus
- 阅读: Resources
- 阅读: Help us learn more about you!
- 阅读: Building Your First Web Page
- Видео: 01-02 Cascading Style Sheets
- Видео: 01-03 Colors
- Видео: 01-04 Styling Your Text
- 阅读: Early coding
- Видео: 01-05 Code Together
- Видео: 01-06a Display and Visibility - Part 1
- Видео: 01-06b Display and Visibility - Part 2
- 阅读: Code Placement
- 阅读: Homework One Description
- 阅读: Peer Review
- Видео: 01-07 Optional -- Homework Description
Оцениваемый: Styling Syntax and Theory
Оцениваемый: Your First Styled Site
НЕДЕЛЯ 2
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 видео, 9 материалов для самостоятельного изучения, 1 practice quiz
- 阅读: Resources
- 阅读: Coding Together
- Видео: 02-02 Code Together
- Видео: 02-03 Styling Links and Lists
- Видео: 02-04 Advanced Selectors
- 阅读: Supplemental reading on complex selectors
- 练习测验: Optional Practice Quiz: Review
- 阅读: Shorthand rules
- Видео: 02-05 Browser Capabilites
- 阅读: Browsers
- 阅读: Code Together
- Видео: 02-06 Code Together
- 阅读: Background Images and Opacity
- Видео: 02-07 Designing For Accessibility
- 阅读: Optional - The importance of headings
- 阅读: Homework Two Description
- Видео: 02-08 Optional - Homework Description
Оцениваемый: Advanced Selectors Quiz
Оцениваемый: Advanced Style
НЕДЕЛЯ 3
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 видео, 5 материалов для самостоятельного изучения
- 阅读: Resources
- Видео: 03-02 Transitions
- Видео: 03-03 Transforms
- 阅读: OPTIONAL READINGS - Transitions, Transforms, and Animation
- Видео: 03-04 Code together - Transitions
- 阅读: Positioning
- Видео: 03-05 Positioning
- 阅读: Why not a Peer Assignment this week?
- 阅读: Some Fun Links
Оцениваемый: Final Quiz
НЕДЕЛЯ 4
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 видео, 3 материалов для самостоятельного изучения
- 阅读: Resources
- Видео: 04-02 Creating Navigation Menus
- Видео: 04-03 Accessible Navigation
- 阅读: OPTIONAL: A Change to the Accessibility of Headings
- Видео: 04-04 Creating Navigation Menus 2
- Видео: 04-05 Creating Navigation Menus 3
- 阅读: Final Project Description
- Видео: 04-06 Optional - Homework Description
- Видео: 04-07 Conclusion
Оцениваемый: Styling A Table
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 материалов для самостоятельного изучения
- 阅读: Coursera Options
- 阅读: CodeAcademy - other badge tutorials
- 阅读: Meetups
- 阅读: Post-course Survey
Часто задаваемые вопросы
Как это работает
课程作业
每门课程都像是一本互动的教科书，具有预先录制的视频、测验和项目。
来自同学的帮助
与其他成千上万的学生相联系，对想法进行辩论，讨论课程材料，并寻求帮助来掌握概念。
证书
获得正式认证的作业，并与朋友、同事和雇主分享您的成功。
Авторы
Мичиганский университет
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.
Стоимость
| Приобрести курс | |
|---|---|
| Получить доступ к материалам курса | Доступен |
| Получить доступ к оцениваемым материалам курса | Доступен |
| Получить итоговую оценку | Доступен |
| Earn a shareable Course Certificate | Доступен |
Рейтинги и отзывы
A very interesting and easy to follow course on the basics of CSS3. The lecturer goes into all the expected topics in a simple manner, with clear language and a well structured approach.
The course also expects you to code along and experiment with the given knowledge. It is by no means a raw, expository course and instead takes the "learning by doing" approach, while providing all the guidance and resources.
For a self-paced course, the hands on interactions were very detailed and helpful. The instructor's down-to-earth way of speech also helped demystify the topic.
thanks for being so amazing
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
very nice course.