VOOZH about

URL: https://www.coursera.org/learn/responsivedesign

⇱ Advanced Styling with Responsive Design | Coursera


Advanced Styling with Responsive Design

Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

Gain insight into a topic and learn the fundamentals.
4.7

4,607 reviews

Beginner level
No prior experience required
Flexible schedule
1 week at 10 hours a week
Learn at your own pace
98%
Most learners liked this course

Gain insight into a topic and learn the fundamentals.
4.7

4,607 reviews

Beginner level
No prior experience required
Flexible schedule
1 week at 10 hours a week
Learn at your own pace
98%
Most learners liked this course

What you'll learn

  • Describe basic knowledge of browser tools for responsive design.

  • Understand the importance of a "mobile-first" paradigm for web design.

  • Write rules for responsive design for a mobile and large-screen view.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

4 assignments

Taught in English

Build your subject-matter expertise

This course is part of the Web Design for Everybody: Basics of Web Development & Coding Specialization
When you enroll in this course, you'll also be enrolled in this Specialization.
  • Learn new concepts from industry experts
  • Gain a foundational understanding of a subject or tool
  • Develop job-relevant skills with hands-on projects
  • Earn a shareable career certificate

There are 4 modules in this course

It used to be the case that everyone viewed web pages on about the same size screen - a desktop computer. But now it is just as likely that someone will be using a smart phone, tablet, or assistive technology to access the Internet. Therefore, people viewing your site will now expect that it will perform regardless of the device (smartphone, tablet, laptop, desktop computer, or screen reader) AND take into account some common personal settings such as color schemes. This ability to respond to any platform and user preferences is called Responsive Design.

This course will expand upon the basic knowledge of CSS3 to include topics such as wireframes, fluid design, media queries, and the use of existing styling paradigms. After the course, learners will be able to: ** Explain the mobile-first paradigm and the importance of wireframes in the design phase ** Create sites that behave across a range of platforms ** Recognize existing design frameworks such as Bootstrap A basic understanding of HTML and CSS is expected when you enroll in this class, so it can be taken third or fourth in the Web Design for Everybody specialization. Additional courses focus on adding interactivity with the JavaScript Programming Language and completing a capstone project.

What does it mean to have responsive design for your site? How can you tell if your existing site is responsive? This week we will begin with the theories behind the "mobile-first paradigm" - the idea that your mobile site should provide everything needed, not a pared-down version of a good page. We end the week by taking the first concrete step of using fluid measurements in your CSS.

What's included

11 videos9 readings1 assignment3 discussion prompts

11 videosβ€’Total 61 minutes
  • Introduction to Responsive Designβ€’6 minutes
  • Getting Started with Githubβ€’5 minutes
  • Downloading and Uploading Code with VSCode and Githubβ€’4 minutes
  • Copying Code with GitHub Codespacesβ€’4 minutes
  • Uploading to GitHub Pagesβ€’8 minutes
  • Review: Publishing Your Siteβ€’5 minutes
  • What is Responsive Design?β€’5 minutes
  • Testing Sitesβ€’6 minutes
  • Benefits of Responsive Designβ€’5 minutes
  • Fluid Measurementsβ€’7 minutes
  • Code With Me: Fluid Measurementsβ€’6 minutes
9 readingsβ€’Total 47 minutes
  • Course Syllabusβ€’5 minutes
  • Pre-Course Surveyβ€’5 minutes
  • Course Resourcesβ€’5 minutes
  • Frequently Asked Questions (FAQ)β€’2 minutes
  • Week 1 Resourcesβ€’5 minutes
  • Examples of Poor Responsive Designβ€’10 minutes
  • What To Do When Your Tool is Deprecatedβ€’5 minutes
  • Fluid Measurements Background Readingsβ€’5 minutes
  • Additional Tools and Resourcesβ€’5 minutes
1 assignmentβ€’Total 30 minutes
  • Basic Concepts in Responsive Design Approachesβ€’30 minutes
3 discussion promptsβ€’Total 30 minutes
  • Site Reviewsβ€’10 minutes
  • Can a file use fluid and absolute measurements together?β€’10 minutes
  • Your Personal Responsive Design Storyβ€’10 minutes

This week you will get a chance to put the theories into practice using media queries in your CSS. These queries can automatically change the look and functionality of your site based on the size of the browser being used to view the page. This allows you to decide what type of look you want to achieve at various screen sizes, also called "viewports".

What's included

7 videos4 readings2 assignments1 peer review1 app item

7 videosβ€’Total 47 minutes
  • Media Queriesβ€’6 minutes
  • Code With Me: Fluid Measurements and Media Queriesβ€’4 minutes
  • Wire Framesβ€’8 minutes
  • Breakpointsβ€’8 minutes
  • Media Queries Part Twoβ€’10 minutes
  • Code With Me: Responsive Navigationβ€’9 minutes
  • Homework Review: Basic Media Queriesβ€’3 minutes
4 readingsβ€’Total 20 minutes
  • Week 2 Resourcesβ€’2 minutes
  • Homework Descriptionβ€’5 minutes
  • Introduction to the Gamut Galleryβ€’3 minutes
  • Additional Resourcesβ€’10 minutes
2 assignmentsβ€’Total 60 minutes
  • Week Two Review: Media Queries and Breakpointsβ€’30 minutes
  • Practice Quiz -- Challenge Problemβ€’30 minutes
1 peer reviewβ€’Total 60 minutes
  • Create a Responsive Stylesheet β€’60 minutes
1 app itemβ€’Total 10 minutes
  • Homework: Optional Gallery Submissionβ€’10 minutes

Knowing what your want your site to look like is the first step, but actually writing the code is another. This week we look at the grid and flex display properties to suggest ways to organize the layout of your page. We also talk about media queries that you should be including to increase the accessibility of your page. These queries can react to user preferences about color schemes, animation, and more.

What's included

5 videos5 readings

5 videosβ€’Total 37 minutes
  • Preview of Week 3β€’2 minutes
  • Code With Me: Using Media Queries with Grid β€’10 minutes
  • Code With Me: Using Media Queries with Flex β€’4 minutes
  • Media Queries for Accessibilityβ€’9 minutes
  • Accessibility Testingβ€’12 minutes
5 readingsβ€’Total 57 minutes
  • Week 3 Resourcesβ€’2 minutes
  • Prefers Reduced Motionβ€’15 minutes
  • Color Schemes and Color Contrastβ€’10 minutes
  • Accessilibity Testing Optionsβ€’10 minutes
  • Additional Resourcesβ€’20 minutes

After every good programmer has put in time creating sites from scratch, it is common to utilize existing tools out there. After all, why recreate the wheel? The work you have done up to this point will give you the knowledge needed to craft your own unique sites from these frameworks. This week we will work with Bootstrap, a framework that uses HTML5, CSS, and JavaScript (but don't worry if you have never used JavaScript yourself).

What's included

8 videos6 readings1 assignment1 peer review1 app item

8 videosβ€’Total 52 minutes
  • Using Frameworksβ€’3 minutes
  • Introduction to Bootstrapβ€’6 minutes
  • Bootstrap Grid Systemβ€’12 minutes
  • Optional: Interview with M Wβ€’8 minutes
  • Optional: Interview with H Wβ€’7 minutes
  • Optional: Interview with H Nβ€’9 minutes
  • Homework Review: Final Projectβ€’6 minutes
  • Conclusionβ€’3 minutes
6 readingsβ€’Total 57 minutes
  • Week 4 Resourcesβ€’2 minutes
  • Getting Started With Bootstrapβ€’5 minutes
  • Bootstrap Resources and Examplesβ€’10 minutes
  • Additional Resources β€’20 minutes
  • Final Project Descriptionβ€’10 minutes
  • Post-course Surveyβ€’10 minutes
1 assignmentβ€’Total 30 minutes
  • Responsive Design Final Quizβ€’30 minutes
1 peer reviewβ€’Total 75 minutes
  • Final Project: Photo Galleryβ€’75 minutes
1 app itemβ€’Total 10 minutes
  • Final Project: Optional Gallery Submissionβ€’10 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructors

Instructor ratings
4.8 (407 ratings)
University of Michigan
11 Coursesβ€’735,729 learners

Explore more from Mobile and Web Development

Why people choose Coursera for their career

πŸ‘ Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
πŸ‘ Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
πŸ‘ Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
πŸ‘ Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Learner reviews

  • 5 stars

    78.68%

  • 4 stars

    16.84%

  • 3 stars

    3.42%

  • 2 stars

    0.75%

  • 1 star

    0.28%

Showing 3 of 4607

HA
Β·

Reviewed on Mar 20, 2020

Firstly i thank you all to this good material , and i give my appreciate and thanks to Ph,Dr. Colleen van Lent. And its very useful to me to learn this course .Thank you very much <3

SM
Β·

Reviewed on Jan 12, 2017

The course is quite good and intriguing for it offers challenges which are interesting at the same time. Always good to take up a challenge, oh what an experience

PA
Β·

Reviewed on Sep 5, 2020

At first I was not good in designing or responsive designing but after learning about bootstrap from this course I am pretty much confident that I can easily design a website

Frequently asked questions

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

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.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,