Introduction to CSS Media Queries and Java Script
Lesson 6 from: A Designer’s Intro to HTML and CSSChris Converse
Introduction to CSS Media Queries and Java Script
Lesson 6 from: A Designer’s Intro to HTML and CSSChris Converse
Lesson Info
6. Introduction to CSS Media Queries and Java Script
Lessons
Introduction to HTML and CSS
06:50 2Beginning the Project: Adding and Formatting the Content
34:30 3Creating CSS Rules for Text Styles
24:43 4Creating CSS Rules for Layout and Images
23:59 5Creating Display Properties for Links
13:46 6Introduction to CSS Media Queries and Java Script
10:10Lesson Info
Introduction to CSS Media Queries and Java Script
So, media queries are a way in CSS that we can basically query the media of the device that somebody's using in order to check the width, check the pixel density, how high definition is it, we can even check for paper, which we'll do in our more advanced class, and again, this gives us the ability to add just more information to our CSS and change the behavior for how this is gonna work. So what we're gonna do is, we're gonna add a media query in here, and we're going to use the media query to change some of our layout based on screen size. So, what we're gonna focus on here, is we're gonna setup a media query for screen size. Again, we can have all, which is if you don't specify a particular media query, everything we're doing is for everything. When we talk at a screen, what we can do is, we can set a minimum and maximum width, and we set a max width earlier with our image, we said don't ever get wider than 150, but we can actually see how big the user's screen is. So we can tell by ...
this if their on a phone or a tablet. We don't know specifically which phone, but we know that the screen is only maybe 600 pixels or 500 pixels, and there's even some media queries for speech as well. So let's switch back to our computer, and let's just take a quick look at how we would setup a media query. And so we'll do something really simple. Let's scroll to the top, and let's just simply change the width of this spices graphic if the user is on a really small screen. And so we would do that by starting with a @ symbol, type in the word media, and you'll notice this looks just like the @import we saw earlier. So the @ symbol is a way that we can add additional sorta media or elements or instructions to our CSS file. So @media, screen, then a space, then the word and. So we're saying if the screen's, we're targeting the screen, and then we're also gonna look for a max width. So I'll say max-width: 550px, then we're gonna put in our brackets, and this is a little different than our other rules because in the other rules, we would have a beginning and ending bracket, such as the footer, and then we'd put our properties in here. However, when we have a media query, we're going to put full CSS rules inside of the media query itself. So now inside of this media query, we're gonna say header img, put in our beginning and ending bracket, and we're gonna set a width property of, let's say 200 pixels, and then let's change the margin bottom property, so I'll say margin bottom and we'll, since it's not gonna be quite as tall, we don't want it to cut in 50 pixels from the bottom, we're gonna set this to just -30 pixels. So it's two properties that we're changing based on the width of the screen. So now if I increase the screen, we are above 550 pixels, and then when we get down below, notice the size of the image will change, and the image will also only overlap 30 pixels instead of the 50 that we had before. If I took out the margin bottom 30, notice how much higher the heading goes here, because the whole image is only, is much less in height than what we had before. So set the margin bottom back to -30. So media queries are part of the backbone of responsive web design. One of the things that we try to do is we try to, before we put in our media queries, we will try to see how much we can do with percentage values using things like floats, in order to get the design to respond, down to various screen sizes, and then when you get to the next level, you start putting in media queries, and this is where you really start to change the behavior completely. We can remove a float, for example, because we don't want to have a really thin level of content. Anything you want to change and modify in the layout can be done inside of these individual media queries, and again, that's gonna be part of our more complex course where we will change, not only the layout, but we'll also change the behavior of things like menu systems with media queries, because we can go in here and check to see how wide the person's screen is for those individual pieces of media. And then lastly, I want to quickly just talk about JavaScript, just a couple of sentences. So if we could switch back to the keynote. You can't talk about HTML CSS without talking about JavaScript, and JavaScript really is just a language that allows you to dynamically change HTML properties and CSS properties. So it's HTML, CSS, and JavaScript together that create that entire web experience. So I will show you what JavaScript looks like. It's really super simple to do some really simple things, but the idea that I want you to walk away with is the fact that JavaScript really just changes the properties of the other two elements. So if we have our h1 tag, and we have our CSS rule, we can have some JavaScript down here that will basically target CSS or target HTML and just make a change based on something. So if somebody visits our website, and their logged in, their names Bob, maybe we got it from a database, maybe it's a Twitter feed, maybe it's a Facebook feed, or an Instagram photo, we load that content in, JavaScript can get that information, and then basically send it back to the other elements. So we know Bob is here, and we want to change the color. So basically JavaScript can then change the content in the page so that the h1 is now saying, hey Welcome Bob, and we change the color of the page that he's currently looking at. So to show you what this might look like, let's switch back over to the computer, and I'm gonna go into our Files, and let's just take a quick look at what that might look like. So here's our finished HTML page, I'm gonna open up the Preview, says Welcome, Kim, if I scroll down to the bottom of the page, and just take a look at the JavaScript, this is all we're really looking at. Oops, so again, I'm not gonna turn this into a JavaScript class, but I just want you guys to see what is happening here. So down here we have our member name, we're saying get our element by id, so if I scroll up to the top, the h1 tag simply has an id on it called greeting, or the paragraph tag rather, so then down here, we're basically just saying to the browser, get the element greeting, set the innerHTML to Welcome, the name of the member that we setup here, and then here's the color that it changes. So when this page loads, all the HTML gets loaded, all the CSS gets loaded, then the browser gets down here to the instructions and we are telling the browser, when you see these JavaScript instructions go and change that content. So this makes it so that everybody who sees the page sees something different. And I'll just give a shout out to Rocky and Helen who are watching. So we're gonna change this to, instead of Welcome, we're gonna change this to Hello, and so as I make changes, we can see at the top of the document, this will say Hello, Rocky and Helen. So again, so when you're seeing all this content here and you're on a website, and things are changing, you see menus that popup, you see Twitter feeds, again, anything that's interacting with you or feeding you live data, it's little instructions like this in JavaScript, that are changing that core stuff that we just spent our class going over. It's changoing the elements inside of the HTML, it's changing the properties of the CSS, it's basically manipulating and changing the user interface in realtime. So everybody can see the same HTML, but each one could greet you with your name, the time, a date, the weather, where you are in the world, and JavaScript just gives us that ability to target those other two elements. And so with that, I can't wait for you guys to go try this stuff on your own. It's super fun. Awesome, Chris, thank you so much. You know what I'd like to do now, two things. First, can you let us know how we can find you if those of us out there on the Internet want to potentially follow you online and sort of, oop, there we go. Absolutely, yeah. Let's talk through this. All right, so our company website is codifydesign.com. You can signup for our newsletter and we have a weekly newsletter with tips that you can watch online. My website is chrisconverse.com, and then Twitter, Facebook, Instagram, and YouTube. So these are places that will have more content online and I hope you guys just go and try this stuff. You know, HTML and CSS, it's just like what you're doing in tools like InDesign or PowerPoint, it's just that their separating the HTML and CSS, but at the end of the day, it's the same content. You're putting structure, you're putting content inside, you're styling it, you're coloring it, you're positiong it, it's really the same sort of idea, and I think once designers start playing with this, you really start to push the envelope of what we do on the web for graphic design. And for folks that were just amazed by this content, and it really resonated with them, if they want to learn more, what can they do tomorrow Chris? Let's talk a little bit about that. Well tomorrow we are going to take this stuff to the next level. We are going to build a full webpage, that's gonna have a menu system at the top. The menu system will actually be built on an unordered list, and we will create nested lists that will hover and drop the list down. We will change that behavior for a small screen so you can tap on it and using a simple form element in HTML we will open and close a menu, no JavaScript, and we will just do a bunch of stuff inside. We will change layout based on screen size, and we'll even setup some CSS rules so if you print the page, we will readjust the layout for print, versus looking at it on screen.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
BolesMA
Awesome. So simple and very informative if you are slightly aware of HTML and CSS but aren't sure about using them to construct a page. If you have been relying on templates to build your site and dabbled with a little code to improve them....this class will take you much further. If you've relied on templates and have been frustrated by the limitations of them then this class will help you being to understand how web pages actually work. If you're wanting to take more control over your pages then this is the class to start with! Can't wait to to take his other classes. Super easy to follow and very informative!
Lu Gerard
I am completely new to web design and this video has been a great purchase. I now understand the basics very clearly. I am also happy with the way Chris talks and explains, as I am not an English native speaker and sometimes class contents might not be difficult but the speaker is. Definitely not the case. I used the subtitles and watched each video a couple of times. Highly recommend it for beginners like me!
AnissaT
I appreciated Chris' direct approach and simple explanations. I've been developing and teaching website development for 20+ years, and enjoyed his pacing and resources. This was a solid, straight-forward introduction for new designers.