Skip to main content

Make a Clickable Link

Lesson 22 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

Make a Clickable Link

Lesson 22 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

22. Make a Clickable Link

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

Getting div tags onto one line using Flexbox in HTML & CSS

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Form Check Marks

03:04
74

Multi Line Form Text Box

02:18
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

11:18
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final Quiz

Lesson Info

Make a Clickable Link

Good afternoon. It is time to talk about hyperlinks and sometimes they're called h refs or a tags. They are clickable links. Okay Like this, make a reservation we're gonna edit and when they click it in this case it's going to open up a new tab. It's going to go to google because I haven't got a good place for it to go to. But that's what we're gonna do. We're gonna do one both by itself and in line with the takes up the top here, let's jump in and work out the ways of the hyperlink. Alright, to add our link, it's going to be this fella here called make reservation. Okay. It's called a hyperlink. So let's add it to the S code. It's actually referred to as an H ref. Okay, so where do we want it? I want it after my P. Tag and you'll notice my wrappings turned off. It turns off every time you close the program down. So in between videos I was gonna go home and then I was like no I'll do one more video tonight before I head home. And so I closed down the S code. Open it back up and wrappin...

g is gone and it's a I guess a good thing to show that it's got a pretty easy shortcut if you can be bothered remembering it. Um So I'm gonna put mine just under the P. Tag here and what is it? It's an a tag. Okay. So if I type in a and hit return, it puts in all the stuff we need. Okay, so it needs a reference and in between the quote marks. Like, like most of the things in here is where we put the link we wanted to go. So in this case we'll get it to go to, I'm going to use something in yelp. So I'll pause it here and I'll be back in a second with a link. Alright, I'm back just with a random restaurant I found in the Deer. Random I went there once. I really like the food neville's cross anyway, so I've grabbed a link for us to go to, so we're going to go back into visual studio code. So when somebody clicks this button, okay, it's going to go weird. You could type in http colon, we should have just done that Dub, dub, dub. You need all the junk. Okay. It's best to have all the junk. So http colon slash slash dubbed dubbed dubbed dot and the U. R. L. Okay, that's where this button is going to go because I went to all that hassle and found a link. I'm gonna type it in even though it's really big. Okay, now at the moment is not going to really do anything. So I'm gonna save it preview. Let's have a look. So it doesn't work. Okay. It needs some text and the text goes in this a tag. So there's an opening and you can see the two little curly braces like like between the two A. H one tags. We're going to go between these a tags and we're gonna have to make a reservation that'll work. So I just hope that it could be anything. It's just text like the P. Tag but because you've wrapped it up in this eight ref tag, nothing happens, it's saved. No, nothing happens. Oh this brings up a good point. Okay remember I said I closed down V. S. Code. Okay so I closed down the S code but I didn't close down this like preview window. Remember the um what's it called? Live server? Okay so this brings up a good point. I just assumed it was still connected. I know it doesn't but I forget. Okay so I closed on visual studio code. Open it back up and that connection broke between those two. I'll leave this in the video because it's that's a good point. Right? So what I'm gonna do is go live again, it's going to start up a new page, There's my old one that's no longer connected. Can you close it down? There's my Trip Advisor and now it's connected there. It is cool. Now it could be blue, mine's purple because I've been to that link before but give it a click, loads it up and there's that lovely Trip Advisor. Okay so that is how to add the U. R. L. We'll do some styling in a second as well. One thing you might want to do though is when you click on it at the moment, it clicks on it and it's actually going to, it's replacing that page with this so you can't really go back easily. So what you do is there's an option in your H R. F. What we might do is get rid of that hole. I feel like it's made it look ugly and I'm all about making it look nice for you. So let's just put in google google dot com. Okay. So what all you need to do is after the H ref. So a tag is the thing we're using a H. F is just a part of it. So after this we're gonna add something called Target equals blank. Actually, I think it needs to be underscored blank. Hmm I need to double check that. Let's give it a preview trying to guess here. Remember, save it all preview in a browser and let's give it a click and it does work. Cool. So if you add that underscore blank, can you see what it did? It left that tab there and launched this link in an own tab. Okay. Sometimes its own window, you can't really control that. But if you just add target blank, you can do that in this case. It's not what I want, but it's going to be something that will tie into this video so you can come back to it. I'll leave it in there, let's leave it in there. And the other thing to note is that when you are doing murals, let's say this wants to go to another page on this website. Often you don't know what that is yet. You're like, is it gonna be the about us page? Okay. Dot html. But you don't have that yet. So what people tend to do as developers is you put in a hash Okay. Up near the three key. Okay. The pound symbol hash what do you want to call it? What that does is that's a really good place holder. It's kind of clear that that's a placeholder and if you leave it blank often, what can happen is it can throw an error. So if you leave it, I'm not sure if chrome does an error anymore. Let's check. Just kind of launches it in its own window. That's fine. It's working all right, okay. But some browsers freak out if there's no link in there so you put in hash, I'll show you that because that's really common to have, you might get a template website from someone else and they've left hashes in there and you're like one of those that just placeholders so that when the button is clicked it doesn't throw an error. Cool. Alright, so we'll leave hash in there now let's go back to google. Alright now let's style this. Okay, I want you to pause right now and do a little pop quiz. How would I style? Let's just think it through. You don't actually have to do it. You could do, it would be cool. Okay. But I want you to see if you can style this thing and the first thing I want you to do is make it white because it's purple at the moment. Sometimes it's blue if it hasn't been clicked yet, I want you to do that. Did you have a think? Don't worry. It's early for thinking gay or late in the afternoon for me. So it's the tech a over here. I'm going to say color please is going to be white. Cool. And that's going to change the color of it. And also will say I want the font family to be the same as the rest of it. So I'm gonna type in all that you can see now that I'm not going as slow as I did in the beginning of the class. You can actually add code quite fast using all those like helpful little hints and if I'm going a little fast, sorry. And but we've done that a few times now. Let's have a look. Yeah, it's the right color, it's the right um, font and we're going to leave the underline because I want it here because I feel like sometimes if it's not very clearly a clickable button, you need to leave the underline. But let's say it's not and you want to get rid of it. It's a weird thing. It's called text decoration kind of makes sense. But it's it's also kind of weird and you want to set it to none. So text decoration, none will get rid of the underlying there. Um I want the underline. I'll leave this in the code here for you. Okay, so I'll just comment it out. I'm going to do that a little bit more in this course. So that things that I've shown you, okay, we'll be in the saved completed files. But even though I don't want to use them myself. Now, the other thing to know about this hyperlink we did it is its own kind of like separate tags. So it's ended up kind of hanging down the bottom here, let's say you want to make this word, like the word satisfying. Okay, a link let's use let's use the word of deer so people can click on it and it goes to a map of a deer. So where is it? And so I'm just gonna put some spaces just clear a hole. I don't want them to be spaces, but I want to make it clear for you. We did the same thing. A tag. Okay, Which is an A. And that return puts it in there. Where is it going to go to? I don't know yet. It's gonna go to hash and inside the brackets here. What I want to appear. Gonna grab this, come here dear. It's going to go inside of there. Let's leave it, let's check it and you can see it's underlined. Okay? It's being told what to do in terms of the a tag, the tag still refers to the both this one and this one. Okay. And it's adding the underline and it's in the text. So this one is called in line. Okay. This is an in line um h ref or an a tag or hyperlink loads and aims for the same thing. A what is a stand for? I think it's active link and we should check and but because it's placed in the flow of P of this P tag, it would just flow along this because it's placed by itself, outside of the P tag, it hangs out by itself. So you don't have to actually do anything, you know, to steal those spaces. Didn't change anything. You see, I just added in there to make it look tidy but I'll put it back in. Alright. That is the crash course on hyperlinks. Let's get into the next video

Class Materials

Bonus Materials with Purchase

Exercise Files
Completed Files

RELATED ARTICLES

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

RELATED ARTICLES

Recent

Articles