Create a Media Query, Responsive Web Design

Channel:
Subscribers:
8,020
Published on ● Video Link: https://www.youtube.com/watch?v=L3va9tgiB30



Duration: 3:36
271 views
3


In this first lesson from the freeCodeCamp's Responsive Web Design Principles course we start off our adventure looking at CSS media queries. CSS3 introduced media queries. A media query allows us to target certain devices based on their screen size. For example, we can target devices with a screen-width of 350px or less, and only apply certain CSS styles when a device meets those requirements. Or if we want to target devices that meet a certain height, we can do that as well. Media queries allow us to show smaller text on smaller screens, and bigger text on bigger screens. This is beneficial because if we always show big letters, they will look huge on small screens and vice versa too. If we show small letters all the time, then they may become hard to see on bigger screens.




Other Videos By We Will Code


2018-11-14freeCodeCamp's Array Method Practice, Equality and Strict Equality in Javascript (9)
2018-11-13freeCodeCamp's Global Scope and Functions, Understanding Local & Global Variables In JS (8)
2018-11-12freeCodeCamp, More Array Methods, JS Function Declarations & Parameters (7)
2018-11-09freeCodeCamp's Intro To Javascript, Understanding Arrays & Multi-Dimensional Arrays (6)
2018-11-08freeCodeCamp's Using Bracket Notation on Strings, Mad Libs, Intro to Javascript (5)
2018-11-03freeCodeCamp's Javascript Introduction, Escape Sequences, Concatenation. String Length (4)
2018-11-02freeCodeCamp's Intro to Javascript, Compound Assignment & String Literals (3)
2018-10-31freeCodeCamp's Make an Image Responsive,Web Design Principles
2018-10-30freeCodeCamp's Introduction to Javascript, Math Operators in JS (pt.2)
2018-10-29freeCodeCamp's Introduction to Javascript, Comments, Variables, & Casing
2018-10-29Create a Media Query, Responsive Web Design
2018-10-28freeCodeCamp's Make Motion More Natural Using a Bezier Curve
2018-10-28freeCodeCamp's Use a Bezier Curve to Move a Graphic, Applied Visual Design
2018-10-28freeCodeCamp's Learn How Bezier Curves Work, Applied Visual Design
2018-10-26freeCodeCamp's Change Animation Timing with Keywords, Responsive Web Design
2018-10-25freeCodeCamp's Animate Multiple Elements at Variable Rates, Applied Visual Design
2018-10-25freeCodeCamp's Animate Elements at Variable Rates, Applied Visual Design
2018-10-14freeCodeCamp's Make a CSS Heartbeat using an Infinite Animation Count
2018-10-14freeCodeCamp's Animate Elements Continually Using an Infinite Animation Count
2018-10-10freeCodeCamp's Create Visual Direction by Fading an Element From Left To Right
2018-10-09freeCodeCamp's Create Movement Using CSS Animation, Applied Visual Design



Tags:
responsive web design tutorial
freeCodeCamp responsive web
media query tutorial
learn media queries