Getting Started with Media Queries in CSS

Name: Getting Started with Media Queries in CSS
Rating: 3.5 (94 reviews)

Be a media query wizard and master advance concepts in under 2 hours

Created byEduonix Learning Solutions

Last updated 4/2020

English

English [Auto],

What you'll learn

Learn to understand the media queries and their use in CSS
Learn quick tips and tricks of Media queries

Course content

5 sections • 16 lectures • 1h 21m total length

Course Overview and Prerequisites2:09
Explore media queries as the foundation of responsive web design, including their syntax, media types, logical operators, and features, with breakpoints and an external style sheet.

Need and Emergence of responsive web design6:06
Examine the need and emergence of responsive web design, and learn how media queries enable fluid, device-independent layouts that adapt to mobile and various viewports.
Image Intensive Website Example9:24
Analyze how three sites handle responsive design—an image-intensive site, a blogging site, and a mixed media layout—by adjusting image columns and using the device toolbar for adaptive layouts.
Text Intensive Website Example9:18
Explore how media queries adapt a text-intensive blogging site across mobile, tablet, and desktop, adjusting typography, images, navigation, and the presence of the sidebar using responsive device modes.
Examples of Responsive Web Design5:20
Explore examples of responsive web design using media queries, illustrated by Tumblr's background-image approach and fluid layouts that adapt text and images across mobile and desktop screens.

What are media queries?1:36
Discover how media queries in css personalize web pages by applying style preferences based on measurements, much like a tailor customizes suits for every family member.
Syntax of a Media Query with Example6:34
Learn the syntax of css media queries, including media types, features, and logical operators, with examples for applying styles based on device characteristics across screens, print, and speech.

Using Different Media Features: min-width and max-width5:15
Learn how min-width and max-width control css through media queries, evaluating boolean conditions to apply styles below, above, or at the 500px breakpoint.
Using Different Media Features: orientation3:13
Discover how media queries in CSS apply styles based on conditions like minimum width, with case-insensitive matching and cascading rules where the last rule wins.
Using Different Logical operators5:11
Explore how to use logical operators in media queries to check multiple conditions, including and, or, and not, and apply styles for ranges with min and max.
Using Different Media types3:29
Explore css media types such as print, screen, and speech, and learn how to define separate style rules for each media to optimize printed pages, screens, and accessibility.
Case Sensitivity and Specificity5:40
Explore how media queries implement responsive design by setting breakpoints, such as 768px for tablets, to adjust layout from desktop to tablet to mobile with 100 percent widths.
Breakpoints5:19
Explore breakpoints for responsive CSS and media queries by testing common viewport sizes across phones, tablets, and desktops, and learn to use browser device tools for mobile-first or desktop-first approaches.
Common Breakpoints with example5:19
Explore common breakpoints for responsive design using media queries, and learn to test across devices by examining viewports, resolutions, and device simulations in your browser.
Using external style sheet for media queries3:56
Learn how to use an external stylesheet to load media queries, compare it with embedding media queries in the document, and understand how order and specificity affect applied styles.

Requirements

Basic knowledge of HTML and CSS is required

Description

Web Development has become the necessity & web developers have become the new rock stars of this digital world. Considering all the users, seamless user experience is an absolute expectation from all the web developers.

These days, there is a myriad of screen types and sizes that makes it important for all web developers to create website pages that are adaptive to this need. Considering this, we have curated this exclusive course that will help you in solving all your queries revolving around media queries. It will help you in creating responsive web pages in no-time.

At first, you will learn about all the fundamentals of liquid/fluid responsive design philosophy which is followed by several real-time examples for complete learning. Later on, you will explore various concepts that will help you in learning the right way of using media queries. After this, it will also teach you to write media queries by giving you insights into each of the 4 parameters of the syntax of a media query. Each one of these parameters is followed by a practical example for maximum assimilation.

In the end, this online tutorial on media query also includes several quizzes at the end of each section to test your knowledge & skills. To put it all together, it is a perfect resource packed with everything that you will require to understand and master media queries for building responsive web pages.

Who this course is for:

Anyone who wants to learn Media queries will find this course very useful

Getting Started with Media Queries in CSS

What you'll learn

Explore related topics

Course content

Course Introduction1 lecture • 2min

Understanding Responsive Web Designs with examples4 lectures • 30min

Understanding Media Queries with example2 lectures • 8min

Application Of Media Queries8 lectures • 37min

Summary1 lecture • 4min

Requirements

Description

Who this course is for: