Course Summary
Learn the fundamentals of responsive web design and how to create websites that work seamlessly across all devices.Key Learning Points
- Understand the basics of responsive web design, including flexible grids and layouts, media queries, and responsive images
- Learn how to optimize your website for speed and performance on mobile devices
- Explore best practices for designing navigation, typography, and user interfaces for responsive web design
Related Topics for further study
Learning Outcomes
- Create responsive websites that work seamlessly across all devices
- Optimize website performance for mobile devices
- Design user-friendly navigation, typography, and interfaces for responsive web design
Prerequisites or good to have knowledge before taking this course
- Basic understanding of HTML and CSS
- Access to a text editor and web browser
Course Difficulty Level
BeginnerCourse Format
- Online Self-Paced
- Video Lectures
- Hands-On Projects
Similar Courses
- Web Development Fundamentals
- JavaScript, jQuery, and JSON
- HTML, CSS, and JavaScript for Web Developers
Related Education Paths
- Web Design and Development Certification
- Mobile Web Specialist Certification
- User Interface Design Certification
Related Books
Description
In this course you will learn how to apply concepts from interaction design and human computer interaction in order to design and build an interactive, professional looking website. You will learn how to make your web page designs adapt to different screen sizes using responsive grid layouts. You will learn how to add navigation and other design elements, and you will learn how to separate data and display using JavaScript objects and templates.
Outline
- Responsive Web Design: Course overview
- Course outline
- Grading and assessment
- Learning outcomes
- Web design principles
- Overview
- Usability and user experience
- Where can you go?
- What is here?
- Accessibility
- Guidelines for design
- Design examples
- Summary
- Lecture slides
- URL for this lesson
- URLs for this lesson
- Lecture slides
- URL for this lesson
- Lecture slides
- Usability and user experience
- Where can you go?
- What is here?
- Accessibility
- Guidelines for design
- Design examples
- Web design principles summary quiz
- Realising design principles in code
- Overview
- Basic Bootstrap set up
- Where can you go?
- Collapsible navbars
- Building out the site
- Where am I?
- Responsive grid
- Bootstrap themes
- Summary
- Code for this module
- URL for this lesson
- Basic Bootstrap starter code (inc. images)
- URL for this lesson
- URL for this lesson
- URL for this lesson
- URLs for this lesson
- Basic Bootstrap set up
- Where can you go?
- Collapsible navbars
- Building out the site
- Where am I?
- Responsive grid
- Bootstrap themes
- Realising design principles in code summary quiz
- Adding content to websites
- Overview
- Separating structure and content
- JavaScript objects
- JavaScript templates with Handlebars
- Putting data into templates
- Displaying different data with the same template
- Displaying the same data with different templates, Use a Bootstrap modal
- Summary
- URL for this module
- URL for this lesson
- Source Code
- Source Code
- Source Code
- Separating structure and content
- JavaScript objects
- JavaScript templates with Handlebars
- Putting data into templates
- Displaying different data with the same template
- Displaying the same data with different templates, Use a Bootstrap modal
- Adding content to websites summary quiz
- Building a full gallery app
- Overview
- JavaScript arrays
- Storing objects in arrays and displaying them with a template
- Dynamically displaying single images from an array
- Implementing a search function
- Data structure for a complete image gallery
- Writing the templates for the gallery
- Switching displays in the gallery
- Source Code for this module
- URL for this lesson
- Source Code
- Source code for the gallery
- JavaScript arrays
- Storing objects in arrays and displaying them with a template
- Dynamically displaying single images from an array
- Implementing a search function
- Data structure for a complete image gallery
- Writing the templates for the gallery
- Building a full gallery app summary quiz
Summary of User Reviews
Read reviews for the Coursera course on responsive web design. Users highly recommend this course for its comprehensive approach to teaching web design.Key Aspect Users Liked About This Course
The course is highly comprehensive and provides practical experience in web design.Pros from User Reviews
- Comprehensive course
- Practical experience in web design
- Engaging and knowledgeable instructors
- In-depth explanations of web design concepts
- Well-structured course materials
Cons from User Reviews
- Some users found the course content to be too basic
- Occasional technical issues with the platform
- Lack of personalized feedback on assignments
- Some users found the pace of the course to be too slow
- Limited opportunities for interaction with other students
Dr Matthew Yee-King
4.6 Raiting
The Full Stack Web Development Bootcamp 2021
- 4.5
-
![]()
![]()
![]()
![]()
![]()
Learn HTML, CSS, JavaScript, jQuery, PHP & mySQL to become a talented, confident full-stack web developer in 2020. The course has over 31+ hours of high-quality, modern content....
HTML and CSS: A Guide to Web Design
- 4.9
-
![]()
![]()
![]()
![]()
![]()
Learn how to create an attractive and functional responsive website, without overly complicated terms and ideas. If so, then this course is perfect for you....
Custom Theme Creation for WordPress using HTML5 and CSS3
- 3.9
-
![]()
![]()
![]()
![]()
![]()
Create a WordPress theme completely from scratch using very little PHP and your own hand-rolled HTML template. Actually it’s a lot simpler than you may think....
Responsive Web Design in Adobe XD
- 4.8
-
![]()
![]()
![]()
![]()
![]()
In this course, you will design a responsive website using Adobe XD, a popular design tool. By the end of this course, you will be able to:...
