The Basics
Intro to Web Development
Full screen? Down there.
Lesson 8: Responsive Design
Responsive Design
# 8
Course Goals
What DID you learn?
Students will understand the Box Model in CSS.
Students will learn all basic HTML tags & CSS Properties.
Students will understand how to use Glitch to create live sites.
Students will understand how to effectively leverage documentation.
Students will be exposed to Mobile-First Responsive Design.
✅
✅
✅
✅
🚧
Responsive Design
A quick look at making something responsive
Responsive Design
Looking at the syntax
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}All this means is:
the body will have a light blue background
as long as the screen is less than 600px
Responsive Design
Lets make our page resonpsive
@media only screen and (max-width: 600px) {
h1{
color: red;
}
}The h1 will be blue when the page is small
try increase the number 600px and adjusting your browser widow
Responsive Design
Lets make our page nice!
@media only screen and (max-width: 850px) {
h1{
font-size:2rem;
}
nav li{
font-size:.9rem;
}
}When the page is viewed at these mobile widths, we want the h1 and nav items to be a bit smaller
Responsive Design
Lets make our page nice!
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Item</li>
</ul>
</nav>
<div id="grad1"></div>
Our image looks crummy in mobile, and we do not want to stretch it, so let's get creative.
Add this to the HTML
And add a new media rule above the other one
@media only screen and (max-width: 1200px) {
}Responsive Design
Lets make our page nice!
We want the image to disappear at tablet widths
we want to replace it a color background
Let's do this live! A few gotchas
@media only screen and (max-width: 1200px) {
.banner-image img{
display:none
}
#grad1{
display:block;
background-image: linear-gradient(#6A86AA,#169F85);
height:1200px;
}
}What does it mean to get a page online?
Q & A Time!
That's all folks
Thank You!
Contact Info