本課程是 Web Design for Everybody (Basics of Web Development and Coding) 專項課程 專項課程的一部分
Introduction to CSS3
提供方
課程信息
4.8
3,087 ratings
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.
您將獲得的技能
Web DesignStyle SheetsCascading Style Sheets (CCS)Web Development
教學大綱 - 您將從這門課程中學到什麼
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 個視頻（共 80 分鐘）, 8 個閱讀材料, 2 個測驗
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
章節
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 個閱讀材料, 3 個測驗
8 個視頻
02-01 Box Model13分鐘
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
章節
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 個閱讀材料, 1 個測驗
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
章節
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 個閱讀材料, 1 個測驗
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分鐘
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 個閱讀材料
4 個閱讀材料
Coursera Options1分鐘
CodeAcademy - other badge tutorials2分鐘
Meetups2分鐘
Post-course Survey10分鐘
4.8
45%
83%
17%
熱門審閱
創建者 AF•Dec 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.
創建者 PA•Aug 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.
講師
Colleen van Lent, Ph.D.
LecturerSchool of Information
Charles Severance
Associate ProfessorSchool 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.
常見問題
When will I have access to the lectures and assignments?
Once you enroll for a Certificate, you’ll have access to all videos, quizzes, and programming assignments (if applicable). Peer review assignments can only be submitted and reviewed once your session has begun. If you choose to explore the course without purchasing, you may not be able to access certain assignments.
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.
What is the refund policy?
Is financial aid available?
還有其他問題嗎？請訪問 學生幫助中心。
