Clinical Professor, School of Information
Advanced Styling with Responsive Design
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.
4 Modules
12 Hours
3 hrs per module (approx.)
Rating
About Advanced Styling with Responsive Design
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.
Skills You'll Gain
- Bootstrap (Front-End Framework)
- Cascading Style Sheets (CSS)
- CSS Codes
- CSS Frameworks
- HTML Formatting
- JavaScript OS
- Object Oriented CSS
- Responsive HTML
- Responsive Web Design
What You'll Earn
- Certificate of Completion
- Certificates of completion acknowledge knowledge acquired upon completion of a non-credit course or program.
Welcome Message
Welcome to Advanced Styling with Responsive Design, a course that introduces techniques for creating responsive websites across devices. Designed for learners comfortable with HTML and CSS, the course explores fluid layouts, media queries, frameworks, and hybrid approaches. Emphasis is placed on best practices, common pitfalls, and hands-on development.
This abbreviated syllabus description was created with the help of AI tools and reviewed by staff. The full syllabus is available to those who enroll in the course.
Course Schedule
Module 1: Style with Responsive Design
- 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: Notice for Auditing Learners: Assignment Submission
- 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
- Graded: Basic Concepts in Responsive Design approaches
Module 2: Basic Concepts
- 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
- Graded: Week Two Review: Media Queries and breakpoints
Module 3: Use Existing Frameworks
- Video: Frameworks
- Video: Introduction to Twitter Bootstrap 3
- Video: Bootstrap Breakpoints
- Video: Getting Started with Twitter Bootstrap
- Video: Bootstrap Grid System
- Graded Assignment: 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
- Graded: Week Three Review: Bootstrap
Module 4: Experiment!
- 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 development
- Reading: OPTIONAL - Debugging your style
- Reading: OPTIONAL - More resources for learning to debug/develop
- Reading: Post-course Survey
- Reading: Keep Learning with Michigan Online
- Graded: Responsive Design Final Assessment
Grading Policy
Learners must earn 80% on each assignment and 80% overall to pass. There are four graded assessments, each worth 25% of your final grade. All graded assessments must be completed successfully.
Lecturer
Course content developed by U-M faculty and managed by the university. Faculty titles and affiliations are updated periodically.
Beginner Level
No prior experience required
