Advanced Styling with Responsive Design
Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Advanced Styling with Responsive Design
This course is part of Web Design for Everybody: Basics of Web Development & Coding Specialization
137,827 already enrolled
Included with
Learn more
Ask Coursera
4,607 reviews
4,607 reviews
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.
Skills you'll gain
Details to know
4 assignments
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- 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
Offered by
Explore more from Mobile and Web Development
- Status: Free TrialU
University of Washington
Course
- Status: Free Trial
Course
- Status: Free TrialB
Board Infinity
Course
Why people choose Coursera for their career
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
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
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
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.
More questions
Financial aid available,
