How to make an entire DIV container box a clickable link

 Hi there, this video we are going to go through, and make every part of this card clickable. All in one go, rather than adding A-tags to every single separate element, the whole thing. it's going to be nice and clickable going into one place. All right, let's jump in and work out how to do it now. 

So I want this entire thing clickable. I want the icon clickable, the text clickable. All of the clickable at once go into the same place. So I could go through and slowly but surely go, I could wrap my H2 in an A-tag. So at the beginning there I'll type in an A. You need a space for this, like all the printing to work, so I need a space between my H2 and my A. Then the wrapper goes from you, and put the A-tags, opens before it and afterwards.

 Doesn't need the spaces. just there for making it clear. And where is it going to go? It's going to go to this random place I haven't decided yet. That works, it's gone purple, because it's a visited link, which is not cool, but we'll fix that, but I can keep doing that for this font, for this P-tag, I could do that forever, but it's easier to wrap the entire card in an A-tag. So I'm undoing, all back. So, problematic way, so at the beginning there's A-tag. I'm going to say-- oh, beginning of this Card1, I'm going to wrap this entire thing, so the Div, clicking the Div, and it should highlight. So there's a beginning and an ending, so I want to start as A-tag here. 

It's going to go to hash, '#', and if you've forgotten what the hash does, or the pound sign, remember, it's just a placeholder link, because I don't have any other pages. This particular project, we'll make other pages, because we will, but that is now going to make it an entire link, kind of, watch. That would normally work, it is working, like, everything has gone purple, because it's a visited link, we'll make it white, but it's actually working. I can click on them all, it's all activated. 

The trouble is, it wrecked my boxes, you're like, "What happened here?" Remember, when we were talking about Flexbox, because these cards use Flexbox, right? Where's cards, plural, at the top here, cards. We said, 'Display Flex', we made these guys 30%, and the cool thing about Flexbox is, it just jam them all on one line, and then we space them evenly. So we're using lots of Flexbox attributes. Remember, one of the rules was that your cards have to be direct, children of the parent. So the parent says, you're Flex, and then these guys have to be directly underneath. 

What we've gone and done is we've jammed A-tag in between the happy family. So cards needs to-- Cards1 needs to be directly the next descendant from cards. I've taken the family thing too far, right? I've got a dysfunctional family, jeez, therapy, therapy for our Div tags. So what we're going to do is we're going to undo all of that.

How do we get around that? In this case what we're going to do, is we're going to say, we only need to add a tag to wrap around these three. Doesn't need to be around this, it would be cool, because I'd love the whole thing to be clickable, but at the moment, it's going to be all the ingredients, all the stuff inside. Now I'm happy enough with that. So our A-tag, so let's go to hash, '#'. I'll grab all of that. I'll paste it there, get it in the right place. 

Where are we going to do? So you, there, I'll tab this out a little bit. I'm doing nothing now but tabbing. So it all looks nice, so cards, Cards1 inside of it, then in my A-tag, and then all this stuff. These are all equally important, they're not inside each other. So they're all on the same kind of margin on the side here. Let's give it a preview, and a check. Cool, and it works. You're like, "It's all purple, it's not working." The default color for links that have been visited are purple, we're going to change that. So let's go and change it. 

This is a pop quiz as well, you ready? Pop quiz, you're going to pause it in a second, and try and work it out on your own, and then come back and see if you've got close. I want you to make it white, I want you to get rid of the underline. How would you do it? Pause it now, and I'll see in a sec. 

All right, you're back, there's a couple of ways you could do it. What you can do, you can say, if there's cards, plural, and there's an A-tag with an H2 in it, you could do it like a multi combination one. If there's H2s, they're inside an A-tag, that are cards, I want to say the color is going to be white. This is our way. This one, can you see there? If it's an H2, it's in there, it's white, and I can say, Text Decoration, this one might be, if you've got yours right, you're like, "How do you get rid of the underline?" Text Decoration, okay, none. So the line's gone underneath it. It is not because I've done something wrong. What did I do wrong there? Text Decoration. Often I need the code helping, to make sure my syntax is right, my spelling is right. Underline's gone. So that doesn't work, we still got an underline. Even though that was-- seems good, but then I have to go through and do one for the A-tag, and then the icon, and then that's a drama way. 

So you might have gone down that route, you might have a couple of different Classes. You could actually just say, actually it doesn't need to be that specific. Just A-tags inside of Classes. Let's give that a go; jackpot. What you also might do is you go, "I'm going to run into that problems lots." "I never want it to be purple, and I never want it to be underlined." What you might start deciding is that, remember our CSS reset at the top here, we made our own CSS reset, the Eric Myers one, we might call it the ericmyers/danscott one, because we might go into this CSS reset - where is he? - and start making our own version. So we might go in here and say, actually I want all of the A-tags to be white please, and have no underline. 

You can add it to this, then I don't need it in here. I don't need to say it. So you might find that, "Every time I do a website I never want the underline." So you can start making your own CSS reset. I'm not going to say that. Did I say reset Myers this time? I'm not even sure. Sorry, Eric Myers. If you did it a different way I'd love to see it in the comments. Let me know how you did it, take a screenshot of how you made it work. That's the way I made it work, you might find even a better way, and a good reason for it, but all that really matters to me at the moment is that it's clickable, and it's all white with no underlines. 

So the rest of this video is not going to be very exciting. We're going to go through and do it all. One thing I want to do though while we're here, we're starting to get to a point where, I don't know, it depends, you might be like, "This is still really hard, and I don't know what I'm doing", but if you're feeling just a little less nervous about it, and looking at your site, and you're like, and you've made this part, I want you to be proud. I want you to go through and go, "Actually, look, Google's code, there's code going on, I'm coding a website."

There's lots of things still to learn, you can see there's lots of videos still covered in this course, but hopefully you can get a sense of scrolling up and down, kick back, and go, "Look at me, I understand how most of that works." At the moment, you might not, next week, but at the moment you're like, "Actually, I can go through and start adjusting stuff," or at least make another site of equal complexity of this one, I don't want you to forget that, I want you to be proud, because there's always stuff to learn, like I'm okay as a Web Designer, but there are many people way better than me, but I-- it doesn't matter, like even if I finish a website and it's quite simple, I always look back, and go like, "Look at me doing the coding," feels good, I hope you feel good. 

That's enough now, let's go and finish the last bits off. I'm going to wrap all the rest of these guys in tags. So I'm going to copy that, I'm going to put in multiple cursors, where? Just here, and one just there. Holding down, on my Mac it's Alt, sorry, on my Mac it's Option key. Click twice. On your PC it's probably Alt, but remember, you can do multi cursors, you can go and check what it is in here. Put a space in, I'll paste that in. I'm going to tab it back so it's kind of where I want it to be. I'm going to tab all of this. Multi cursors are handy, right? About there, and then I close off my A-tag. So I will do it multi cursors, and I'm going to put it in my A-tag. Closing at the A. Here we go. Nice. 

All right, you, you, you, you… check it in the browser, haven't broken it, it's all clickable. Doesn't go anywhere. If you're like, "Man, that's--, the hash tag thing doesn't work, just type in http://www. Go to byol.me, that's my site. And if you're not already, it will redirect you to my site at least. Let's have a little look, click, make sure you hit 'Save', click. Card2, Dan. Ah, Card2. 

All right, that's enough for this video, and the shenanigans. I will see you in the next video. Hello, me.