About this course: It used to be the case that everyone viewed webpages on about the same size screen. But with the explosion of the use of smartphones to access the Internet, the landscape of design has completely changed. People viewing your site will now expect that it will perform regardless of the platform (smartphone, tablet, laptop, or desktop computer). This ability to respond to any platform 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 such as Bootstrap. 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 ** Utilize existing design frameworks such as Bootstrap This is the fourth course in the Web Design For Everybody specialization. A basic understanding of HTML and CSS is expected when you enroll in this class. Additional courses focus on adding interactivity with the JavaScript Programming Language and completing a capstone project.
Taught by: Colleen van Lent, Ph.D., Lecturer
School of Information
| Basic Info | Course 4 of 5 in the Web Design for Everybody (Basics of Web Development and Coding) Specialization |
| Commitment | 4 weeks of study, 1-3 hours/week |
| Language | English |
| How To Pass | Pass all graded assignments to complete the course. |
| User Ratings |
- Reading: Syllabus
- Reading: Resources
- Reading: Frequently Asked Questions (FAQ)
- Video: Introduction to Responsive Design
- Reading: Help us learn more about you!
- Video: What is Responsive Design?
- Video: Testing Existing Sites
- Video: Benefits of Responsive Design
- Discussion Prompt: Optional Discussion: Site reviews
- Reading: Fluid Measurements background readings
- Video: Fluid Measurements
- Video: Code With Me: Fluid Measurements
- Discussion Prompt: Optional Discussion: Can a file use fluid and absolute measurements together?
- Reading: Pixel to Em conversion tool
- Reading: Dynamically change the size of font with sliders
- Reading: Optional: CSS definitions of relative and absolute
- Discussion Prompt: Your personal Responsive Design Story
- Video: Media Queries
- Video: Code With Me: Fluid Measurements and Media Queries
- Practice Quiz: Practice Quiz -- Challenge Problem
- Video: Wire Frames
- Video: Breakpoints
- Video: Media Queries Part Two
- Video: Code With Me: Responsive Navigation
- Peer Review: OPTIONAL -- Create a responsive style sheet
- Reading: OPTIONAL: Good examples of responsive design
- Video: Frameworks
- Video: Introduction to Twitter Bootstrap 3
- Video: Bootstrap Breakpoints
- Video: Getting Started with Twitter Bootstrap
- Video: Bootstrap Grid System
- Practice Quiz: OPTIONAL - Grid System Check
- Video: Code With Me: Grid Example
- Video: Bootstrap Navigation
- Discussion Prompt: Optional Discussion: Standards vs Convenience
- Peer Review: OPTIONAL - Use Bootstrap to create a responsive page
- Reading: Optional - Demystifying Bootstrap
- Video: Responsive Images
- Video: Bootstrap Tables
- Video: Code With Me: Advanced Navigation
- Video: What Are Templates?
- Video: Optional Interview: M W
- Video: Optional Interview: H W
- Video: Optional: Interview with H N
- Video: Bootstrap 4
- Video: Conclusion
- Peer Review: OPTIONAL: Photo Gallery
- Reading: Optional: The Evolution of the Airbnb front-end deveopment
- Reading: OPTIONAL - Debugging your style
- Reading: OPTIONAL - More resources for learning to debug/develop
- Reading: Post-course Survey
Each course is like an interactive textbook, featuring pre-recorded videos, quizzes and projects.
Connect with thousands of other learners and debate ideas, discuss course material, and get help mastering concepts.
Earn official recognition for your work, and share your success with friends, colleagues, and employers.
| Audit | Purchase Course | |
|---|---|---|
| Access to course materials | Available | Available |
| Access to graded materials | Not available | Available |
| Receive a final grade | Not available | Available |
| Earn a shareable Course Certificate | Not available | Available |
I loved the course. It was a great introduction to responsive design and bootstrap. Lots of links to helpful blog posts and resources. I blew through this in just a couple of days and am eager to keep learning about front end design.
It is a good course, great for those who are goingo to work mainly with Bootstrap. I missed more responsive design techniques for those who wants to code by themselves.
Helped a lot to update my knowledge especially frame work like Bootstrap. I completely ignored ignored learning frame work of html, css and JS. This course changed my ignorance now understood the importance of frame work.
Thank you very much for effective teaching.
Regards,
Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.
Thank you so much for this courses, I learned it with interest. The course is great. Recommend to try it!