We may earn an affiliate commission when you visit our partners.

Advanced Styling with Responsive Design

Colleen van Lent, Ph.D. and Charles Russell Severance

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.

Enroll now

Or subscribe to Coursera Plus

And get unlimited access to Coursera

What's inside

Syllabus

Week One: Style with Responsive Design

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.

Week Two: Basic Concepts

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".

Week Three: Media Queries for Layout and Accessibility

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.

Week Four: Frameworks

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).

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Explores responsive design, which is standard in web design

Develops skills for responsive web design, which is core for web developers

Prerequisite knowledge of HTML and CSS is required

Covers wireframes, fluid design, media queries, and styling paradigms

Introduces existing design frameworks such as Bootstrap

Part of a specialization in Web Design for Everybody

Save this course

Save Advanced Styling with Responsive Design to your list so you can find it easily later:

Save

Reviews summary

Understanding responsive design

learners say Advanced Styling with Responsive Design provides engaging assignments and useful information for beginners. It delves into media queries, frameworks, and bootstrapping, with particular focus on Bootstrap 3 and its features. The course is well-regarded for its clear explanations and practical approach, although some have noted that the content may be outdated. Overall, this course is highly recommended for those seeking a foundation in responsive web design.

Great focus is placed on media queries and frameworks to ensure responsiveness in design.

"It teaches a lot about responsive web disegn and how to use bootstrap. Most of the job is left to you if you want to go more in deep on very topic touched in these classes. "

"This course is very useful to me.Thanks to coursera "

"Best course to learn responsive design."

Assignments are considered to be engaging and helpful for reinforcing the material.

"I liked how the course was structured and the professor is great, but the content is not up to date and it was lacking plenty of tools that are now available in CSS."

"The overall course is good and I found the course very helpful and I just want to say that please update the bootstrap portion... it was bootstrap 3 and now today we have bootstrap 4.5"

"Really great course with a lovely instructor and awesome material. But I think I was looking for a bit more in depth responsive website coding."

In-depth explanations are provided on the Bootstrap framework and its features.

"The course is awesome! I have learnt many things in this course. Thanks! to Mrs. Colleen."

"There are few contents and links that needs to be updated. For basic knowledge and skills, this course is awesome."

"I want to thank the university of michigan for giving there wonderfull course to me. I learn what i want to learn from this course.i suggest everyone who is beginning there career in website design apply this course its really helpfull.And special thanks to the professor collen van lent mam."

Colleen van Lent is consistently praised for her clear explanations and engaging teaching style.

"I really liked this series of courses, very pedagogical and practical. Perfect for learning from scratch, and they motivate you to keep learning."

"A great course offered by the University of Michigan through Coursera and the instructor explained the concepts of advanced styling and responsive design very nicely. Thanks a lot, Colleen van Lent, Ph.D "

"The course is very good but the here the thing is more learning and interaction.which is basics of teaching-learning process."

Some learners have expressed concern that the course content, particularly in relation to Bootstrap, may be outdated.

"It is a good course. But gone old as now Bootstrap 5 is out and it is still version 3."

"An Update is required to this course."

"The lectures are good and well presented, however the assignments are nearly impossible, where they should be assisting learning"

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Advanced Styling with Responsive Design with these activities:

Organize Course Notes and Resources

Show steps

Consolidate your notes, assignments, and other course materials to enhance your understanding and retention.

Browse courses on Note-Taking

Show steps

Gather all the materials you have accumulated throughout the course.
Sort and organize the materials by topic or week.
Review and summarize key concepts from each material.

Connect with Responsive Design Professionals

Show steps

Build relationships with experienced web designers who can provide guidance and support in your responsive design journey.

Browse courses on Responsive Design

Show steps

Identify individuals in the field who specialize in responsive design.
Reach out to them via LinkedIn or email to express your interest in connecting.
Ask for advice, feedback, or opportunities to collaborate.

Attend a Responsive Design Workshop

Show steps

Participate in a workshop or seminar to learn from experts in the field of responsive design.

Browse courses on Responsive Design

Show steps

Research and find a relevant workshop or event.
Register and attend the workshop.
Take notes and actively participate in discussions.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Wireframe a Responsive Website

Show steps

Create a visual representation of your website's layout and content, considering different screen sizes and devices.

Browse courses on Wireframing

Show steps

Sketch out the basic structure and elements of your website.
Use a wireframing tool or software to create a more detailed visual representation.
Consider how the layout and content will adapt to different screen sizes.

Guided Tutorials to Master Media Queries

Show steps

Practice applying media queries to control the layout and appearance of your web pages across different devices and screen sizes.

Browse courses on Media Queries

Show steps

Explore online tutorials on media queries.
Experiment with different media query syntax and values.
Create a simple web page and apply media queries to adjust its layout based on screen size.

Responsive Design Coding Challenges

Show steps

Challenge yourself with coding exercises that test your understanding of responsive design principles and techniques.

Browse courses on Media Queries

Show steps

Find online coding challenges or quizzes on responsive design.
Attempt to solve the challenges using the concepts learned in the course.
Review your solutions and identify areas for improvement.

Design and Deploy a Bootstrap Website

Show steps

Build a functional website using Bootstrap, a popular framework for developing responsive web pages.

Browse courses on Bootstrap

Show steps

Familiarize yourself with Bootstrap's components and features.
Design and create the layout of your website using Bootstrap.
Add content and style to your website.
Test your website on different devices and browsers.

Contribute to Responsive Design Open-Source Projects

Show steps

Gain practical experience and contribute to the responsive design community by working on open-source projects.

Browse courses on Responsive Design

Show steps

Find open-source projects related to responsive design.
Review the project documentation and codebase.
Identify areas where you can contribute.
Submit pull requests to the project.

Career center

Learners who complete Advanced Styling with Responsive Design will develop knowledge and skills that may be useful to these careers:

Web Designer

As a Web Designer, you will take existing design specifications and turn them into a website, web application, or web page. Advanced Styling with Responsive Design is useful because web design often requires implementation of responsive design. The techniques in this course can be put to work immediately, helping you to stand out among other candidates for positions.

See salaries and explore the career path for Web Designer

Web Developer

Web Developers are in charge of implementing all the components of a web design to build a website. You will implement code for interactive web applications and other features. Advanced Styling with Responsive Design is useful because some development environments and programming languages require an understanding of responsive design techniques to ensure that the product functions properly when deployed. Adding this course to your resume and skillset will show employers that you are ready to work with popular development frameworks and coding languages.

See salaries and explore the career path for Web Developer

UI Designer

UI Designers are in charge of setting the look and feel of an application or website, creating a sense of style while ensuring that the site is also usable. Advanced Styling with Responsive Design may be useful because you will gain a strong understanding of media queries and how they affect how a user will interact with a site. This will allow you to design a site that will be not only visually appealing but also effective and easy to navigate.

See salaries and explore the career path for UI Designer

UX Designer

The work of a UX Designer is to improve the overall experience of interacting with a website or web application. Advanced Styling with Responsive Design may be useful because you will gain an understanding of the user experience and how this is affected by how a website looks and functions on different platforms. This grounding will help you to design user-friendly interfaces that are appealing and accessible on a wide range of platforms and devices.

See salaries and explore the career path for UX Designer

Graphic designer

A Graphic Designer is in charge of designing visual concepts and overseeing the production of marketing materials ranging from web pages to brochures. Advanced Styling with Responsive Design is useful because it will teach you about how design choices affect the user experience. By understanding different types of users and their preferences, you can create more effective and engaging designs.

See salaries and explore the career path for Graphic designer

Front-End Engineer

Front-End Engineers are in charge of the design and implementation of the front-facing aspects of a website. Advanced Styling with Responsive Design is useful because it will teach you about how to build and manage the styling of a website. By understanding the different styling techniques and how they affect the user experience, you can create more engaging and interactive front-end designs.

See salaries and explore the career path for Front-End Engineer

Software Developer

Software Developers implement computer software to solve business or consumer problems. Advanced Styling with Responsive Design may be useful because it can help you to understand the different styling techniques and how they affect the user experience. This will allow you to create more user-friendly and engaging software applications.

See salaries and explore the career path for Software Developer

Information Architect

Information Architects create conceptual frameworks to organize, structure, and label web content in order to make it easier for users to find and access information. Advanced Styling with Responsive Design is useful because it will help you to understand the importance of structuring content in a way that is easy for users to navigate and understand.

See salaries and explore the career path for Information Architect

Interaction Designer

Interaction Designers are in charge of designing the user experience for digital products. Advanced Styling with Responsive Design may be useful because it provides insight into the different ways that users interact with websites and applications. This knowledge can help you to create more engaging and interactive experiences that meet the needs of users.

See salaries and explore the career path for Interaction Designer

Product Designer

Product Designers are in charge of the design and development of a product from its inception to its launch. Advanced Styling with Responsive Design may be useful because it will teach you about the different aspects of product design, including user experience, interface design, and styling. This knowledge will help you to create more innovative and successful products.

See salaries and explore the career path for Product Designer

Technical Writer

Technical Writers create instruction manuals, reference guides, and other documentation to help users understand and use technical products. Advanced Styling with Responsive Design may be useful because it will teach you about the different elements of technical writing and how to create documentation that is clear and easy to understand.

See salaries and explore the career path for Technical Writer

User Experience Researcher

User Experience Researchers conduct research to understand the needs and behaviors of users. Advanced Styling with Responsive Design may be useful because it will teach you about the different methods of user research and how to use this information to create more user-friendly products.

See salaries and explore the career path for User Experience Researcher

Art Director

Art Directors oversee the visual aspects of a project, including the design and implementation of branding, marketing materials, and other creative content. Advanced Styling with Responsive Design may be useful because it will teach you about the different elements of visual design and how to create cohesive and visually appealing content.

See salaries and explore the career path for Art Director

Marketing Manager

Marketing Managers develop and execute marketing campaigns to promote products and services. Advanced Styling with Responsive Design may be useful because it will teach you about the different elements of marketing and how to create effective marketing campaigns that reach your target audience.

See salaries and explore the career path for Marketing Manager

Data Analyst

Data Analysts collect, analyze, and interpret data to help businesses understand their customers and make better decisions. Advanced Styling with Responsive Design may be useful because it can help you to understand the different types of data and how to use data to solve business problems.

See salaries and explore the career path for Data Analyst

Reading list

We've selected 13 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Advanced Styling with Responsive Design.

Responsive web design

Save

Classic guide to responsive web design, and provides a comprehensive overview of the techniques and principles involved.

Advanced Styling with Responsive Design

What's inside

Syllabus

Good to know

Save this course

Reviews summary

Understanding responsive design

Activities

Career center

Reading list

Share

Similar courses