Course Summary
This course teaches how to build responsive websites that are optimized for different devices and screen sizes. Students will learn how to use HTML, CSS, and JavaScript to create user-friendly and visually appealing websites.Key Learning Points
- Learn how to use CSS media queries to create responsive designs
- Understand the principles of mobile-first design
- Build websites that are accessible to users with disabilities
- Incorporate best practices for performance optimization
Related Topics for further study
Learning Outcomes
- Ability to build responsive websites optimized for different devices and screen sizes
- Understanding of mobile-first and accessible design principles
- Knowledge of best practices for performance optimization
Prerequisites or good to have knowledge before taking this course
- Basic understanding of HTML, CSS, and JavaScript
- Access to a text editor and web browser
Course Difficulty Level
IntermediateCourse Format
- Online self-paced
- Video lectures
- Assignments and quizzes
Similar Courses
- HTML, CSS, and JavaScript for Web Developers
- Web Design for Everybody: Basics of Web Development & Coding
Related Education Paths
Notable People in This Field
- Karen McGrane
- Ethan Marcotte
Related Books
Description
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.
Outline
- Week One: Style with Responsive Design
- Introduction to Responsive Design
- What is Responsive Design?
- Testing Existing Sites
- Benefits of Responsive Design
- Fluid Measurements
- Code With Me: Fluid Measurements
- Syllabus
- Resources
- Frequently Asked Questions (FAQ)
- Help us learn more about you!
- Fluid Measurements background readings
- Notice for Auditing Learners: Assignment Submission
- Pixel to Em conversion tool
- Dynamically change the size of font with sliders
- Optional: CSS definitions of relative and absolute
- Basic Concepts in Responsive Design approaches
- Week Two: Basic Concepts
- Media Queries
- Code With Me: Fluid Measurements and Media Queries
- Wire Frames
- Breakpoints
- Media Queries Part Two
- Code With Me: Responsive Navigation
- OPTIONAL: Good examples of responsive design
- Practice Quiz -- Challenge Problem
- Week Two Review: Media Queries and breakpoints
- Week Three: Use Existing Frameworks
- Frameworks
- Introduction to Twitter Bootstrap 3
- Bootstrap Breakpoints
- Getting Started with Twitter Bootstrap
- Bootstrap Grid System
- Code With Me: Grid Example
- Bootstrap Navigation
- Optional - Demystifying Bootstrap
- OPTIONAL - Grid System Check
- Week Three Review: Bootstrap
- Week Four: Experiment!
- Responsive Images
- Bootstrap Tables
- Code With Me: Advanced Navigation
- What Are Templates?
- Optional Interview: M W
- Optional Interview: H W
- Optional: Interview with H N
- Bootstrap 4
- Conclusion
- Optional: The Evolution of the Airbnb front-end deveopment
- OPTIONAL - Debugging your style
- OPTIONAL - More resources for learning to debug/develop
- Post-course Survey
- Keep Learning with Michigan Online
- Responsive Design Final Assessment
Colleen van Lent, Ph.D.
4.7 Raiting
Photoshop Basics: For Beginners
- 3.8
-
![]()
![]()
![]()
![]()
![]()
How to make easy icons This course is for designers, developers and product managers interested in creating successful mobile app designs using Photoshop....
The Complete React Bootcamp 2020 (w/ React Hooks, Firebase)
- 4.7
-
![]()
![]()
![]()
![]()
![]()
Become an advanced ReactJS developer, build and deploy three production-ready apps with React, React Hooks, and NodeJS. Created with up-to-date versions of React, React Hooks, Node....
Ultimate AWS Certified Developer Associate 2021 Masterclass
- 4.1
-
![]()
![]()
![]()
![]()
![]()
Do you want to be an AWS Certified Developer Associate? Pass the exam on first attempt. Masterclass with Practice Exams. Welcome to this course...
Digital Manufacturing & Design
- 4.7
-
![]()
![]()
![]()
![]()
![]()
This course will expose you to the transformation taking place, throughout the world, in the way that products are being designed and manufactured....
