How to create a simple website text navigation in HTML & CSS

This lesson is exclusive to members

Course contents
SECTION: 4
Project 2: Bike Repair Website 6:12:48
SECTION: 6
Project 4: Bootstrap Yogurt Website 3:35:39

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

128 lessons / 17 hours 5 projects Certificate of achievement

Overview

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...
  • a simple but elegant restaurant website.
  • a bike repair website. 
  • a responsive portfolio website.
  • a Bootstrap website.  

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery. 

 You will...
  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients. 
  • Learn how to create forms and to choose great fonts for your website. 
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus. 
  • Setup a domain name with hosting so that your website is live on the internet for others to see.  

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.   

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step. 

Who am I? 

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.

Course duration 16 hours 42 mins
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files Download Completed Files

Transcript

Hi there, this video we're going to make this simple text navigation. We're actually going to build this, the mock-up. We're actually going to build, we're going to get this far in this video, anyway. So it's just kind of lumped to the top here. The alignment's not perfect yet, but it's in there, it's all linking. And we're going to learn some sweet new shortcuts along the way. So let's get going. 

First up, let's put in our links. So, in here, inside of our Nav, I'm going to put a 'Return' in. I want to put in-- how many options do we have? We have one, two, three, four, five, six. Cool, so I want six A-tags. This one's got a pretty simple menu. We're going to build probably four in this entire course. Simple text one, we'll make buttons in the next project, then we'll do drop down, and, cool jQuery Burger menus for mobile. We'll get fancier and fancier as we go along, but, nice simple one to start with. 

So what I want to do is add my six links. So in Visual Studio Code I want to type in A-tag. 'Return', I'm going to put in hash, '#'. So it doesn't go anywhere, and the first one is Home. Now we can do that six times, and that's totally fine, you can copy and paste it, and change the text. I'm going to let you in on a little shortcut. I'll try and introduce little shortcuts as we move through. They're just fun, and they're good, and they're useful, and I use them, so I know they're good. 

So what we can do in VS code is we can do, say I want an A-tag, oops, lower case 'a', but I want three of them; we can use the '*6' then. So times in this is the asterisk key. It's underneath-- often combined with the number 8. So hold down 'Shift', and pick '8'. So 'a*6' means I want these, I want six of them. Hit 'Return'. Look at that, cool, huh? You're a Web Designer, and you're a hard core, and you're coding, I don't know, coding fast. Cool, huh? 

So what I want to do is I want to put a hash in all of these. I imagine if there's a shortcut to do all of that. There is, that's a bit of a slow process. So a lot of the time you end up working on these kind of, like multiple groups, doing multiple things, all the same. So what we can do is, we'll do one more, one more shortcut. You can just obviously type them in, but if you're on a Mac, it's under this one here, that's the shortcut you're looking for. So it's under View, no, it's under Selection. It's this one here, Add Cursor Below. 

On a Mac it's Option, Command, yeah, 'Option Command', and the down arrow. So they're cursors, you know, the up-down, left-right. On a PC it's Ctrl-Alt-down arrow. So here where I'm flashing, so make sure your cursor's flashing there, on my Mac I'm going to hold 'Command Alt-- 'Command Option' and hit down, down, down, down, down. And then I'm going to type hash, '#'. If you're on a PC, it's 'Ctrl-Alt', down, down, down, type hash, '#'. 

I want to get rid of it now because I don't want Home in all of them. So I'm just going to click once anywhere else. I can click on the first one, and in your text, somewhere in the Exercise Files there's a file called Project1-txt. I'm just going to copy and paste it all in. 'Copy', 'Paste', you can do the same. If you can type you can just type it all in. You don't have to put anything in. I'll speed this up. All right, thank you, editor. It's Jason by the way, I call him editor all the time, but his name's Jason, he's awesome. Thanks, Jason. 

We'll do a 'Save All', and we'll preview it in the browser. Does this update? It does, there it is there. Cool. So I've got all my text in there, it's not quite right because remember, it's, because there's an A-tag, and we styled the A-tag down here, these guys, "Hey, we're the same, let's do the same thing." So we're going to have to do some specific styling for this, to get it to look like my mock-up here, but we can do that. First thing we'll do though is we want to center it. So what we're going to do is, we've done this before, we want to go through and center using Text Center. We'll do it to the Nav, we'll say, all the text inside of me is going to be Text-align:center. Semicolon. 'Save', 'Save All', click in a browser, look at us. 

Padding to mess with, underlines to mess with, but that is going to be it for this video, at least. We put the Navs in, we learned some shortcuts. All right, I've kind of doubled back, I finished the video and I was like, "Oh, I should mention this." We started doing shortcuts now. I felt like it was the time to start doing some basic ones, and if you're like, "How am I going to remember these things?", or maybe you've started writing them down already, I've created a folder in your Exercise Files. So Exercise Files, Shortcut Sheets, open that up, and we've got-- ignore that one for the moment, we'll look at it later on, but these two will be handy. 

So VS code, we'll look at first. So there's a Mac or PC, depending on what you're using. I'm going to open up my Mac one, and let's say-- it's a nice one page, you can print it off, stick it next to your computer, Highlight the ones that you find useful, you're not going to remember them all, but the one we just used, can you see, Multi Cursor Selection, that's the one, I use the Insert Cursor below. So you might just highlight that one now. Print it off, highlight it and say, "That was a useful one, Dan, I'm going to try and remember that one." 

You might have a read through, maybe further on in the course, you might read through and go, "Oh, didn't realize that was the shortcut." Can be really handy. 
Well this one here, Save All, one you can never remember, highlight that one. 
All right, so that's VS code, the other one in there is called Emmet. So Emmet, we didn't really talk about, it's got a separate name, these shortcuts, they're called Emmet shortcuts, but for you it's these ones, it's when we say, all the Emmet ones are things like, "All right, A-tag, if I type A, and hit Return", Emmet is kind of doing that, but it doesn't really matter what it's called. Emmet is what it's called. The same thing before, we did 'a*6', remember? That is an Emmet, well you can see it there, Emmet Abbreviation. There you go, you probably have seen it. 

So they call it Emmet, and I've made a little shortcut. Well, I haven't made it, I've collected this for you. The problem with this one, it's like 24 pages. It's got every single thing you might do. I find just useful printing off the first two pages, because the rest of them, yeah, it's quite hard. They've highlighted the really important ones, the ones that you're likely to use, but yeah, maybe just print the first two off. I find it really interesting to look at these kind of structures that you can do. We'll get into these further on, but it's probably a good time to print these off now, so that you can start scribbling your sweet new shortcuts on it. 

All right, now is the end of the video. See you in the next one.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024