Lecture 33, Part 1: Fixing Navbar Layout, Text, and Dropdown Menus

Loading...

Del curso dictado por Johns Hopkins University

HTML, CSS, and Javascript for Web Developers

4265 calificaciones

Johns Hopkins University

HTML, CSS, and Javascript for Web Developers

4265 calificaciones

Curso 4 de 6 en SpecializationRuby on Rails Web Development

Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones. In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.

De la lección

Coding the Static Restaurant Site

Ready for some REAL fun? This module is it! We'll go over some basics of interacting with a client when managing a web site project and then go visit a real client at their place of business (a Chinese restaurant), help the owner figure out what she wants in a site, and get acquainted with the restaurant in general. We'll spend the rest of the module building a real web site for this business from scratch and you'll get to sit next to me and watch as the site comes together.

Lecture 30, Part 1: Coding Basics of Navbar Header9:17

Lecture 30, Part 2: Coding Basics of Navbar Header7:39

Lecture 31: Coding Button for Future Collapsible Menu6:43

Lecture 32, Part 1: Coding Nav Menu Buttons11:05

Lecture 32, Part 2: Coding Nav Menu Buttons3:35

Lecture 33, Part 1: Fixing Navbar Layout, Text, and Dropdown Menus7:41

Lecture 33, Part 2: Fixing Navbar Layout, Text, and Dropdown Menus4:56

Conoce a los instructores

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[MUSIC]

In a previous lecture we saw that there was a bit of a problem with our layout

when we went from the wide screen to a little bit more of a medium screen.

So let me show you what's going on.

So if I go over here and I cross the 1200 pixel break point.

This thing jumps and it goes over here.

And that kind of looks unseemly.

We really want this a little bit higher up.

Well, the reason this is happening is because this DIV right here and

this DIV they're both floating, and since we're kind of running out of room on this

one row, just like any other float element it just gets pushed to the next row.

And it's still floated right, so that's why it's still over here and

not moving over here.

So let's verify that.

Let's go ahead and select this right here and that's our header navbar-header.

And if we decrease its width, let's say 400,

and you can see it jumps over here, right.

So since we made this smaller.

It jumped over here.

Well, let's refresh that for a second.

We really don't want to decrease the DIV, the entire DIV.

What we really want to do is actually make this logo a little bit smaller.

It's kind of a candidate to be made smaller, anyway since we have a smaller

screen and we want to make the image a little bit smaller, and

also kind of save a little bit of bandwidth as well.

So, let's go back to our code editor and

I'm located in lecture 33 in the after folder.

I'm going to bring up my styles that's CSS and obviously we're up to break point,

which means we need to write our own media queries.

And I kind of wrote out some of the media queries we're going to need right here and

we're going to have a media query for

large devices with minimum width of 1200 pixels.

And as going to be a medium device with a range of between 992 and 1199.

The small one is going to be between 768 and 991 and

extra small will be Basically max width is going to be 760 pixels.

Now I didn't make these up.

I actually took them verbatim from how Bootstrap subdivides and

creates it's break points.

Okay. So what we're targeting at this point is

the medium devices one.

And I already have some code that I could just copy and

paste over here that will make our logo a little bit smaller.

And here it is.

So we're targeting our logo image.

And we're changing out the background image URL to a different logo.

It's a different file.

It's restaurant-logo_medium.png.

And it's smaller in size.

So before I think is was 150 pixels by 150 pixels.

And now it's a little bit smaller and

the padding perhaps is a little bit smaller as well.

This is something you basically have to tweak a little bit yourself.

You know there's no point of doing this on screen once it looks good,

then you're good to go.

So let's go ahead and save that, and let's go look at our browser.

And viola, look at that.

So now, we're much better shape.

We can see that, this thing shrunk,

this logo shrunk and therefore it gave us enough room here to have a few buttons.

And now if we squeeze it at certain point,

at the small break point right here, the logo will completely go away and.

This will at this point not fit here anymore and

it will slide right under our brand name or the name of the restaurant.

And actually this look pretty good some okay with that and

not really having to fix that because, this to me it looks nice and compacted.

And as we go closer, there's something still needs to be fix but

at the medium and the small break point, we're now good to go.

So in the large break point, we're also good.

You could see the image keep switching sizes at this point so we're good there.

Okay so seems like the only thing we need to start fixing here is when we get all

the way to the small screen, David Chu's China Bistro looks pretty good but

it's probably too big, and certainly this spill over is not good either.

So let's go ahead and go back to the code editor and we'll try to fix that.

We'll scroll down to the extra small Device.

Let's go back and recheck.

We are now below 767 pixels, so we're in the small and the extra-small range.

And let me go ahead and cut and paste some code that I pre-baked for this.

Okay. So let me go over this code right now.

So first thing is, on the navbar brand, we want to do a couple of things.

Number one is, we want the padding to decrease a little bit.

I think it was 15 pixels before.

We're making it now ten.

And also we want to set a concrete height for it.

So we don't rely on the whole thing collapsing around it.

So we want to.

Limited to 80 pixels but at the same time set a concrete height.

Number two is the restaurant padding is also going to decrease a little bit,

I believe it was larger before.

Now it's padding top to be 10 pixels.

And the font size is something we haven't really seen in this type of unit before.

It's 5vw.

What is vw stand for?

Well vw stands for viewport width and one unit, so

if you let me create a little note here as one unit of vw,

vw is equals to 1% of viewport Width.

And the reason we're using these units is because these units are responsive.

In other words as the screen keeps stretching and being squeezed

this is going to be, the font size is going to be relative to the screen width.

And this is what we want here.

And five seems just about right for that.

And this is one of those responsive font-size units that

has been introduced a few years ago, but at the same time it is very widely

supported among just about all the browsers.

Next, what we're going to do is, we're going to decrease the font of our Kosher

certification that, Kosher cert, and that's just the word, kosher certified.

And we're going to keep it all in uppercase.

And I believe we probably all ready had this before.

And we could check this real quick.

And I see that the rest are.

Here on to the navbar-brand p already had the Kosher cert,

already had the upper case so if we scroll back down

really don't need this anymore we could just take that out so,

that's kind of duplicate, and we are also going to give it a smaller margin top.

And just to constrain the star K, that star that we saw over there,

that star image.

We're going to give it a height, so we can actually center that kosher certified

with the star image and it will align nicely.

So, let's save that and go over to our web browser,

and we can see now that the name of the restaurant is Is bigger than before, so

now it's filling up a little bit more space, since we removed the logo.

And this kosher certified is sitting nicely within the yellow region.

So, if we stretch this back out, this should switch back to the previous size

of the restaurant name, and give it more content in the header.

And as we stretch all the way out It will now show the logo of the restaurant.

And obviously as we go beyond the 1200 pixels,

the logo of the restaurant is going to become much bigger.

And let's go back to our small size.

And here's where our small size as you can see,

the name of the restaurant is stretching depending on how wide the screen is.

Okay so that's it for part one of this lecture.

And in part two we're going to turn our attention to styling the drop down menus.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play