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.
Este curso faz parte do Programa de cursos integrados Web Design for Everybody: Basics of Web Development & Coding
Introdução ao CSS3
oferecido por
Programa de cursos integrados Web Design for Everybody: Basics of Web Development & CodingUniversidade de Michigan
Informações sobre o curso
252,620 visualizações recentes
Resultados de carreira do aprendiz
50%
comecei uma nova carreira após concluir estes cursos
44%
consegui um benefício significativo de carreira com este curso
15%
recebi um aumento ou promoção
Habilidades que você terá
Web DesignStyle SheetsCascading Style Sheets (CCS)Web Development
Resultados de carreira do aprendiz
50%
comecei uma nova carreira após concluir estes cursos
44%
consegui um benefício significativo de carreira com este curso
15%
recebi um aumento ou promoção
100% on-line
Comece imediatamente e aprenda em seu próprio cronograma.
Prazos flexíveis
Redefinir os prazos de acordo com sua programação.
Aprox. 17 horas para completar
Sugerido: 7 hours/week
Inglês
Legendas: Inglês
Programa - O que você aprenderá com este curso
5 horas para concluir
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.
5 horas para concluir
8 vídeos (Total 80 mín.), 8 leituras, 2 testes
8 videos
01-02 Cascading Style Sheets16min
01-03 Colors9min
01-04 Styling Your Text12min
01-05 Code Together9min
01-06a Display and Visibility - Part 111min
01-06b Display and Visibility - Part 27min
01-07 Optional -- Homework Description4min
8 leituras
Syllabus10min
Resources10min
Help us learn more about you!10min
Building Your First Web Page10min
Early coding3min
Code Placement5min
Homework One Description10min
Peer Review1min
1 exercício prático
Styling Syntax and Theory26min
5 horas para concluir
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.
5 horas para concluir
8 vídeos (Total 79 mín.), 9 leituras, 3 testes
8 videos
02-01 Box Model13min
02-02 Code Together8min
02-03 Styling Links and Lists11min
02-04 Advanced Selectors12min
02-05 Browser Capabilites11min
02-06 Code Together7min
02-07 Designing For Accessibility6min
02-08 Optional - Homework Description6min
9 leituras
Resources1min
Coding Together1min
Supplemental reading on complex selectors20min
Shorthand rules5min
Browsers6min
Code Together2min
Background Images and Opacity6min
Optional - The importance of headings10min
Homework Two Description8min
2 exercícios práticos
Optional Practice Quiz: Review26min
Advanced Selectors Quiz32min
1 hora para concluir
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 hora para concluir
5 vídeos (Total 29 mín.), 5 leituras, 1 teste
5 videos
03-02 Transitions5min
03-03 Transforms5min
03-04 Code together - Transitions4min
03-05 Positioning10min
5 leituras
Resources1min
OPTIONAL READINGS - Transitions, Transforms, and Animation2min
Positioning2min
Why not a Peer Assignment this week?1min
Some Fun Links1min
1 exercício prático
Final Quiz18min
3 horas para concluir
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.
3 horas para concluir
7 vídeos (Total 34 mín.), 3 leituras, 1 teste
7 videos
04-02 Creating Navigation Menus3min
04-03 Accessible Navigation7min
04-04 Creating Navigation Menus 23min
04-05 Creating Navigation Menus 35min
04-06 Optional - Homework Description6min
04-07 Conclusion2min
3 leituras
Resources1min
OPTIONAL: A Change to the Accessibility of Headings2min
Final Project Description7min
15 minutos para concluir
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.
15 minutos para concluir
4 leituras
4 leituras
Coursera Options1min
CodeAcademy - other badge tutorials2min
Meetups2min
Post-course Survey10min
Avaliações
Principais avaliações do INTRODUÇÃO AO CSS3
por AFDec 25, 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.
por PAAug 19, 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.
por MSApr 11, 2018
I have learned SO much in this class. I am making web sites, writing code, making mistakes, and solving problems.\n\nThis is the most practical class I have taken on Coursera. I HIGHLY recommend it!
por MWDec 6, 2016
Excellent for learning how to learn about styling webpages. I'm not very artistic when it comes to using pen and paper, but I've really learned how to express myself creatively through this course.
por JLNov 25, 2019
Great intro to CSS. I will need to learn quite a bit more before I'm ready to do "real work" but this was a good start -- fun, easy to follow, and the lecture material was well-presented. Thanks!
por TMOct 15, 2016
If you are new to HTML and CSS3, this is a great course. You are not given everything and you have to do work outside of what is given in the class, but I was able to learn a lot in this course!
por ASSep 2, 2019
I will rate this course as outstanding because I learnt a lot in this course because of the great teaching methods. I have learnt that how can I make my website beautiful by applying CSS to it.
por 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.
por JJJul 8, 2019
Only criticism I would have is that the grading system is confusing. The different selections are not mutually exclusive so it's difficult to evaluate other peoples work. Otherwise, great!
por VVDec 8, 2017
Great chance to learn by doing.\n\nColleen van Lent is very understandable and motivating. The final page looks good and I feel I can retain a high percentage of what we saw in the course.
por LDSep 7, 2016
This was a great intro to CSS for a non-programmer. I felt like I could make so many changes to a site after this course that now I want to know how I can do more! On to the next course!
por BKMay 1, 2019
This course won't make you a Designer, but it will give you a solid understanding of CSS. Comparing this course to other resources, it's one of the better ones I've found. Worth the $50.
por DMAug 9, 2016
Very helpful introductory course to get one started to make beautiful-looking web pages. The instructor is friendly and paces each lesson perfectly. All in all a very good experience.
por DMMar 9, 2016
I loved this class. Colleen did a great job in explaining, teasing, and enticing us to learn more about CSS3. I had no idea that all this power was available to me. Thanks, Colleen!
por JBJan 5, 2016
As a beginner, this is a must take course! Dr. Colleen van Lent is excellent at hitting the right points, delivering the right content at the right time. Easy for anyone to learn.
por JSJul 8, 2018
The course builds on the previous HTML5 course. It helps to understand and learn basic and fundamental concepts of CSS3. The projects help to put learnt skills to practical test.
por RFNov 1, 2018
This course, and entire specialization so far, has been fantastic! Teaches you the basics of CSS3 along with continuing on the foundations of HTML5. Fun to put it all together!
por KVMar 9, 2016
This course is definately challenging with all the new things to learn but the instructor and the student community as well as the individual learning effort make it worthwhile
por MANov 14, 2016
Excellent course! I find myself going back over my notes, over and over. There was so much included in this course, it's hard to remember it all. But it's definitely worth it!
por MRNov 21, 2019
Colleen van Lent has done a brilliant job with this course yet again. The videos are beautifully put together and the content is fairly easy to digest. Definitely recommended!
oferecido por
Universidade de 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.
Sobre Programa de cursos integrados Web Design for Everybody: Basics of Web Development & 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.
Perguntas Frequentes – FAQ
Quando terei acesso às palestras e às tarefas?
Ao se inscrever para um Certificado, você terá acesso a todos os vídeos, testes e tarefas de programação (se aplicável). Tarefas avaliadas pelos colegas apenas podem ser enviadas e avaliadas após o início da sessão. Caso escolha explorar o curso sem adquiri-lo, talvez você não consiga acessar certas tarefas.
O que recebo ao me inscrever nesta Especialização?
Quando você se inscreve no curso, tem acesso a todos os cursos na Especialização e pode obter um certificado quando concluir o trabalho. Seu Certificado eletrônico será adicionado à sua página de Participações e você poderá imprimi-lo ou adicioná-lo ao seu perfil no LinkedIn. Se quiser apenas ler e assistir o conteúdo do curso, você poderá frequentá-lo como ouvinte sem custo.
Qual é a política de reembolso?
Existe algum auxílio financeiro disponível?
Mais dúvidas? Visite o Central de Ajuda ao Aprendiz.