Building a Responsive Travel Website

We're going to start creating a new website over a series of exercises and before we get started, I want to show you kind of the final result of where we're going with this. A lot of times you will start with a design, whether you are creating that design or you're working with a Designer who might be designing that in let's say Figma or something. So I want to show you the kind of the final product, the vision of what we're going to create and then working towards creating that thing.

In the class files here we have a done folder and this is the finished version of the website and I'm going to drag this home page here, the index.html, I'm going to drag that into Chrome in the background here and I could drop it into any browser but I'm just dropping onto Chrome here and here this is a travel website where we have a featured location here which is San Francisco. This is the first page that we're going to start to be building here, this featured page here and notice it has the nab bar, it's a logo, nab bar, there are things to do here going down the page with some images and footer down here at the bottom. There's some links here that we can go up and down the page so if we want to link up and down the page we can and we can go to these other pages as well.

We're going to start by building this featured location page and it is something that will adapt to different screen sizes and reflow to fit anywhere from a phone up to a desktop size. So this is where we're going with this. Now the reason I'm showing you this is because if you were given this as a figma design, something that looked like this but it wasn't a functioning webpage, you would look at this and be able to say how would I section my page.

So using those section tags that we just learned, things like header, footer, main, I wouldn't say there's any articles here so it's not like we have to use all of those tags that we learned. There's no real articles here per se. I mean I suppose you might consider this an article but I don't know that it really rises to that level.

But introductory stuff kind of leading people in things like the logo, that could be a header, the nav, we'd have a nav tag, the main part of the page, that's all this content here so the main would be all of this content here, and then the footer down at the bottom. So I would have header, nav, main, and then footer as far as the sections go. We have heading one for our main heading and then those are broken down into heading twos and then you we think those are heading threes.

I think that would make sense that that can be a heading three because those are topics within things to do. We talk about Alcatraz, talk about Fisherman's Wharf, so we could have like those three levels of headings. But in terms of main page sections, that's what we're going to code first.

So over a series of exercises we're going to build this up and we're going to start with the overall structure. I want to open up our folder that we've created for our website. Every website you do should always have a folder and I'm going to open up that folder here in vs. Code.

If I already had a window open that had a different project in, I could just create a new window. I'm already in a blank window here so I could just come over here and open a folder this way or go to file, open folder there as well. I'm going to open up a folder and when I'm doing this, like I said, every website you work on should always have a folder and this is the folder that we're going to be using.

But in that folder that's where you put all of your images, your HTML, all of the different files that you're going to be creating. And I'm going to open up this folder so that I have easy access to it over here. If I wanted to create a brand new page myself, I could come here and create a new file, give it a name.

I'll call this test.html. And in this page, to create all the standard tags, I could do that very quickly with Emmet. I can type in exclamation mark, hit TAB, and I get all of the standard tags. We'll be talking about this tag later on but for right now, for these, these are the standard tags.

So a very quick way to create all of those, again just in a new blank HTML file, just hit exclamation mark and then hit TAB, you get all the standard tags. The things that you're going to always want to have in every HTML page is a nice start to the file. I'm going to go ahead and close this and I don't need this file so I'm going to delete it.

And we're going to be starting with this San Francisco page. It is just a standard set of tags. We haven't done really anything in here.

We put in the doc type which says give me the latest greatest version of HTML. We always want to have a document type in there because the lack of it means render me like a very old webpage. We always start with the document type so it knows how to render all of the HTML.

We then say this is HTML that has a head and a body. All of the text in this page is going to be English. If they were different languages, we could remove this from here and put different language tags in different areas but this is all just going to be English.

This says use Unicode for our characters so all of our special characters like trademark symbols and copyright symbols and those kind of things, proper apostrophes and quotes, end dashes, em dashes, those will all display properly because we're doing the same encoding across all platforms. And title. This is the only thing that you see out of the head.

Normally the things you see you put into the body, that's your content that you're going to have. And if I preview this in my browser, we will see that the document up there, that's the title that's there. We're going to put our content down here in the body but that does need a title.

For this particular page, this is like things to do in San Francisco. So in the exercise, I'm just going to copy and paste the text from the exercise. This is what the, didn't mean to bring in the title there, just wanted to bring in the text.

This is the text that we're going to have you type in in the exercise. And you know you read it traveling to San Francisco, California. It technically is correct and if I hit refresh here after saving, you know we can see that that title does update.

But I like to have this text here because I want you to think like, do you think this is a good title? Would that be what you would be searching for if you were traveling to San Francisco? Like have you ever said traveling to San Francisco? Like is that what you would type into Google? Or would you look up like maybe things to do in San Francisco, flights, hotels, you know things like that. Like you know sometimes when you just don't think about a title, you just put in something that is maybe not the same language that people are using. And so for good search engine friendly, SEO.

SEO stands for search engine optimized. Try to use the language that people would be using and try to think about what are appropriate words that you should use to try to rank this page. Like what is this page really about and what are the common search phrases that people would use.

And that's what you should put into the title. And then if you're also going to put in your website, you could put in your website name after it. That is the least important thing.

Sometimes people aren't even putting that in there because people will figure that out once they get there. You could just focus on the thing that people want, the reason that they're coming to your page. So in the body this is where we're going to add our content.

And I'm going to start by creating the sections that we discussed earlier with the header, nav, main, and then footer. Then we can add our content into those sections. I'm going to type in header here and when I hit TAB it's going to expand because using Emmet to do that nice expansion there.

And I want to create a new line after this. My cursor is here so if I hit ENTER it's going to create a new line there which is not what I want. So I'm going to undo.

I could either click the end and hit ENTER there to go to the next line or there's a faster way to do this without having to use your cursor. Instead of me moving my cursor, whether I'm clicking or using a keystroke, when you type in this tag and you want to create a new line after this but you don't want to move your cursor you can't hit ENTER but you can do command return on the Mac or control enter on Windows and that'll create a new line after it and you don't even have to move your cursor. So let's do it again.

I'm going to type in nav, hit TAB, and even though my cursor is in the middle and normally just clicking return or enter would create a new line there which is not where I want it. I can hold command on the Mac or control on Windows while I hit that enter or return key. So command return on the Mac, control enter on Windows, and it creates a new line after the current one.

So then I can type in the main, the main point of the page. We got the introductory stuff with the header, then the navigation for the site, the main point of coming to the page, and finally the footer down below. So command return on the Mac or control enter on Windows, type in my footer, hit TAB.

I've got my four main sections going from top to bottom of the page and now I can start to fill in the content into these things. I want to put in my logo which I've got in my images folder. I've got a logo here which is my Revolution logo.

Now if I click on it to view it, we can see the image here and this is our logo. All right, this is an SVG. SVG is scalable vector graphic.

So this is a vector graphic in the sense that I can scale up and down any size that I want. Unlike pixel-based graphics such as JPEGs, PNGs, or GIFs, those are pixel based. Those, when you enlarge them, you will see those pixels get enlarged.

With an SVG file with a vector graphic, you don't have to worry about size. You can make it any size you want and it will always be crisp and clean and beautiful at any size. So I want to type an image tag.

So I type in img for image. When I use Emmett's tab key, so I hit TAB to expand, it adds the two main things which is a source. Where is this file located? It's going to be a relative location starting from my current file.

I've got to go from San Francisco into the images folder. So I type in im. I've got to be clicked into here, im, and notice it starts completing images.

I can hit TAB to accept that. I'm going to start typing in logo and even though it doesn't start with logo, it does find logo in there and once I've found that, I can hit TAB to accept that. Not typing things out completely manually I think is very important because you can make silly little typos that it won't actually be code problems.

It's just a silly typo and like a file name and you wonder why the image won't display. So really take advantage of code hinting because otherwise you make stupid little spelling mistakes and typos and they're the problem, not the actual code. And so this will display my image here.

I'll come back to the ALT in just a moment. I'm going to preview this in my browser either by right clicking or control clicking on the mac if you don't have a right click and open in browser or option b as in browser on the mac or ALT B on windows and here is my logo. All right, so that's that vector logo.

All right, now that says revolution travel. So I should put in revolution travel because that's what it says. Could we describe that has a globe there that is blue and orange text? We could describe things but I don't think it's necessary.

I think revolution travel like when you look at this, you basically read revolution travel. I think that is sustained to the point. It's what the image says.

I think that's appropriate for the ALT text. If you want to put these on different lines you can just so you can kind of see that inside that header is that image. I'm just going to clean this up there a little bit but you can also keep it on one line as well if you don't want to have to scroll as much.

You can keep this on one line and that will reduce how much you have to scroll. That's personal preference. The whitespace and the code formatting, html doesn't care.

It can have everything on one long line. So any formatting you want to do is just so you can understand things better. Now the main content here I have in a snippets folder here just so you don't have to type out all the stuff.

There's a page full of content here. This is our nav items, the nav text and all the other content that we're going to have on the page. So I want to copy this stuff out of here and so I'm going to take this and I'm going to cut it and I'm going to put that into the nav.

So I can paste that into the nav. I'm going to hit TAB, tab that over. So those will be the items that we're going to have in our navigation.

All of this stuff here, this stuff is all the other content. I'm just going to take it all, cut it there, nothing's left over. Good.

This is all the main content that I'm going to put in here. Paste that in. I like to keep my code nice and formatted properly.

So not because it makes it work differently. It doesn't. It just means that I can understand it better.

So I'm going to hold shift and click here to select all that. I'm just going to tab it over here. So it's all tabbed in underneath main because I want to make sure that I understand that that's all in the main tag there.

So it's easy for me to see that. Scrolling down here and this little part right here, that is technically the footer content. So I'm just going to cut it from there and paste it down here into the footer and delete some empty space there.

All right. So I'm done with my page content. Don't need to save changes there.

I'm going to save that and preview this in my browser again. Now we've got our logo and then this is our nav stuff, which we're going to come back to in just a moment. Zoom in so you can see a little bit better.

And then all of our content here. And when it comes to this content, I haven't done anything special here when it comes to the code. It's just paragraphs right now.

We'll have to say what things are headings and what level of headings they are. Got an image here with some ALT text. Another image down here with some ALT text.

Sunset at Fisherman's Wharf. Aerial view of Alcatraz Island. You know, nice descriptive things here.

And Golden Gate Bridge. All right. So let's close that up.

Now let's get back to the nav. Remember that in the previous exercise, we talked about how navs often are formatted as a list of links. We're going to do that again.

And I want to wrap a unordered list around this. I don't need the ordered list. It's not like item 1,2, 3. There's no particular order to this.

So I'm going to do an unordered list. So Option W or ALT W on Windows to get my wrap with abbreviation. UL for unordered list.

Hit return to accept that. Now inside of the list, we need list items. I could individually, one at a time, wrap each one in a list item.

Or I can select all of them. Hit Option W. Type in LI as in list item. The only thing is, this is not just one list item.

This is multiple. So I could then type in asterisk, which means times. And it figures out how many times it needs to, one for each line.

Wonderful. Huge time saver there. Later we'll come back in.

We'll actually make these links, but we're not going to worry about that for right now. We'll do that later. Save that.

Come back to the browser. And, oh, I closed it. So I'm just going to hit Option B again for browser.

And we marked it up as a list because it is a list of links. It's kind of a connected, grouped set of links. I did that because it makes sense from a market perspective.

Not because it makes it an actual bulleted list. I didn't say I want it to be a bulleted list. I just said this is a list.

These are list items in a list. It happens to default to looking like a bulleted list, but that's just a default appearance. I made the mistake when I first got started with HTML thinking I'm doing markup because it has a certain appearance.

And later I realized that I'm doing markup to describe the content. What are these things? These are list items in a list. We have to separate the look from the markup because the markup does have a default appearance, but we're not stuck with that.

We can change that whenever we want to. So as long as your markup makes conceptual sense, don't worry about how it defaultly looks. You can always change that using CSS, which we will.

We'll come back and we're going to turn this vertical bulleted list and we're going to get rid of the bullets. We're going to turn it horizontal so it goes across on the same line. We're going to completely change the appearance, but it's still fundamentally a list so the markup makes sense.

This is hypertext markup language. We are marking up our content to describe what it is, and CSS separately controls how that looks. These are two separate concerns.

Now, our headings. Traveling to San Francisco, that is the main heading for the page, so I want to change that to a heading one. So I'm going to change this to heading one, heading one.

Now, it's kind of tedious to have to change both of those in two different places, so is there a better way to do that? Let me undo. I'm going to command z to undo that. Let's say I click into one of these tags.

I can go up here to view and I can run the command palette. Now, the command palette is a variety of different commands that you can use, and there's a keyboard shortcut to open up that command palette, and you can type in different commands here. So let's say I type in rename, as in rename a symbol.

Symbol is a generic term because vs. Code does not just do HTML. It does all sorts of things, and when I choose rename and type in h1, notice how it does it in both of those. Cool.

So again, let me undo that. I just click into the tag and I go to the command palette and type in rename, and if I need to, I can scroll up and down through this list using my up and down arrow keys until rename symbol is chosen. I can also do f2 as well.

If there's keyboard shortcuts, it'll tell you what those are. Type in the new name of that symbol. Again, they just chose symbol because that could work across all sorts of coding languages, not just HTML, and now that's a heading one, and it changed it at the beginning and the end for me.

Save that and reload. All right, so there's our heading one. Now we're breaking that down into subtopics here with heading twos.

So things to do in San Francisco. I'm going to click into that paragraph tag and again go into my command palette. Rename symbol is already there, so I could just hit ENTER.

H2. Now things to do is a heading two. Go back to my browser, hit refresh.

So this is our main heading. This is one of the subheadings. Talking about that, and I would keep going through my other headings down here.

So Tor Alcatraz. So I could also hit f2 and do h2. If you want to use f2 as your keystroke, you can do that.

In my case, because I have my function keys doing alternate functions, I have to hold the fn key on my keyboard. So there's a fn key. Fn is for function.

So you can do the alternate function. If your function keys normally do something else, like for your system, like changing system volume or something, you'll have to hold function while hitting f2 to be able to get that to work. And that's a heading two.

Again, notice it changes the beginning and the ending because both of them have to match. And I'm hitting command r for refresh. So things to do.

Oh sorry, Alcatraz Island. Sorry, that was actually a subtopic to things to do. So that is actually, that's an h3.

Now in this case, I could, let's say I want to select this. Notice how it also highlights this over here. So there's an alternate way to do this as well.

If let's say h2 is not going to appear here normally. If I highlight this, you see how the other h2 is selected. I can also hit command d as in do it again.

So whatever I select, if I want to do that selection again, I can hit command d to make the other selection. This would be control d on windows, and then I could type in over both of them. So that's also another way to do it.

The only thing about that is, let's say there's a p here. When I select this p and I hit command d, it selects the next p, and you see how that doesn't always work reliably. That's where the rename symbol is much more reliable because it's actually understanding that this is a tag and it'll just rename that tag.

So Fisherman's Wharf, Alcatraz. Yes. So this is also an h3.

So I'll hit f2, and that is an h3. I think I have one more thing. Yep.

How to bike. This is also an h3. There we go.

Now, San Francisco travel tips. Totally different topic for our page. So that is an h2.

That is a subtopic to our main topic. So again, this is our main topic, traveling to San Francisco. Things to do is a subtopic to it.

Within things to do, we have touring Alcatraz, Fisherman's Wharf, and riding a bike. But then we move on to a different section, which is why this is not an h3. This is on the same level as things to do.

So under traveling to San Francisco, I have things to do and travel tips, a separate thing. So those are my headings. This is where we're going to stop for this particular exercise.

And we're going to do this over a series of exercises. We'll build this up piece by piece, seeing all the various different things. So get started with your HTML structure and your headings in exercise 3b.