Transcripts
1. What Will You Learn In This Course?: Hey, guys, down here. Back with another course for you, This one. We're going to be building a simple one page freelancer profile template. So let me go through and show you some of the things about this that might be interested. You might interest you in taking this course, so start off right at the top. I have, ah, one of these nice little sort of fly out menus like this using some CSS transitions here. So that's something that we're going to go through. Ah, in this we scroll down through this course, we just have the general sort of HTML and CSS design and look and feel and so force, we'll talk about that and some of the things. Ah, that I did hear that I think made this look a lot better. We also have a portfolio section with pop up. You'll see here that we can actually go through and sort of scroll through these. So sure you had to do that and then will come down to the bottom. We actually have a contact me form. And if we fill this out and I'll just put some dummy Texan here hit Get quote. This is actually going to submit this form via Ajax and then give us a responsible will display a message. Ah, success or fail based on what we get back. So just to hop over to the code a little bit, that's sort of the front end. Of course you're gonna learn a ton of HTML. We're also gonna be building a grid system that you can drag and drop into different projects. And this is using CSS grid. So we'll go through that multi gonna show you how I built that menu. Ah, using the CSS transition. So we have that. We'll also get into some of the JavaScript for handling some different things with the menu . Also, you show you some options for different ways that you can handle the menu also. Of course, we have the form handler Ah, for the the form that we're building via Ajax. And then we have our PHP script here in order to handle that request. Ah, send the email and so forth and then give us our response back. So again, a lot of html ah, lot of CSS some decent ah Java script and some PHP as well all sort of coming together in this project based course to build this freelancer template. So if that's something you're interested in that enroll on the course, and I look forward to seeing you in the class.
2. How to Get the Most From This Course: Hey, so real quick Before we dive into the nuts and bolts of this course, I just want to do something real quick on how to get the most out of this course before I get into that real quick as you go through the course. If you do like the course, I'd really, really appreciate if you'd leave me, Ah, review of the course. That helps out a ton. So if you could do that, I'd really appreciate it. Also, be sure to check out my profile and follow me over there if you want to be notified by skill share. When I upload any new courses, I try to upload pretty regularly. So if you want to be notified when new courses are uploaded, just be sure to follow me over on my profile. However, that out of the way, let's let's talk about how to get the most out of this course. So one thing I want to make sort of clear about this is this is a project based course, So in this course, we're gonna move pretty hot and heavy through how to build this website, and we're not gonna spent too much time on a sort of going into explaining how a language like HTML CSS or PHP or JavaScript works. Okay, so I'm really this sort of assumes. Ah, a little bit of a base of knowledge, of familiarity, at least with these languages. And then I'm just going to show you how to do this stuff. And so I just want to make that distinction of this. Is showing you how to do something specific with the language, not necessarily teaching you that language in depth itself. If you that's something that you want to do. If that's more what you're after, then you really want to check out Ah, language specific course where they where someone goes deep into explaining what languages . So an example. I can actually go over to my profile real quick. I have this beginner guide PHP that's a in depth. It's eight hours just going into PHP and trying to explain everything that you would want to know about PHP. Beginner's Guide to PHP. That's about 3.5 hours. Does html uh, 3.5 hours That does exactly the same sort of thing. Even this object oriented programming courses is going specifically into just object oriented programming, which is a way of doing PHP code and so forth. So I just want to make sure and make that distinction between a project based course and a language specific course, because a project based course like this is gonna move kind of hot and heavy, and it's sort of on you to fill in the gaps. Ah, that you may have with a particular language as you go along. So if you're finding that you're running into gaps, that's sort of the way to solve that. Ah, and again, this course is just to show you how to put certain things together in a certain way. So that's how to get the most out of this course. My suggestion. If you run into a really big a gap, I would go and fill that gap before you move on, because it's it's really gonna be. Everything sort of builds on the thing before it. So it's gonna be hard for you to continue with the course if you have this big gap of knowledge in there. And that's also one of the nice things about project based courses. Is they sort of helped to expose that sort of thing. That may feel feel like a negative, but it's actually a positive. It helps to exposed where you may have holds because we're bringing together HTML, CSS, JavaScript and PHP. You know, you may have never done all of those things together before, and we're doing, you know, Ajax and we're doing CSS transitions and translate and some things that you may not have done before. And so again, it just helps to expose those holes. So now you know, and then you can go and fill in those gaps. Okay, so that's that's the value of a course like this. That's don't shy away from that. Don't be worried about that. Just when you hit those holes going trying and fill in those gaps as you go along. So again, that's how to get the most out of this course. Hopefully, that helps you as you go along through this
3. Build the Responsive Grid System Using CSS Grid: the first thing I want to do here is actually build the grid system because we really need that before we could do anything else with their site. But I gotta sign it, kind of get the project set up here. So I'm gonna go into my folder structure here. And under this templates one, I'm just gonna create a new folder called Working the Fold of That. I'm I built this in Previously is Freelancer Ah, 001 is what I'm calling it for now. But I'm gonna use this working folder for what we're going to do here, and then I'm going to inside of this create a new file called index dot html and because we're using Ajax, where we're submitting to a PHP script, but because we're doing that by Ajax, we don't need to make this in html file. Some people often ask me about that, so I'm gonna do this. One is an HTML file, just so you can sort of see that. And then we're gonna open this file and I'll close this up for now. And I want to do a preview of the life file and so we don't There's nothing on it, so we don't It's not showing anything here, but now we can actually open this back up and let's go ahead and create a new folder called CSS and inside that let's go ahead and create a new file called grid dot CSS. Now, I'm putting this grid. I'm gonna put the grid and the menu actually in their own CSS files. The reason I'm doing that is because these are meant to be sort of drag and drop files that you don't have to constantly rewrite for every project you can just drag him into a new project. And it's there ready for you to go in your good system that you want to build. Once you build it, how you want it, you can again. You're just going to sort of use that. So becomes sort of like your own many bootstrap in that sense. Okay, so let's go ahead and open than this grid dot CSS up. And now we can close this. And so we're gonna be using CSS grid. Here, let me go ahead and just ah comment. This are marked this correctly title this and this is how I tend to do it. I mean, you can sort of do it however you want, but Okay, so there's there's essentially three main things that we need in here. If you're familiar with grids, we need a container. We need a row, and we need columns. Okay, so let's start off with the container. It's pretty straightforward. And all we're gonna do here is we're going to do margin left, auto and margin, right, auto. And essentially, what this is going to do is just center it for us. And then I've done patting left of 15 pixels. I just like the way that looks. You can sort of play around with that, but so that that's sort of up to you. Um, but that's essentially the container. All that really doing is just sort of centering. Ah, the container element. I'll show you here in a minute, what that's gonna gonna look like in a second, but ah, and then giving it a little bit of padding. So it looks like so that has really nothing to a CSS grad. That's just getting our container up on working here. All right. And then we're gonna do Ah, we're going to do our row. And this is where we start with the CSS. Good stuff. So for CSS grid, we need to do display grid. So that essentially says, Hey, we're gonna use CSS cred. And then for this there's lots of different ways that you can use CSS great. And you can get a really complex layouts and so forth, but a grid systems actually pretty straightforward. So we're gonna do grid template, uh, template columns. And then we're going to use the repeat function here, and we're gonna do 12 and then one fr. Okay, So, essentially, what this is saying is this is our template for our columns. And so what we're saying is we want to have 12 1 fr. Column. So the fr is sort of this flexible, Uh, this flexible unit that is gonna fill remaining space essentially, what this gives us is it gives us 12 columns like you're used to in a grid system from bootstrap or whatever, and then I'm gonna do grid gap 20 pixels like this. So that's just the gap. Ah, that's gonna be between the different columns. Okay, Now that we have that, that's all we need to do. for a row. You're gonna see what? CSS grid. This is really pretty straightforward. Now we just need to do our column, so I'll show you an example of one, and then we'll just sort of drop in the rest. So call one. And so this is gonna be a one column with column, and we're gonna do grid. Call him and then span one. Okay, Now you're seeing all these airs over here, cause might apparently my my i d here doesn't recognize all this new fancy CSS good stuff. But this year is pretty straightforward for a one column with Call him. We just set the grid column to span one. And as you might have guessed for a two, call him with column. Then we set grid call, um, to span to like that. Okay, so it's pretty straightforward. I'm gonna Instead of having you sort of watch me type out the rest of this, I'm just gonna drop in the rest of it. So three through 12 here. So you can see again Column Juan span Juan column to span to calm three span three. Except you're on down the line to 12. So that gives us our 12 column wits. This is sort again. Sort of what you used to Bootstrap. We're now just doing it, uh, with CSS grid. Next, I'm gonna create one sort of utility class here, which is no gutter. So this is if we want to not have a gutter, we're gonna use this in the portfolio section. So then we're gonna do grid, call him gap, and we'll set that to zero, so that would get rid of the space is the space between the columns and then we just need to do our media query. So we have three pretty easy ones were going to do at Media and let's do men with 999 or 92 pixels. We're gonna target that break point, and we're gonna ah, just change the size of our container and we're going to do with of nine hundreds, 70 pixels. So that's just shrinking the container. This is sort of the standard fixed grid. Ah, approach. When we're at 992 we shrink down the container. So then everything inside of it shrinks with it, okay? And we're gonna do the same thing for above 1200. So at media and we're gonna do men with 1200 pixels like this and then container, and we will set that to a width of 1140 pixels like that. Okay, So, depending on how big the screen is, we're gonna just We're gonna shrink or expand our container. Pretty straightforward stuff there. This one's a little longer. This is for I'm gonna just drop this one, and this is a little bit longer, but this is for the columns. So if we get below seven or 786 768 pixels or lower all of the columns, we're gonna change the grid span 2 12 So what that does is it essentially makes them below 768 pixels. It's gonna go anything that side to side like So you have three boxes. I decide it's going to squeeze those to be on on top of each other, which is sort of what you expect from, ah, responsive. Great Here. So that that's that's it. That's our grid system. With CSS grid, you can see that's a lot easier and a lot more straightforward because of the tools we now have in CSS cred. So let's come over here and gets Doc and let's do this. And then let's go ahead and let's include our CSS file for a second here so we can take a look at this. So we're going to do Leak will clean this up here in a second, but we'll do style sheet like this, and then we're going to do a treff and we're going to do equals and then we can use to CSS slash grid dot CSS like this. Okay, so that should drop in our grid system and then we can do a lot times the way this is done as you'll do section and then inside of that you'll do container. Uh, div class equals container. Day of classes should look familiar from ever worked with bootstrap row and then say div um , class equals and will do call. We'll just do call three like this and we'll say one and then we'll drop in a few of these like this. OK, so this is sort of the standard thing that you'll see. Um, let me just do some quick styling so we can see this. Ah style. I will do section that will do background numbers is zero. Okay. And let's just do color number f and then for our columns Productive call three. We'll just keep it easy like that will do color. We'll just do read something like that. Oh, and let's do background, not color. Okay. All right. So you can get some idea here of what's going on. We've got our are sort of, um we've got our container. We've got our row. We've got our columns inside of that. Actually, that only adds up to nine. Let's do for for for little give you better idea. Okay, so, uh, actually changes to call four. Okay. So you can see our grid sort of stretches across here. It's got the grid column gap in between here, like we set. And so you have a nice grid system that we can work with, and I don't know for yes, So you can see here. Once we get below 780 68 pixels, it drops into top the bottom there. So again, just started sort of a standard responsive grid that you would expect to see done with CSS grid. And this is something that you can take this here and you can sort of tweak it, how you want it and then create and keep that CSS file so you can drop it into projects. Of course, if you want to amend, if I and all that, at some point you can combine all the files on so forth. But it gives you a file that you can constantly keep in use for projects. Ah, as you go forward. So that's the grid system. We need to do that first before we could get into actually building out the website here.
4. Build the Header Menu: Now what I want to do is build our our header and our menu. But there's still a little bit of set up that I need to do here, some trying to sort of work that in as we ah as we go here. So I'm gonna do some of that now, the first thing, and I'm gonna try and make this quick, so I'm gonna do a little bit of of dropping in here. But, ah, the first thing we want to do is we want our fonts. So we're gonna be using Ah, several different fonts and icons. I'm gonna drop the's in. You're probably familiar with this sort of stuff. If you're not essentially what this is is these are Google fonts. So if you go to get well, just Google fonts like this, I think it's fun. Start google dot com, but do Google fall fonts and click through on that, you can look up all these different fonts and so forth. And let's just sort of go ahead and add this one here and then, Ah, when you want to use one, then you'll see it will give you a link like this, OK? And you can Then take that over here and you can drop that in and let me just short of shrink this up a little bit for a second so you can drop that in here and you can see that's what I've done. I've gotten this Roboto font and I've gotten all the different weights that it has, and I've dropped that in as a link. I've gotten Yellowtail, which only has one weight. And then the other thing I brought in this font Awesome. So if you go to, if you look for font awesome, then you can see we have fun awesome here and actually how to use. And again, it gives you a link that you can drop in. So that's the third link that I dropped in here. So I just to save a little bit of time typing all that stuff out. That's essentially where you got those. I won't even type amount myself. I just grab him from those places and drop them in. So that's the ah, the first thing that we do. We've got some other stuff that we're gonna need toe add later, but we'll worry about that. At that point. And so then I'm just going to sort of clean this up and mark thes as thes. They're gonna be sort of our custom style sheets will just calm style sheets. Think that case. We've got our grid. Ah, and then we're going to create one for our menu, as I talked about so again will create our link here, and we'll create thes here in just a second. But since I'm here, I want Adam. So we're gonna put him in our CSS file will have one called menu like this, and then we'll have one that is it going to be sort of our our overall ah, site style sheet. So again, I'm doing this because I'm gonna the menu and the grid are gonna be sort of dragon dropped for different projects. This style sheet right here is going to be specific to just this project. And again, you probably for production. You would go ahead, men, if I these and so forth. Ah, and that would make it perform better and so forth. But all right, so let's go ahead and then move this back over. Since now, we sort of know what those are and Let's change our title to Joe Freelancer. Let's get rid of this style section. We don't need that anymore. And let's get rid of this section here. I was just to show you that stuff. Okay, so now that we're we've got sort of some of this stuff set up, we won't create those CSS files yet. We're actually gonna do our HTML first. And so we're gonna take create an element called Header and will give this a class of sight header like this. And we're using this in place of a section, you know, in other parts of site will use section, but because this is a header were using header. And then we're gonna use our grid here. So we're going to div Class equals container. Uh, and then Div class equals row, and then div class equals and we're going to do call four, and this is gonna be for a logo. So we wanna have that class that we can target it specifically flee if we want to. And then inside of this, we're gonna have each one class equals brand. You can sort of name these things what you want. I'm just, you know I've used bootstrap quite a bit, and this is sort of the way they do it. So it's just familiar to me. So we're going to a draft equals nothing for now. And we're going to say Joe Freelancer, So that's gonna create. Ah, that's gonna create a sort of our little our site title, so to speak. Okay, so that's the brand section. And then the other section that we need to do here is for our menu, so gonna, uh, div class equals call eight. So we did call for before. We always need to add up to 12. We're going to do call eight and then inside of that. This is where we're gonna start to put our menu. So the first thing we need is our our toddlers. We're gonna do div class equals menu toggle like this is give me are toggle button, and then we are going to inside that Do I class equals f a f minus. So this is from font Awesome and nothing inside of that. And then we just need we essentially need three of these, so I'll just go ahead and copy that, and okay, so that you'd see that gives us three lines here. We haven't styled any of this stuff yet, so it's gonna look really wonky. Um, so that's our menu toggle. But we also then need our menu. So we will do, Knave class equal last equals menu, and we're going to give this and I d. Because you could have multiple menus on the same site. So we have a class of menu which is going to do most of our styling. We're also going to give it an idea in case we want to target this one specifically. So part was called Primary Menu course. Call it whatever you want. Um, and then we'll do on a nor did list class equals menu naff. So this is the actual navigation, um, menu. And then inside of that, let me just drop the's in. No point these air. Pretty straightforward. No appointment. Watch me type a bunch of these out. So these are list items, and so we have list item. We give them each a class of men. You knave item we're using. I were using anchors because this is all gonna link within the same site. Um, about skills, portfolio clients and contact. Those were going to be the different sections. And so when we create a new section just to explain that right here, well, do something like this Will do section and we'll do class equal section. We'll talk about that. But then we'll do I d equals about like this. Well, that now creates for this anchor. When you click on this link, it'll linked to the section's When you give something an I D. You can then create an anchor Tony to that I d. So that's what we're we're doing here. I'll go. Haven't hadn't leave that section in there cause we're gonna use that at some point anyway . All right, so that's that's the HTML. Ah, that's pretty straightforward. The next thing that we need to do then is we need to get into the C. S s. And there's a few things in here that we need to do it. Like I said, I have still have a little bit of set up here. Let's go ahead and create a file and we will call this menu dot CSS and then we'll create another one and we will call that the freelancer zeros There one really answers of zero. There's a Rwanda CSS case of those are again the two files that we included up here, and I think you get everything spelled right. Okay, so those two files should be included now. And actually, the 1st 1 we're gonna go into is this freelancer. I'm gonna open them both. So we have. But then I'm gonna go into this freelancer one here because we need to do a few things with the body, just toe. Sort of get that out of the way. So we'll do body do our marking here. No, I'm not gonna get too picky about it for the video. All right, so we're going to HTML body, and we're gonna get sort of rid of the margin of the browser padding. That is. Usually they're so margin zero padding zero. Um, we're gonna do the background. I do this on this because you'll notice over in mine. It sort of has this grayish color, and I just don't like looking at it when you go to. Actually, when I go to actually put this on site, it won't do that. But for my sake, I just don't like looking at it so and then we're going to set the font generally for the body to this color. Okay, so that gives us gets rid of some of that stuff. Um, what's the air here? Now? I put a colon semi colon. All right, so next we're going to do Ah, font family. So we're gonna do body. We're going to do P the P tagger into input select text area. There's probably others here. This is all stuff. Um, anything that isn't You want to target to change the font for you don't have in terms of just basic tags and so forth, body should catch most stuff, but some stuff, like paragraph tags and inputs and so forth that it won't that it won't always catch. So these are the ones we use, and we're gonna use in this particular, um, in this particular site. So that's the ones I'm targeting. So we're going to font family, and we're gonna set that to Roboto and then a backup of Sand Saref like that. Okay, um, again, this is just sort of set up stuff that we need to do that need to get out of the waste. We're going to image Maxwell it 100% so that'll make sure images shrink down. That's just sort of a general image responsiveness thing that weaken Dio. Ah. Then we're gonna do body P H one H two H three h for H five h six, input, select and text area again. And we're gonna set the font wait to 300. Okay. And almost done Here. We're gonna do dot text and dot text area. We'll set the box sizing the border box and well, with 100% border, one pixel solid. And then C C c is the color do Paddington pixels. 15 pixels. Ah, let's do font size 16 pixels. What? Size one round. Okay. And and I do that, so ah, probably don't need to do this anymore. The double font size here. The whole idea behind that is that some browser doesn't support rams. It'll default back toe the pixel size. Here. Is this some habit that I've sort of got into that I probably need to break, but, uh, that's why I do that. So, height I turned 40 pixels. Okay, so those air, like I said, those were just some some things that we needed to get out of the way. And then we also need to then do our site header section. So this applies to our menu. So we created over here. Ah, header with site header Class. Now we need to style that a little bit. So let's do, uh, header. And you sort of remember, you may not have noticed this, but if we go back and it's Oh, look it, actually here it is right here. That could pull us down here if you remember the site headers actually fixed with. And it has that transparency to it. So that's some of what we're gonna do right here. Okay, So that's why we gotta mess with this a little bit before we can get into the menu itself. All right, So we're going to do we're gonna target that class, uh, site header. And we're going to do position fixed. That's what makes it so it's stays at the top even when you scroll. When do border bottom one pixel solid, and we're going to do e for like this, and then we're going to do with of 100% and we'll do background. This is going to give it its transparency. So we're going to background. But instead of a hex color, we're gonna do rgb a So it's red, green, blue And then the opacity hero Pacenti So 2 55 2 55 2 55 That gives it the color So it's gonna be white, and then we're going to give it an A pastie of 0.9. So that's gonna make it so that when you scroll down, it has that little bit of a passage e there. So let's just refresh this and see if make sure CSS files and so forth. So we are getting something here. Um, you know, we've got some changes here, so our CSS files seem to be kicking through here, So that's good. Now let's come over here and let's go dot Brand. I'm going to do line height and we're going to set that toe one and font size 28 pixels. Font size 1.75 Ram like that. Okay. And you could see the font size changing up there and so forth. So again, that's ah, good sign. And then we'll do brand a and we'll get rid of the text decoration said that to none. Uh, and then we'll set the color to 333 Okay, so you can see we're starting to get a little bit of something here. We've got sort of this brand section here that that has has been updated. Um, and that's that's really all that we need to do for right now. Ah, in in our freelancer file. Now we can get over into the menu file and start messing with that. So there's a decent amount to this. We need to do both the toggle, and then we do need to do the menu itself. So we'll start off with Ah, no, we will start off with the toggle. So let's go ahead and do now. Ah, do menu dash, toggle. And we're gonna position this absolute have positioned it absolute mainly because it's ah, it's a heck of a lot simpler. It's gonna put it up over on the top, right? Uh, and you'll see it here. Move in just a second, but is gonna put it over on the top, right? No matter where you scroll or whatever and with the fixed, um, with the fixed menu and all that stuff just a lot easier to position it this way because we're doing a mobile menu from the start instead of having a horizontal menu that switches into a mobile menu. So we'll do Z Index will set that to three cursor pointer, and then we're going to do with and we'll set that toe auto. Right, So that's gonna position. You see, it's over in the top right now, and then do menu toggle and then dot FAA This is gonna actually target the icon. So do display block, and you see, now they're on top of each other room, due line, height, zero, um, margin 008 pixels and you just have to sort of play around without a little bit to see what you like with that, and we'll do font size 28 pixels. Okay, so you can see now when you look at that, it's similar, or it's identical to what we have here. Okay, so we're getting starting to get somewhere a little bit with this. We're also gonna add in this transition. So for CSS transitions were going to do all 800 milliseconds and ease out. So this is gonna sort of set us up for being able to do the transitions that we want to dio . Okay, so we need to add that to the icon here. Ah, in order to do that. So I'm going to come back and do all of these transitions here. I'm not going to do that entire thing. Ah, at this point yet. So I want to get to the menu and get it done first before I get into that. So we're gonna skip down, and we're gonna go to menu and actually gonna add a little space here. We'll need to add those styles back up in here, but will do menu. We're gonna do position fixed. So that's Ah, we're gonna fix it on here. We're gonna do top zero, and we're gonna do, right? Zero. Okay, So that's gonna position our menu over here, because if you remember, our menu slides out from the side like this. Okay, so that's what Ah, that's what we're setting up here. All right, so I'm gonna do a width on this of 30%. You see that sort of stick out here and then by default, it's gonna be hidden. I'm not going to do that yet? Because I wanna I wanna look at it, but we are going to come back and we're going to do visibility and we'll do hidden. Um, I'm gonna just do visible for right now so that we can see it, but I want that as a placeholder. Okay, so we're gonna do background again, and we're going to do Ah, transparency on this. So we're gonna do rgb a and to 35 to 2 55 2 55 And then again, 0.9 like that. And then we want the, uh we want this to stretch the entire height. So we're going to height and we're gonna do 100 VH. Um, VH is sort of this new thing that you can use and it it makes doing stuff like this really easy. So if you want something to be, ah 100% vertical height Ah, that's what you dio So patting 50 pixels on this. So I wanted some nice padding on it. Indu box sizing. Ah, border box. And when do border left one pixel solid and want to do he force, and then we will come back and we'll do the transitions. I'm not gonna do the transitions. Ah, at this point yet. Okay, so we have that, uh, we need to add in. All added in here dot menu dot show. We haven't We haven't done that yet. So, um, again, I'm gonna come back and do that part of it. But for right now, I would just want to get the styling done so we can see it before we start hiding it on all that stuff. Otherwise, it gets a little bit difficult to work with. So now you want to do menu dash knave like this, and we're going to do margin zero padding, zero in the list style type none. Okay. And looks like I two semi colons of calling here. Right? So that gets us set up for the toe style. The menu a little bit. Yeah. Get rid of that. All right. How we gonna do dot menu, dash, nab a, and we can target the actual links inside of here. So we're going to display block, and we're going to do padding of seven pixels. 08 pixels. Zero. So that's just sort of what I figured out. You can sort of mess without a little bit. I want the text decoration to be none. Trying to scroll down here a little bit and let's do the font size. I'm doing 28 pixels here. I like I'm sort of nice and big like that. I just, like, sort of the way that looks. OK, so now you can see here. We have very, very similar to what we have with our Our box here sort of scrolls out like this. Um, we'll talk about the width here in just a second, but, you know, again, it's We've got a very similar looking style toe what we had here before. So this is going to be a pretty long lesson. Uh, we've got the menu built, We've got it styled, who sort of got the header bill and so forth. And we just need to come back in and we need to do some of the transitions and so forth, and that's going to require some javascript and such. So I don't want this to turn into ah, 40 or 50 minute lessons, So I'm gonna cut this one here, and then we'll come back in the next lesson and will do all of the hooking up in terms of the Java script and the rotating and all that sort of thing.
5. Animate the Header Menu: Okay, so let's continue with this menu. First thing I'm gonna do here, just get this out of way is come into this working folder I'm and create a new a new file, a new folder called Js for our Java script. I'll just drag this appear and then we'll rename this to I'm just calling this freelancer. Oh, Wanda gs like that. So same idea. Go ahead and open that up. So it's open, and then we need to go back to our index dot html and we need to include that in here now. Ah, with the JavaScript as much as you can. You want to try and put this stuff in your foot or we don't necessarily have a foot or yet , but we'll go ahead and we'll just sort of add this stuff down here. Eso will do scripts, and we're gonna be using Jake weary. So we need to include J query. Just like I said before. Ah, with the with the the fonts and the fall awesome and so forth, you can literally just Google J query Cdn and you will get ah link like this essentially and you just paste that in here that's gonna include Ah j query. So then you probably probably familiar. Probably done that at a time or two. So do script source equals. And now we're going to do our JavaScript file from our sites. We're going to freelancer. 01 dot Js like this. And that's going to include that Js file that we just created. So now we've got G query, which we're going to use. Then we've got, um are we have our, uh, javascript file that we're going to use here? Okay, So for our menu, what we're essentially going to do is in order to do this toggle ing, we're going to use Java script toe, add some ad and take away some classes. But then we're going to actually use CSS to, um, to handle the animation and the hiding and showing and so forth. So the JavaScript you want to use a sort of his light of touch as possible? Not necessarily Do everything in Ah, the javascript here. So that's what we're going to do here. So we're gonna do Jake weary, and we're going to do document taught, ready, and we're gonna do function, and then inside that will put our dollar signs so we can use that. And then this sort of wraps this in, Ah, this anonymous function so that it keeps everything out of the global space and keeps it from getting cluttered up and conflicting and so forth. So first thing we're gonna do is we're gonna toggle we gotta several things that we're gonna do here. We'll do this in stages, but we're gonna toggle the NAFTA menu on button Click. OK, now I'm gonna set a few variables. The 1st 1 is root Rex. I'm gonna use that later. But I'm gonna set it now because I know we need it. And the route is just gonna be HTML and body like that. So this is going to be something that will need a little bit later. But we'll set that for right now, and then we're gonna do menu toggle. This is gonna be the toddler that we're gonna target, and we'll set that to our menu Taco class. So essentially, what we've done is we've created a variable that that references are menu toggle class, which is our toddler here that that we created so that that is really just a performance thing. If you're gonna use these multiple times, you wanna you want to try and do that so that you're not constant going back into the dom, which hurts performance. Okay, so once we have that set up, then we can reference that variable menu toggle, and we're gonna use the on method so dot on, ah, menu toggle dot on and then we're gonna do click. So that's on Click. We're going to run this function, and this is an anonymous function that we're creating here and what we're gonna do. The first thing we're gonna do is we're gonna create a variable called this. So whatever was clicked will now be set to this that element, uh, again, this is a doing setting this variables or performance thing, right? So that's going to target whatever was clicked. So ah, that's what we want to mess with first. And so we're going to do this dot toggle class. So this is a J query method and weaken toggle classes. So when it's clicked, it'll add the class when it's clicked again in order to remove it. When it clicked again, Will added just toggles that back and forth based off of clicks. So we're gonna add and remove the class called Close Game will use this in our CSS here in just a minute. And then we are going to go into our Dom and we're going to find menu. Ah, menu knave. Ah, menu men, You have item you remember. These are all the classes that we use when we're building our class, okay? And we're going to toggle the class called Show like this. Okay, so this is this is the main thing that we're going to do for the toggle ing of this and the idea. Here, let me pull this over. Actually, let me come up here and just show you on this one. It's a little bit easier, but the idea here is if we inspect this and we look at our menu case, we have our menu toggle. It's open up our menu here. And men, you have to see our list items here when I click this. You see, now all of this gets the item that gets the class of show and so that allows us to target that with CSS. And then our menu toggle gets the class of clothes. Okay, so that's important. That's what That's what we're going to use in our CSS to be ableto toggle Onda target all of this stuff. Okay, so it's a little hard for me to do the inspector inside of Ah, the the I d the cloud. I d like this. That's why I ah, I'm using this other example here. But it's the ST This is exact same thing that we're doing over here. Okay, So what should happen is when we click this, it should change those classes as we expected. Let me see if I can. Actually, I'll probably i'll probably need to use view the frame source. Let me see if I can get this to come up so we can just double check it. It was not what I was after. Ah, eso best we can do is inspect it, and it's not really given us what we're after here. Okay, So you can see we got close up here. And if we come down here, menu has show. Ah, menu knave has show and all of the items have show here. Okay, so we're getting what we needed. The JavaScript is adding the class It's adding close to the toggle, and it's adding show tow the menu and all of its items. So that gives us what we need to do then for CSS so we can go back into menu for our CSS here and now we can start Ah, messing with some of that stuff and hiding and showing and so forth. So for the show, what we want Actually, now what we can do is we can go to menu, remember we had this Is visibility visible? We can change this to hidden like this. And so now the ah, the menu is hidden. Let me refresh is okay. We'll fix that here in just a second. It actually doesn't matter, because when we do the transition, it's ah, it's it'll be fine. So anyway, we can go to menu, then show and we can do visibility and we can do visible. So this is sort of the basic sort of toggle ing here, right? So it's it's hidden. And then when we click it and add that show class, it comes back in like this. So that's the basic idea here. Ah, is that this is I guess that shadow was from me targeting this menu like that. That's what that was. That's what is throwing me off anyway. Ah, this is sort of the basic hiding and showing of the menu. Okay, so that's that's the basic idea. And then essentially, what we do is we just add some transitions to it to make it work a little bit better. So up here under menu, then what we're gonna do is when you start off and we're going to, um, do transform like this and we're going to do translate three d and we're going to do ah, 100 percent and will do 00 So, essentially, what this does is it takes it off of the screen, right? This is a three d translate. So if you look a translate three d like this and we go here to the empty end No, it shows you that it's a It's a sort of a three D model here. And the nice thing about here is you can sort of play with these numbers so you can do, like, 20 and I'll show you what it does, right? So it for the 1st 1 it it's the the exits the side to side movement. Okay, so we're setting that to 100% so that's essentially taking it off of its off of the screen and then the other two for up and down and in and out, We're just setting zero. We're not messing with those. We don't care about those. Okay, so that's what the transform does is taking that menu off of the screen to begin with, and then we will create a transition here. So we're going to do transition, and we're going to do all 600 m s and he's out. Okay, so that takes it off of the screen. And then when we come down here to show, we're going to do transform and we're going to do translate three D and were 2000 Okay, so what that does is when the show class is not on its gonna use this transform, okay, and that's going to take it off of the page. But when we add the show class to it, it's now going to set instead of 100%. It's gonna set that 20 which being brings it right back onto the page. So that's how we get that slide in and slide out effect from this and again, we're just using treat CSS transitions. You can see the transition. We specify right here. 600 milliseconds ease out. Okay, so that's how we get that specific. Ah, transition there. We also have the menu. Toggle case will come up here. We'll do the menu toggle stuff under here. So we're gonna do talk menu toggle, and we do f ah dot f Sorry, doc clothes and then dot f a. So this is when that close classes applied to this. So we're going to transform, and we're gonna do rotate and 180 degrees. Okay, so and then Ah, we're gonna This is going to cause a rotation. Okay, so receive. It sticks here. You can see how they all turn like that. Okay, so that's the start. We want them to all term, but we want them to all then land into a specific position. Because if you remember, what we end up with is this X Okay, so they all turn, but we end up with this X. So we've got the turning part. We've got the rotating part now. We need to, um Now we need to get the build, the X essentially. So we're going to do menu toggle. We're going to close now. We're gonna target FAA, but now we're going to do anyth child, and we're going to do one. So we're gonna be targeting that very top on the very first child. And so we are going to do transform, and we're gonna do rotate, and we're going to do 45 degrees and we're going to translate, and we're going to do five pixels. Five pixels. Okay, so what this is going to do, and now is instead of this one rotating 180 degrees is gonna road take 45 degrees and then it's gonna translate is gonna sort of it's gonna change the its direction instead, just flipping all the way over. You can see it now. It lands at a certain angle like this. Okay. And again, you can go the MGM and look at translate again and sort of get an idea of how this works. You really just have to sort of play with this playing with this to get this exactly where you want it. Okay, so that's the 1st 1 It's sort of the same idea for the other two. So just copy and paste this here and so for end child to this is the middle one. Remember, we go to a next. This one actually goes away. The the 2nd 1 the middle one. So, actually, what we're going to do with this one is we're going to set the opacity to zero that's gonna make it disappear. So if we look up here, click off that. You see, now that middle one is gone and I have these two sort of side by side like this, and then for the last one, we just need to change its direction. So it's sort crosses up the other one and looks like an S X. So we're gonna do negative 45 degrees. So we now start have the beginning of an axe, and then you just sort of got ah ah, You gotta move it in there till it looks about rights. We're going to seven pixels and negative six pixels. Okay. And that's just from a lot of trial and air, figuring that how ah, you just sort of got a mess with it. until it lands where you want it to. Okay, so now we have an axe, we click the X, and it rotates back to our ta go. We click it again. Now we have our sort of toggle effect here that we were after. It's all done with CSS transitions. So this isn't a CSS transitions class, So I'm sort of going through this quick. If you want to learn more about that, I recommend getting into looking for a CSS transitions class or tutorials or something that can really dig into that. But that shows you how we did this one here. The last thing that then then we're gonna do is we're just gonna do some responsiveness. Because if we shrink this, it's that set up 30% right now. And you see, it starts to go all wonky here. We actually want mawr of We want to see more of it when we have this much space. So we're just gonna do some media query so at media and we'll do Max with of 1200 pixels, and here we're gonna set the menu to a width of 40 percent. Okay, so that makes it just a little bit whiter. And then we come down here, actually, so that that's the basic idea. Let me just show you the different ones here. I don't think there's any sense and watch me type all this out. So so then we target 9 92 and we said it to 50%. That's what we're at right here. So you can see it takes up half of the screen and then, ah, at 7 68 it's gonna go full with. So if we get super, I don't know if we can. Super wide, you see it moves back in. You see it because we added that transition, remember, appear on menu. We have this transition right here that we added. That's why it slides like that instead of just snapping. Okay, that's what creates that effect so that if we scroll down at one point, it slides out to 50% and then eventually it goes to 100% like that. Okay, so that is Ah, that's how that's done. That's how the menu sort of the fly out the rotation of the this stuff and everything. That's the whole sort of many thing, except for a few things when we start adding sections and you actually start clicking these , um we're gonna do some smooth scrolling. We need to do some handling of this particular menu. Ah, you have a choice of whether you can automatically hide and so forth. So there's a little bit more sort of to do in here. But a lot of that's just gonna be I think all of that actually is just gonna be in the Java script. So we'll cross that bridge when we get to it. We have a bunch, other sections we gotta create here. So that's the menu. That's the transitions, etcetera, Um, and how we did all that.
6. Build the About Section: right Now that we've got the menu, we've got our grid system built. We can sort of get into starting to build out some of the sections on the site here. So we had started to build this about section here. We at least built the section here, so let's go ahead and Ah, finish this off. So I've got our section here. We'll talk about why we do that in a second. So we'll do div class equals and we'll do our container. And then inside of that, of course, will do a row. And then we're going to do ah div class equals were going to do two columns call six and like you just do two of those. So do active class equals call six. All right. And that's what we're working on here just to drag this down here. Is this right here? So it's gonna have ah, the picture on the left and then this text on the right and linked to get a quote here. Now one of the reasons why we do this section and then we put the container inside of the section. If you remember from our grid CSS our container changes that size based off the width of the screen. So when we want to do sort of these full with backgrounds like you see, like, say this right here how this stretches the full width of the browser here, no matter how big we go here. But we wanna have this stuff inside of it be a little bit sort of centered and not full with like that. The section we actually give the background color too. And then we put our container inside of that to create where it's sort of centered here. Okay, so that's why we have the section like that. Um is being able to do that. So we wrap everything inside of a section and then no weaken style the background of the section to go full with. Okay, So the what we're gonna do here is we actually need to come over here into our working folder, and we need to create a new folder, and we need to call that images. So we're gonna do images, and I'll actually just come up here. Ah, from this one here and grab that image. So, um, let's see Joe right here and Kim or if we do Zhou or Zhou Developers Joe Developer. So we'll just copy this and will come down here and we'll piece that here. We'll talk about the portfolio on the testimonials and all that stuff a little bit later. Okay, so that gives us our picture now. Ah, that picture believe it's actually square. Let's see being an openness and look at it. And so it's actually a square picture. But if you remember in our site here we have a circular picture. So we're actually gonna do that via CSS. So of course you don't need to do that. If you don't want Teoh, I sort of recommend that instead of making the picture circular ah, in the actual like photo shop or whatever doing it in CSS. So if you want to change later, it's something that's easy to change. So here we're gonna drop in that image. We're going to our image, and we're gonna do class equals. I am G surrounded. Talk about that. In a second, I d equals avatar, and then we're gonna do source equals and we're gonna do images and then Joe Dash, developer ah dot and J Peg. And let's go ahead and scoot all this over Just a second and we'll do. Ault equals Joe. Ah, I guess freelancers really what it is, you know, mixing and matching those. Okay, so that gives us our image there. If we pull this back over, we can see. Now we have that image. It's ah, sort of center there and so forth. Okay, lets go close. This so that gives us that. And then in here, we're going to create Ah, we're going to do the actual text. So this is one of the things with with HTML, especially Samantha semantic markup we're actually gonna do when you create a section, You know, the mdn says you should really always have a header inside of every section that has the title for that section. So that's what we're actually going to do here. We're going to create a header tag and we're going to give that a class of section header, okay? And that will allow us to target those section headers. And then inside of that, we have our h one, and actually, we're gonna give that a class of section title, and then we are adding some Ah, we're adding some other classes here. We're going to cite title because it's a section title. But it's also the site title and we're going to text left. A lot of these classes don't exist yet, so we're going to do these. But then we're going to do the high. I am Joe part here, okay? And then let's pull this back over, and then we're going to do the actual paragraph text, so I'm gonna just drop this in. It's a little bit easier. There's a few rows here, Um, not necessarily worth typing all this out. But let me drop this in. And the big thing here is that we are putting them in a paragraph tag that has a class of lead. So, you know, it says I have been a freelance world performer 14 years. You gotta gotta gotta have some places where I do emphasis here. Um, but it's really just paragraph tags with the class of lead, okay. And then the last thing that we put in here is we're going to put in our get quote button, so we're going to do a class equals and were to be tiene and then we're gonna do be tiene primary and then we will do a draft equals and we're gonna link to contact which we haven't created yet. But we will man will do get quote like that. Okay, so that's that's the HTML. You'll notice that we have against several different Ah, several different CSS classes that we haven't actually created yet. So we're gonna have to go through and create some of those and then ah, deal with some of the specific styling of this about section Ah as well. So one of the things that I do if we go to our CSS file here, did you notice I started off with body and then sort of down here I have the header section , but actually after the body because I sort of think of the body is a kind of a reset. Then I do what I call global styles and global styles are not something that is relegated to a particular section there things that can be used in any section and so, like our image rounded our text laugh. Those sorts of things are what I would consider global styles. And so ah, these are the things that we're gonna work with here. So the 1st 1 is a section. So we created the section. Now we want to give the section Ah, little bit of styling. Here, let me pull, try and pull this over just toe. So there we get that a little bit. Okay, so we're gonna do this section, and then we wanna have padding and we're going to do 60 pixels. 20 pixels like this. I just sort of you can play around that. That's just sort of the way I liked it looked. And this is gonna add this to every section. Okay, so not just this one, because we're gonna give every section a class of section solid and do F one F one f orm. Okay, so there's that and then we're going to do Ah, the section title. So section title and we're gonna do font size. And we're gonna do 48 pixels, do line height of one and text the line center and then margin. Now the text line center. We're gonna actually override in this section, and it feels like something's off here. Maybe I missed something here with this because the h one tag me refresh this. Okay, so there's our h one tack. We're actually gonna change that back, because you'll you'll see up here. That's not actually centered up here, but for most of our sections are section titles gonna go right across the top here, and we're gonna want it centered. So again, this is the global styling that we're doing here Will come back in and override that Ah, when we get to the actual section here. Okay, so now we have our leads were going to dot lead and we're gonna do a line height of 1.25 And we're gonna do font size on, and we'll do 1.3 ram, and we will do text the line center, and again, we're gonna override that in this particular section. But for all of our other sections, we're gonna keep it. Send that margin bottom 35 pixels. Okay, so that gives us the section the title section title, the lead tag that we've added. Then we have ah, these three sort of modifiers right here and all. Just I'm just going to drop the's in cause they're pretty simple to understand. So tech Center is gonna tech set the text line to senator. Text left. Isn't center left texturizing, senator. Right. So that's ah, pretty straightforward thing. Another one that we had was image around it. And we've got some more that I'm leaving out here because we're not actually using them yet . As we use them, we'll add them in, but image rounded. And the way we get that is, we're gonna set the border radius to 100% so that gives us our rounded image. And then we had our buttons. So we're gonna have first off our button class like this, and we will, uh this is where we're gonna do sort of the shape and default color and so forth. So we're gonna do box sizing. We're going to border box and then said the text decoration to non display in line. We want it to be a block oops, block. And then well, for default will do a background of C c, C like that, and we'll do a color of black like that. So that's sort of going to be the default button colors. And then we'll do a patting of 15 pixels and 20 pixels so you can see the button sort of changing over there. Do border none. And we'll do a font wait of bold. Okay, so that's again. That's the default. Look for the buttons. And then, um, we're gonna do button primary. Okay, so that's going to give us our color. Remember, we added that to this button, so going to button primary, and we're gonna do a background color, and this is just one that I sort of picked out. You can kind of pick out whatever you want, but it's sort of that purplish color. So 890 b d d happens to be the color. And then we set the color of the font to white. Okay, so that gets us looking sort of close to what we're dealing with here. You can see here. There's still some things that are a little bit off here. Ah, that we need to mess with. And so a lot of that stuff's gonna then come down to the actual, uh, the about section here. So after we have, we have sort of our body kind of reset ish type thing. We have our global styles. Then we get into our section specific stuff. So we have header. Now we're in the about section so we're going to do about I'm just gonna leave that there. I'm not gonna worry about that too much. We can clean all that stuff up. Ah, later. So for the about section, then we're remember we said an I d for the about section were targeting it specifically. So we're gonna use that I d. We're doing padding top of 120 pixels mainly to get us down away from that menu. Because that menu is a fixed. It's fixed menu. It's positioned fixed. Okay. For site title, remember, The section title for this section is also the site title. So we're gonna do some sight title, and we're doing font size for RAM. So we had styled the normal section sizes. But this one's different, its unique. That's why we're overriding it. We're going to do color, do that purple color again. 890 b d. D. Like that. And then we're going to do ah fought family and we're gonna do Yellowtail. Remember, we added Yellowtail from before. This is why we added Yellowtail. And then we'll do a backup of cursive San serif. Whatever right. So that's what gives us our text. That looks like this is just changing it to that. Ah, that Yellowtail fond right now we're gonna specifically style the lead paragraphs in our about section. So do about I d lead class, where instead, the font size the 1.35 ram When I set the line height, we're going to set that to 1.3 and then we're gonna style the avatar itself. Remember, we gave this Ah! Ah. Uh, this picture here idea of Avatar. So we're gonna style that specifically and we're gonna give that a width of 400 pixels like this. That sort of brings it back into line with what we want. Height, Auto. Although that shouldn't really matter. We're going to display block so that we can center and then we're going to margin zero auto , that sort of centers at a little bit. And then we can do position relative, and we can do top and we can do 50 percent. That's gonna that's going to start to center it vertically, and then we do transform. Remember Fran transform from before. This is a little sort of trick for getting vertical centering, but translate why? And we're gonna do negative 50% and that gets us centered in the middle. So if you do those together position relative top 50% transformed translate. White negative. 50%. That gives you again a little trick for getting these, uh, centered here, so Ah. Looks like one last thing I need to do here. Ah, is go back into Ah, here. All these that have Let's see. That's right here. I think, Ah, I think I can just should be able to Instead of adding text left all these, it should just be able to go to here and do text left now. I thought it's not working here. Let me. Ah, we just refresh my memory Exactly what I did here. Okay, well, we'll keep it simple here, and we'll just go back into the CSS here about dot lead, and we'll just do text a line left like that. Okay, so that gives us our left align text. Ah, here. And so we'll come and sort of expand this out a little bit and click off of here. You can sort of see, but that gives us if we come back. Bring this down. We got looks pretty pretty much identical to what we had their OK, so that's how we do the about section and again the button here, just sort of when you click this little click down to the contact tax section. Um, there's one other One of the things that I do as well here is I've started doing this. I've seen some others do this to me. I like it for media queries. What I used to do is just put all the media craze at the bottom. The problem is, is that you know, the media queries referenced different sections. If you put them all at the bottom, then you sort of got a bounce back and forth. And so I found it a little bit easier to organize it. Just doing my media queries for a particular section. Ah, right here in the section itself. So I know that this media query, these four, this particular section so we're gonna do about and then we're into dot Ah, site title and we're gonna do text the line center like this. Okay, And that's just going to when this finally kicks over like that is gonna make it. So this Texas center, instead of being left, aligned, okay? And now we can do if you want, we can do the same for the button and and so forth. Ah, at some of the queer, some of this stuff, We're going to get into some media queries and other places. Um, and actually, yeah, that. So if we come back up to our global styles and we go to our button, we actually have one here, too. So media and my ex wit, 760 pixels and we're going to do dot button like this, and we're going to do with 100% like that and margin zero auto and text align center. Okay, so that makes our button like this. If you wanted to center the this text here, you could certainly add that query as well. You know, that's not something that ah, you know, at this point that that I wanted I prefer left a line like that. Um, and so ah, you can do that. So, anyway, I like putting these media queries right in here, So I know that this media query goes with this. The something in this section of the classes in this section. You know, this media query comes with the goes with the classes or I ds in this particular section, and I'm not having to find them in the bottom stuff. So, um, that's again, that's something that I like to do there. But this is the about section Ah, got that styled up. We'll continue here. I see. There's maybe a little something with the padding here, and when we scroll up here like this, so we'll go ahead and ah, fix some of that stuff. But I'm gonna go ahead and end this video here, and we'll move through some of that stuff as we go forward here.
7. Build the Skills Section: Okay. This lesson. We're going to get into this my skills section here. You'll actually be able to see an example of styling the background here and so, force. We're gonna do that. Talk about a features list before I do that. Though, I left off the last lesson talking about cleaning up this space down here and then this picture coming over top of here. So the first thing is, Ah, I just missed a part of the CSS declaration here on set header. One of the things that we want to do is set the Z Index here 23 and that will actually make it so that when we scroll down the everything else goes underneath of it. So we got that. Ah, the space here. Interesting enough. I hadn't noticed this when I when I had built this before, but that is actually there in the responsive you. Ah, and what I built so far so actually needed to add some stuff that wasn't in the original. So what we'll do is we'll go to grid that CSS and we have this No gutter. Now we're gonna add this application called no gap because no gutter is the gaps between columns and you can see we're setting grid column gap and we again we want that for our We want that for our portfolio section, but there's also the the part below when you have a Siri's when you have a row in particular. In this case, there's also spacing that can get added below that. And so we may want we wouldn't wanna have that may. We may want to get rid of that. So I just decided to create a new CSS declaration called No Gap and Set the Grid gap 20 And so, then, in order to fix that, what we do is we come over. Once we have that CSS declaration, then we come over to our site header here and we come to our row because if you remember in grid, we set the grid gap to 20 pixels on the row here. So, um and we could probably do this as grid column gap instead of grid gap. Um, and that might have been actually tried this. Let me just see here. Yeah, see, So that would that would fix it as well. You can see that's gone because now we're not adding the gap below, so that's one way you could fix this. Um, but I could also see you saying, Well, I want that. They're I just don't want it there for this particular one, right? I want some gap when I'm doing Rose. I just don't want it for that particular one. So again, we've added this. No gap. Ah, no Gap class here. So we just come over here. We come to our row for our header here, and we add this no gap class case was two different ways that you can do that. It really sort is up to you. What? Your preferences. But that gets word of that gap and there that that extra and we scroll this out. Then we see it still is just the same. Do our menu here. Everything still sort of works the same. Select that cleans that that stuff up next. Then we're gonna come down and we're going to go to our next section, which is going to be our my skills section. So will come down here, will creating new section and will give the class equals section like that and let me scroll down here just a little bit. So classical section. And then we're gonna give this an I D. Of skills. Remember, these all need to have I did i ds Because we're linking to them in our menu. Okay, so it's not just for CSS targeting. It's also for linking purposes and then sort of what you used to div class equals container , and we're gonna do a div of Roe like this foe Rhone up So and then we're gonna have ah div class with a column of 12 12 calm. So we're gonna do class equals and this is gonna be sort of our header, remember? Ah, call 12. Ah, from the mdn. It says that every section really should have a header with an h one tag so that machines know that for this section this is the header. You can put it anywhere in there, but when it will look for that header tag and so we're going to class equals section header . And now we're starting to rely on some of those global styles we created before Section header to H one class equals section title, I hear And then we'll do my skills. Okay, So now we're getting some of that styling. We're getting the padding around the section. We're getting the font sizes in the font weights and all the stuff that we did, um, to give us this sort of automatic styling here. All right, Next we're going to do P class equals and we're gonna do lead. And then I'm just gonna dio I've got the skills to get your job done. Right? Here's were I specialized in something like that. Of course you can put whatever you want here, but that's what I'm putting here, and that's our header. So we have we have our header we have a title for and we have a description for it. That's sort of the standard thing that you want to try and do with every section that you create. When you create a section like this, make sure you have a head or ah, and a description. Now we're going to actually do the features list again. Remember, it looks sort of like this, so we're going to just do something simple like that and we're going to create a features list, and we're not gonna do ah, in order list. Were actually just gonna do, um we are going to do Ah, dibs for this. OK, so we're going to do Ah, actually, we need toe get outside of this road cause we're gonna do a new row actually gonna do a whole new row inside of here, so Div Class equals row and we're gonna give it an extra class called features list. All right, so and then we're going to do We're gonna do three of these. It's going to DIV. Class equals call force. We're going to do four column wits. We're going to do feature item, so there's gonna be for each item, and then we're going to do text center like that, Okay? And inside of that, we're gonna have an icons were using font. Awesome. So I class equals f A and F A This one we're gonna do I and then we're gonna call this feature Icahn so we can target it if we want. Right. So that's the the icon. And then inside of that, we're gonna have an h three tag we're gonna give that class equals feature title. And I like Teoh. I like to do it like this Where I give each sort of thing Ah, class so that I can I can target it very, very easily. And when we get into the C s, I don't think we target every single thing, but we target a good amount, and at some point, you may want to. So we're gonna a paragraph of, um, featured description like this, and let me just sort of copy this over. It's just a little bit easier to just copy the text. It's just the text for this particular one. Okay, so what we've got here, then, is we've got this got this item, and it's in a in a column row all that. We've got a Nikon, we've got a title, and we've got a description for each. Ah, one of my skills here. Okay, So what I'm gonna do is just sort of said retyping the last three. I'm just gonna paste the last two or whatever over here. So we got two more. Just like it. Different icon, Sort of different name. Um, no one, actually. Here, let me correct that. A I sort of double copied here. Slow me. So we've got again an icon, a title and a description for each one of these. You can, of course, change those to what you want. Okay, so that's That's the HTML for the section again. Fairly straightforward. But now I want to get into actually styling, uh, all of this. So what we're gonna do is we're gonna head back over. Let me go ahead and save this on and see this Looks like teach to mountain Save, and we're gonna go back into our freelancer. 01 CSS file. Here and again, we are. There's a couple things here. So a feature list like this is something that we could use in multiple places, Which is why I wrote it the way that the each smell the way I did. So I'm going to actually put most of the styling for it. Some of the basic styling under global styles. And then we will I think we have a little bit for the skill section. Actually, not much for the skill section. So most of this is going to come from the features list because once you have the CSS written, you can drop in a list like this sort of anywhere using that sage, same HTML and that makes everything Ah, heck of a lot easier makes it more reusable and so forth. So definitely what I recommend doing with this. We're gonna come in here under button primary and we're going to do feature. I don't remember this was sort of each item's container, and so we're going to do padding and we're do 20 pixels to give it a little bit of padding . And then we're gonna do feature Icahn. So we're gonna target the icon. And let's give this a font size of 24 24 pixels or 1.5 rim Ramsar based off of the whatever . Ah, font size has been selected sort of by the device. So if they're on a phone or a computer, what a particular browser. Generally it's 16 pixels, so 1.5 ram would be the same as 24 pixels would be 16 plus 8 to 24 pixels. So that's what the rims are for. Generally, you should you should really use the realms. I just have this habit of doing the fall backs like I'm I'm doing here. Okay, so then we're gonna do a background on these icons. We're gonna use that purple colors we're gonna do 890 b d d. That gives them a little bit of a background. We're gonna make the icons themselves white like this. And then let's do padding of 15 pixels. You can sort of play around with some of this, and then we'll do our border radius of 100% and that's gonna make up nice and round for us . Okay, so that gives us the nice round icons there. After this is feature and we're gonna do title. So style the title titles here. We're gonna do font size and we do 28 pixels. Um, on and we're into padding bottom of 10 pixels and then border bottom one pixel solid every 40 44. OK, so I gives us a little bit of styling like this gives us our border and so forth. So that's the title section. Now the description section you see, because we're doing this Ah, because we gave them all these descriptive classes that makes it really easy to target. These so feature description will do font size 20 pixels and font size on 0.25 room. Don't get caught up in the fact that I didn't do it up here. I didn't do it when I first wrote it. Probably just forgot. And then the math for 20 eights a little bit. What is at 1.75? Is that right, font size 1.75 around. I just didn't want to do math on the fly here, but I think I think that's right. All right. And then for the description will do line high. Just don't get too caught up in that stuff. That's just me being inconsistent. All right, So that gives us, then are my skills section Ah, our feature list that we can use and we're using in this my skills section here. Now, the last thing that we're gonna do here is we're gonna come down and we're going to create a new section here called Skills. So we don't have a ton of styling to do here, but we have a little bit. So we're gonna do skills and then create our section sort of title here. And all we need to do is actually style this section itself. And this is what I'm talking about. We're gonna do background, and we're gonna do number F A f A f a and that gives it a little bit of that grayish background. So let me pull this back out here a little bit so you can see this is this is white up here . Now, we've got a little bit of that grayish background stretches the whole sort of sort of width of the browser, just like what we had here from our original. So that's the my skill section. It's also building a feature list. We put it in the global style section so that we can reuse it if we want to create another features list like this. We have some basic styling. Um and then if you want to override it, you would come down into the section specific four wherever you're adding that feature list , and you would would overwrite it. So that's generally how I tried to organize my CSS eyes, have global styles, and then how you have your individual sections and so forth and you start with the most global style. So we start off at the very, very top with, you know, targeting the body and all paragraph and import tax like very, very broad. Then we get into global titles, which is styling classes that we're going to use Ah, throughout multiple sections and multiple pages and so forth. And then we end up down at different sort of components, really like a features list and so forth. And then you get into your individual sections and then if you wanted to, if you have multiple pages, you below that, you would get into ah ah, styling for specific pages on the site, which you can do so. It starts from the most general moves all the way down to the most specific. And that's generally how you should do your CSS with the way cascading style sheets work and the cascade down. Ah, that's what you want to do.
8. Build the Portfolio Section: this lesson. We're gonna be building this my portfolio section here we're gonna be using Ah J query script called Fancy Box to do that. If you look at it here, it sort of pops ease up. And then it has a thing. We could kind of click through all the different projects here. So that's what we're going to be building that section in this in this lesson, before we get into that, I've been noticing this image sort of keeps overlapping. You may have seen this is well, as we're going through, and I just kind of going through the course and I was gonna in the back of my mind. Like what? Because I knew I had set this image here and the Mac Max with fixed here. But you'll notice I have a typo here. So if you've been noticing that if we change that to Max within, this does what it's supposed to do so ah, often times, that's the way it goes. When, when you're coding. So I just wanted quick fix that real quick. Ah, and then we can move on here. So in order to build this portfolio section, the first thing that there's a few things that we need to do to set this up. So first off, I'm gonna come over here toe the folder structure here and into our working folder and under our images here, I'm gonna create a new folder and I'm gonna call this portfolio. So we're gonna put all of our portfolio pictures in here and then let me drag this over real quick. Ah, this is this is the images that we're going to use. And I mean, these air just edited in in photo shop. Essentially, you'll see here we have a 1920 by 10 80 then we have a smaller version, which is 300 by 169. And that's just sort of what I figured out again by just kind of messing with this a little bit and getting the dimensions that I I thought looked right and that I wanted you can sort of play around with that. Maybe you want three across, or maybe you want to across or six across whatever you want, but you can sort of play with that. But you you want to images. You want the smaller image here and you want the larger image here toe display this like this so that when people click on that small image, it pops up. All right, So what I'm gonna do and these are I mean, I just got these from, Ah, I think I just got these from, like, pixels or one of the free sort of royalty free sites that's out there for images. Of course, for you, if this is your portfolio, you're gonna be using pictures of your you're portfolio items or if it's for a client or whatever, then you're gonna be using their pictures that they'll probably need to provide you. But getting these air just sort of placeholders for this demo so I'm gonna do is I'm just gonna take all of these and we're gonna upload those into that portfolio folder that I just created. So we were all of those in there, so that's the first thing that we need to do. The next thing that we need to do is we need to get ah, fancy box installed and so are sort of loaded up here. And so if you're not familiar with fancy box will just come over and we can just google fancy box and you'll see it right at the top. Here. This one actually is sort of the old site You want to use the one that's fancy aps dot com right here. And this is gonna then or actually, I guess you have to click through here. Yeah. So fancy box three. So just get to the latest version. They do a pretty good job of linking to it. Um, and then you can see that here, you can see the quick start here. And this quick start is essentially what we're gonna do, because they have these hosted over on Ah, they have a host on Cloudflare and and different stuff. So we're just going to use that cdn for this and you can see that there's a style sheet here, and then you can see that there's also ah, script, and you'll need Jake worry along with that. So I'm gonna go ahead and just grab the link here, and this is what we're gonna need for the style sheet and will come back over to our I'm going close this up and come back over to her index dot html and we will come to the top and let me just move this over for a second here. And I sort of tried to keep everything together. Now. Ah, I like to sort of separate these out from everything else. So I'm gonna do ah, comment here. I'm gonna just do component CSS because that's what this is essentially is a component. We're gonna pace that in. And so if we had any other components, we could pace them in there. Ah, as well. But for right now, we just have fancy box. Okay, so that's gonna get us the CSS. And then now we need the Java script as well to go with this. So we're actually gonna come down and put that in the photo down here? See, we already have Jake, we're here, so we don't have to worry about that. And we're just gonna grab the script for fancy box here, the script decoration, and we will grab that and then we'll come back and we'll go out down to our foot and just make sure and paste it after the G A query here. So that that way, Jaques loaded and then fancy boxes loaded. And then our freelancer dot Js is loaded. Um, because in case we need to do case, you want to do any sort of, you know, there's a lot of customization is that you can do with this. There's a lot of different ways that you can set this up and so forth. And a lot of times to do that, you'll need to do that in a Java scripture and other JavaScript so you can do that in your freelancer. Ah Js file here. So this is generally the best place to put those. All right, so that gets us our CSS and our javascript that we need in order for fancy box toe work. Now we need to sort of just build this inside of our index dot html. So we're gonna come down and, you know, we have our last section that we did our skill section here, and that ends right here. So now we're gonna create our new section here, and this is going to be for are our portfolio items. So we're going to do section and class equals section and I d equals well, portfolio and then create our section. And then, of course, as we've sort of done here. Class equals container, active class equals row. And then we're going to do our header here. So we're going to do div class equals and we're going to call 12. And they were going to header class equals section header. And then in that, we're gonna do our H one in our section title and here we'll just put my portfolio. Obviously, you couldn't make that whatever you want and then below that will do our description. So P class equals and will do lead text center, and then we'll do. Here's all the cool stuff I've built for my awesome clients or whatever you want to put there. So you feel free to put whatever you wanna wanna put there. But that sort of gives us our section header and you can see we have our mark my portfolio section down here. All right, so that was our, ah, our 12 column with Call them there. Now we want to get into actually building the portfolio sections and there's a cup. Just a couple things that we need to add In order for this to work with fancy box, It's a javascript r j crace script and there's also the CSS. So it's going to take care of most of everything, Force. We just need to write our HTML correctly. So we're gonna do is we're gonna do div class equals and we're gonna do row and then we're going to do no gutter and we're going to do portfolio. Okay, so all our portfolios, they're gonna items are gonna go inside of this inside of these different rows and then we're going to do div class equals and we're going to do call three now. You could change that, depending on how. Why do you want years to be? You know, you could do four calm with Like I'm doing three column Let's etcetera. We're going to portfolio item and then in here. This is where we get into the specific fancy box stuff. So we're going to do a link or going to a and we're going to data dash fancy box and we're gonna set that equal to gallery. That's what's going to allow us to when we pop up one of the portfolio items the the Ford and back heirs to click through him. This is what enables that that tells fancy box. That's what we want. There were do data source were set that equal to pound 001 So this is basically specifying an I d. This is the i d. Where this is the when we click this, um this is where we want to get the content from the i d that we want to get the contact from. I'll show you that content from I'm sure that in a second, a traffic als blank because we're not actually linking to anything here, Right? And then inside this, we're gonna do our image. So we're gonna do image source equals, and we're gonna are small image. So we're gonna do images going to slash portfolio because we put him in that portfolio folder and then we want the small version. So 001 small dot j peg and I'm gonna do all equals. Zero. Is there one? Obviously, your profile, the items are gonna reference. They're gonna reference different projects or client names or whatever. So your old tag would probably be something related to that. Okay, so that gives us our image. Here, let me go ahead and save this and might not be loading the image just because we have to reload this and they see here. And actually it is. The image is actually loaded. Just really small will mess that in a second. I just want to get all the age smell written out here. Okay, so now that we have that this a tag done, then we're gonna create the thing that actually pops up when this is clicked. So we're going to do div class equals and or actually we're gonna do div style equals display. Nuns were just setting that to display none. And they were going to class equals port folio pop. So this is the pop up, and then we're going to say I d equal to 001 So that's that's the reference here. Okay, so when we say data source here and we put in an I d. This is the i d that we set here. So whatever you set this to, you also have to make sure ah, and set the data source here too, as well. Okay, So that's how you match match these up when I click this. This is what pops up. Okay, That's important to know. Now with fancy box here. Okay, so now inside that we're gonna do another row, Uh, and then inside that we're going to do we're gonna do an 88 column wit. So I'm going to call eight and then, ah, we're gonna let me go ahead and do this other one here. So we're gonna do div class equals call for now. Again, you can build. This is all this is gonna be popped up when this is click. So again for fancy box. You just need this right here. When this is click this pops up. You can build whatever you want inside of here. This is just happens to be what I built. You can sort of lay this out however you want. Okay, So just keep that in mind as you're building this. All right? So the thing that I'm gonna put over here on this eight calm What side is the image? So I'm gonna do image source, and we do equals and we're gonna images slash portfolio, and then we're going to do 001 dot j pick. So that's the full 1920 by 10. 80 with here. And I'll just do all equals. There's there one again. OK, so that's the full image. That's what's gonna be there when we pop. Pop this up. Click this Here. You see, we get that that on that side over there. Okay, so that's that side of it. Pretty straightforward. And then the other side, we're just gonna put our title and description. So we're going to do H three and we're going to class equals project title. And then we're gonna do project. I'm just putting in place over. So project name. Obviously. You'd put the name of whatever this project was then I'm doing div class equals lead and project description. Okay. And then in here were just you would put your product description. I'm gonna put some dummy text. I'm not gonna write it all out here, because that's sort of pointless. So I'm just gonna drop in some Lauren Ipsum here that we can use to give us an idea what this is gonna look like on me. Clean this up. All right, So now when we click our portfolio item, now we have something that looks like this. Now, this isn't necessarily the best looking thing here. Whatever. But you know if we sort of pulled us out here. This gives you a little bit better idea of what it's supposed to look like. Okay, so, no, that's a start. And then you can kind of style this up. However you want, you can change it based off of, you know, the different screen sizes and so forth. Again. Our grid already has some of that built into it. You can sort of mess with that as as you see fit. All right, so that gives us sort of of the basis here. Ah. Now what we want to do is I'm just gonna go ahead and that this is the basic sort of template for creating a portfolio item. Okay, so you need to do this for every single one of these. So this part essentially, this right here, all this, you just copy and paste all this, and then you would go in and change. Okay. I'm gonna use this image I'm gonna change this toe to I'm gonna change this. I'm gonna change all the images, the project description, and so forth. But the actual layout of the HTML is the same, so I'm gonna go ahead and grab the rest of these portfolio items that I have ah, pre done over here so that we can get past this pretty quick instead of typing all this stuff out on and there's a lot of them here, takes a second. All right, so we'll just drop the's in here and so you can see that gives us. Now we've got sort of a row, different images here and so forth. Now, one of the things you'll see here is after number four here. We actually close our row and then we create a new row here, so toe, in order to give us two rows, we want to different rose on this here. So just just keep that in mind with this for the different roads you want to close up the road and then and then create a new roast. We're doing rows of four. Okay, so that that gives us sort of our basic HTML structure. You can see these down here. I mean, there's there's some stuff going on down here that we need to fix up. You can see I can click through all these right here. We've got the basic functionality. Ah, in place here. So then the next thing that we need to do is we need to go into, ah, the actual CSS. And we're gonna kind of shore some of this stuff up here. So we're going to go down below our skills sections or will scroll down about skills and we will create a new section. I'm gonna grab this and, well, pace that in, and then we will call this portfolio. Ah, and then down below that we're gonna we're gonna do some styling here. So the first thing we do is the project title, and this is for the actual pop up here. Okay, so I just wanted we'll make this a little bit bigger. So I'm gonna do font size, and I'm gonna do three rim here, and then we'll do margin zero. So it's a little closer line height. We'll do one. And I'm gonna do the font family as Yellowtail just to give it a little bit off, you know, designed to it will do cursive. That's an answer like that. And then I'm gonna do do our purple color. So pound and then 890 b d d c gives us our purple color here. Um, I forgot a comma after this here, so it gives us our Yellowtail back. All right, so that gives us the the project title. And the next thing we're going to do here is we're gonna do our responsiveness. We're going to add media, and I'm gonna do Max Max with I'm going to do 768 pixels here. So we're targeting anything. That's 760 pixels. Unless and we're gonna do portfolio dot Portfolios were gonna target our portfolio class, and then we're gonna target our three column here are called three. Okay. And what we're gonna do here is going to change this to change our grid column, and we're gonna change it to span six. So essentially as these Ah, as we get smaller here, these are gonna change, too. And so, span three span six. Ah, so that that's essentially what this is doing. The air here is because, um, actually, that's because of a brace. But also this editor, maybe it's up been updated, but it generally hasn't been recognizing this grid CSS grid. So that's one of the reasons why some of this stuff has these little airs on it in my I d. The next one we're gonna do is we're gonna do then the next screen size down that we're gonna target. So we're gonna do media. We do Max with, and we're gonna do 480 pixels and we're here. We're gonna change the grid column, and we're gonna change that to span 12. So it's gonna be full with, and then we're gonna set the text to align center and that that's our and actually again, uh, we need to target. Uh, we need to target something here. I just started writing in. I always do that a little bit when I when I mess with the responsive stuff. Sometimes I forget to type in the actual declaration here. Like what? We're targeting the element here. So we're gonna target that that portfolio call three element again here. And then we're gonna said it to span 12 and text lines there. Okay, so that gives us our responsiveness. Now, we still have this little bit down here, and actually what I realized is that has nothing do with the CSS. We come back over here, You see, I have this road that's open here, and I never closed it. And we need to make sure and come back in. And we need to close that row like this and then that. So basically we were nesting inside of another row, and that was was causing our issues. So now you see here that these air all the way, that they should be the size that they should be, So we don't actually have to size those. If we squeeze this down, then you see it turns into this is where we change from the span three to the span six. And if we keep going eventually we get to where it's Ah, it's one column with wide or whatever. So it's full with. So that's what the responsiveness part does for us. Helps that toe. Ah, do that. And then, of course, we still have up in here are our project here. We could come in if you want. You can come in here. I'll leave that as something for you. Maybe a little challenge for you to figure out is, you know, between this like this and then when it hits to the full with like this, maybe you want to do. Maybe you want to target something in between here, right here to make this look a little better. So I'll leave. That is a challenge for you, for to figure out how to go ahead and do that. So that's actually it. The portfolio section looks like it might be a little bit more complicated, but actually fancy. But box does all the work for us. Once you get this first item set up here, you really can just sort of copy and paste your way through the rest of it. Um and And just remember, when you get to that, when you want to create a new row, don't forget to close the row and then add a new row here. Um, and like I said again, fancy box does, does all the hard work here. And the other thing is, just make sure this data source is targeting the div or whatever you want to pop up into. Ah, this content box when it pops up here and and once you do that, it's really pretty straightforward.
9. Build the Clients Section: this lesson. We're gonna create this my clients section here. So it's pretty straightforward. Just gives ah, different testimonies or so forth again. Of course, you're gonna want to use the ones that that you have from your clients or from your clients clients. Um and then again, we're gonna get need to upload some images. So I'm gonna go into this, clients one here that I have, and then we'll come over to our workspace or your folder structure, and we will create a new folder under images again, and we'll call this one clients. And I'm just doing this to just to have a little bit of organization that would actually got putting them portfolios. Let me drag that out here just to create a little bit of organization here. Nothing too crazy. And then I will drag these over here, and these are come back over here These air 300 by 300. So these air actually square pictures. So if you're looking for what size you need for the use, that's what you got, right? So those are all uploaded. He concedes there's a Rwanda Stree 100 etcetera is how they're named you can of course. Name them however you want. Ah, for this one. I'm gonna expedite just a little bit here just because we've done the section header quite a bit now. So I feel like probably have got that down, so I'm just gonna drop in the section header. It's exactly identical to what we've done before. So section ideas, clients, a container row call, 12 section header section title and the lead text here. So no, that's that's pretty straightforward. Here, um, let me go ahead and just close up this section so I don't forget like this. And we're also gonna go ahead and close up the container here so we don't forget that either. Right? So that that essentially gives us our our start here. So now we have just start Rose that we got a building site of this, and so we're just gonna build are are sort of row of testimonials. So starting down here, then after the section header, we're gonna go div class, and we're gonna do row and we're going to do testimonials sort of. Just following the standard of what we've done before. In terms of of naming there were two div class and we're going to call four because we're doing three testimonials wide. Then we're do testimonial item. I think that and then inside of this, we're gonna have the first thing. We're gonna have a lot of the image, and we're gonna do class equals, going to image rounded like this. And then we're gonna do testimonial avatar from case we want to target this specifically. And then our source is gonna be where we put our images. So we're going to images clients and then slashes ears Erawan dash 300 dot J peg, let me roll that over so you can see that So on. And I actually got an extra zero in there. Right? So let me drag that over. Okay, So that's that's where our ah images are located, and I'm just do the on on all as the name. This one is Jenny Nups. Jenny Dough. Okay. And then close up our image tags. So that's the first thing that we're gonna put in here. And then after that, then we're going to create a div, and we're going to do div and we're going to class equals testimonial, and we're going to do text center. I think that and then inside of that, we're gonna do 83 and let me scroll us down CNC as we're doing this, we're going to an H three and, uh, inside of that, our classes for that are gonna be class equals. Ah, testimonial title like this. Right again, we're just sort of following what we've done before in other areas on how we're naming this . We're gonna do stupendous or whatever the you want to highlight here is what what this person said. Ah, and then we're gonna do P class equals, and we're gonna do testimonial content. So this is the content. Um, let me just grab this text here, type of this all out and then below that, What we're gonna do is we're gonna just do our testimony, authors when we dropped that in, So that's our text for a testimonial. And then we're gonna do P class equals testimonial. Author, uh, testimonial author and nets, Of course, as we did with our old bag Jenny dough. Okay, so that gives us sort of ah basic structure for our our testimonials. Um, that's actually I mean, that's it. That's the That's the basic structure here is this little section right here. So for the other testimonials, then we're just gonna go ahead and copy and paste those in. You just copy and paste. Um, that and this This section right here and then Ah, change whatever you need to change. I'm gonna drop in what I already have. So these are these other images that we have here? Um and actually, I sort of messed up the title. I was looking. This one is actually I mean, we make I get this right, cause it's fantabulous. It's even better. Okay, so that gives us our sort of basic structure or html Ah, structure. Here it's in our roads and our side of our container inside of our section. So we're pretty much good to go on that on the html structure. Go and save that. And then I'm gonna go over to our CSS, and we're gonna edit our CSS here. So again, we'll grab the CSS section header, and then we'll come down here and I'm gonna actually give us a little space here and come back up. Makes a little easier work with. Okay, so now we're gonna do our testimonials and for our testimonials. There's actually a little bit more that we're gonna do here. So the first thing we're gonna do eyes wouldn't do clients. So that was the idea of the entire section, and we would do the background again, and we're going to change that to our f A f a f a like that like that. So I gives us that slightly great background and then we're gonna go after we're gonna target each testimonial item. Do you remember if you look at this ah, what we have here, You see, that kind of has a square around it. So that's that's one of the things that we want to do years. We wanna create that do testimonial item. Ah, and then we're going to the background, and we're gonna set it to So we just did the section background to Gray. Now we're gonna do the background of these testimonial toe white Teoh. Give it to have it stand out. Then we do padding and will do 30 pixels, 25 pixels, 20 pixels and 25 pixels. And that just sort of comes from playing around with this a little bit, um, to get to where this looked sort of centered to me. It has to do with, For example, this paragraph tag probably has a margin on it. So the padding on the top and the bottom is 10 pixels different. So this is 30 pixels, and this is 20 pixels. That has to do with that petting. You could erase that padding. You could get rid of that padding. You could do it that way, or you could do it this way. It just sort of depends how you wanna Hey, want to tweet that? And then we're gonna do border one pixel solid, and we're going to do ah f one have for one apple in F one. Okay, so that's going to give it a little bit of a border. So now you can see it's starting to look a little bit more like what we had on our example . That will do testimonial, and we'll do avatar. So we're gonna target the actual avatar here to display block so that we can actually target it with CSS rules to margin zero auto. So it's gonna center the image, um, and then we're going to do with ah 100 pixels. like that's we're gonna make it smaller. So now it's sort of sitting inside of that box is not just taken up the whole space. OK, so I think that looks better. Get a lot of this stuff you condone. You can change it. However, you know, whatever you think looks good, but this is just sort of what I went with X. We're going to do testimonial title. Ah, and for this, we're going to do the font size. We'll do 1.75 ram. It's about 28 pixels. And then for testimonial content, we're gonna do a line height of 1.3. Just give Ah ah, have a little bit better. Look, um, and then we will do, actually, that's it. What's all we're gonna do on that? And then down below, we're gonna do testimonial. We're going to do, author. So this is the author and let me scroll it up. So, testimony, author, we're just going to set a font size. We're actually gonna make this smaller than we do 0.8 or am like that to make a little bit smaller. Okay, so if we sort of expand this out a little bit here so we can look at it. You see, we have this here, and if you look at our example from what we're building from, that's what we have there, so looks very much the same. And that's that's actually it. So that that's the H metal. That's the CSS. And that's how you build. Ah, the client section here, so pretty straightforward.
10. Build the Contact HTML Form: this lesson. We're gonna build this bottom section here that has the sort of the start of our foot and has the contact four minute in it. If you'll remember, this is just sort of a a Ajax powered contact form, but he just hit Get quote. If the email sent successfully, it'll say successfully gonna put in a bunk email here and hit Get quote and you could see if not, it will return on air message here. So that's what we're gonna get into building. But we're just going to do the h two melas and CSS in this video or this lesson, and then we're going to get into the PHP and then the Java script that we need to write for all of this. So that said, let's go and pull this out of the way and let's get into our h Most will come back down to the bottom. Ah, again, You know, I'm gonna I'm gonna sort of fast forward this a little bit with this ah header section thing because this is actually this one is a little bit different, So why don't I go ahead and just type this one out so Let's just go section and we'll do class equal section on. Actually, I d equals contact. Uh, right. And then we'll do our active class equals container. Active class equals row and then here we're going to split it Normally be. Do 12 column. Let's further this, but actually here, we're going to split it. So we're going to Div. Class equals call six, because we're gonna have the We're gonna have the section on the left right here. And then we have the contact part over here on the right. So we're splitting this into six. Is here. Six columns. Okay, so we'll do that one. And then let's just go ahead and do the other one here, so we have our basic structure in place. All right, so that gives us 26 calm with columns. Ah, and now when here will do the header will do better. We'll do class equal section, header and inside That will do our H one class equals section title. And then we're also gonna add text left here and then here will do that. Hire me like this scroll down here. So we're starting to get a little something here and then we're going to do P clap paragraph tag equals lead. And then we just have some warm ipsum in here against Let me drop in this Lauren ipsum here . Right? So that's our dummy text. Ah, and then below that we're going to create. Actually, this is outside of the headers. That's what's in our header. You try to keep the head or clean to the title and description and then down below. That is where we're going to do our list with our address and phone number and email address. So we're gonna do a nun ordered list, will give it a class equals list in line, and then we'll do. Ally class equals, uh, list in line item like that, and he's gonna be our line items. And then we're gonna give these. We're gonna give these icons. Will do I class equals will use our phone. Awesome. Sort of f A f a dash map, dash marker like that. And that will give us our icon scroll down a little bit here. So it gives us our icon here, and then we will do I think, it in one freelancer lane and then 55 80 something like that. Okay, so let's our first Ah, in line item. Here, Mrs. Go ahead and do Ally class equals list in line item here. Let's go ahead and just create our 3rd 1 real quick. So Ally class equals list in line item. All right, so those are our three list items, and then inside this one will do. Ah, Well, do I class equals and will do f a f A phone for the phone number. And I'm again. You may not use these exact things. You may not want to include a phone number. I mean, whatever. Whatever works for your situation. Plus one, I will dio 88 and we'll do 555-1 to 1 to sort of a dummy phone number. All right, so that gives us our second list item. And then the 3rd 1 is going to be I class equals f a f a. Ah, dash envelope on. Then we will do. We'll do email at domain dot com. You could link these up so that their clickable and so forth. I'm just keeping sort of simple right now because I think the main thing that we're worried about here really is the form, right? So that gives us again sort of basic structure up to this point. Now we can come down to our second column here. We can build our form, so we're going to form action, and we're gonna set this equal to process dot PHP. Ah, we're actually gonna run this ultimately via JavaScript. But our PHP processing script is at process dot PHP. So we're point to that we're going to method equals post, and we're going to do class equals dark and contact form. Right? So that gives us our form will give it a title. So h three h three and then class equals form title and will do contact me. All right. And then I wrap these in inform field. So I do div class equals form field like this just for sort of targeting purposes will do input class equals text type equals text name equals the name of this form. Field is name because we want This is the person's name will do a placeholder equals and will do name and will say that this is required. Okay, so we'll close that up up, so that creates our first form field. You can see there. Uh and then I'm just gonna sort of copy and paste this because we're gonna have a couple here, so we'll have, ah, email, and then we'll have a text area. I guess we could go ahead and put that one in here like this. All right, So for the 2nd 1 then the class is going to be text, but it's also going to be email because there's gonna be a email input. We're going to change the type to email. This will allow for validation on the browser side, the name we're gonna set to email and then the placeholder We are also going to set to email and will make that one required as well. Okay, so now we've got name email, and then in the next one, we're actually going to change this to text area. And when we do that, we need to come down here. We need to close that. That requires a close. I think that's what gives us a text area. Ah, and then the class is going to be text a text area type. We don't need type because it's not. It's We define that when we say it's a text area. So it's not a text name is going to, uh, going to be message placeholder is going to be. Tell me about your project, okay? And we will leave that one required as well. Okay, so let me go ahead and save that real quick and refresh this. All right? So now we have name email and our message box here. The last thing that we need to put in here than is our button. So we're gonna put this outside of all these dibs, willing to input, and we're going to class equals button buttons submit, and we're going to do type equals submit. And we're do value equals get quote like this, and then we need to add a div here. Div I d equals status messages. So this is where we're going to splay aired status messages. You saw that before. This is just a nem PDI div. It just gives us something to target in a place holder for us to put our status messages into. So that's the HTML. I mean, it's a pretty basic form, lists and so forth. A lot of the stuff that's done with this is gonna be done inside of the C s s. Okay, so we have a lot of contact form CSS, and then we also have and we have a few sort of global styles that we that we need to sort of mess with here a little bit. So, um, let's go ahead and do the global styles first. Since those I mean technique, you know, just to sort of keep in line with how we should be building this. So list in line is put right below this text, right? Right here. And so we're gonna do dot list and the reason we're doing it this way so you can use it in other places, Not just here. So list in line and we will do display flex, and we're gonna do flex flex. Rap is set to wrap, and a line may scroll down so you can see what's happening here. Line content. Uh, we're gonna do flex start. Okay, So this just has to do with some of the the way we want this tow line up and so forth. Ah, you know just how how everything we want it laid out. So we're using flex box for that padding. Zero Ah, we're going to do list style type? None. So I gets with all the bullet points font size 14 pixels and are actually let's do, uh, 0.85 ram. Right, so that's about 14 pixels and then color. We're going to number 999 Okay, so right now, because we have this squeeze down, It doesn't necessarily look like anything you can see. We went from ah, top to bottom list with bullets to now we got everything sort of side by side and so forth . So that gives us some basically out and we're gonna do list. Now we're gonna target the items inside this list in line item, and we're going to do flex grow. Let me scroll down here, Flex grow, and we'll set that to one. So that's that's essentially good. You notice now, instead of these being all just left a line right next to each other, it tells it to grow and sort of fill the remaining space here. That's essentially what we're doing here. So again, this is some flex box stuff, um, but works pretty well for this sort of thing. And then we're gonna do margin bottom five pixels. So when it does, when we get to the smaller screen sizes and it does go to a new line, it has a little bit of space. There actually looks like our email. Let me go back to each tomorrow. Quick. It looks like our email. Uh oh, yeah, because I got a dash here E mail, like on his show up. All right, so there's our email icon. You see that? Then come back over here. All right, so let's list on in line item. Now, we're gonna do the icons, so we'll do list in line item, and then we're going to do dot f a and we're gonna target those those icons. So what we're gonna do here is we're going to, um, exit. Let me give these. We're gonna give these a little bit different color. So we're gonna do our purple color 890 b d. D. So it gives that a little bit of color, and then we're gonna put a little margin to the right because they're right up next to that text or do seven pixels. Okay, so that's sort of moves them out a little bit here again. If we bring this out, let's start to look more a little bit more like what we had. Okay, so there's that. So that's the ah, in line items there. That's the That's the these down here. That little list item area there. Um, let me see. It looks like we need to do for infield real quick because we added foreign field as well. Let's do form field. So this is for the right side. And let's do margin bottom 10 pixels. So that gives us a little space right here. So have we. See, we have a little bit of spacing there. I think that pretty much does it for our ah, for our global styles. Now we need to get down into the actual sort of style specific for the contact form. So we just did testimonials there. Let me do this. I'm gonna grab my divider here again on a piece that in here. Right, So that's for our contact form. Okay, So for this contact area, first thing we're gonna do is we're gonna ah, do the background color. So we're gonna do background, and we're gonna change that 2222 is what I picked. I kind of like that Color makes everything sort of stand out border color and we're gonna do number 333 like that. I think there's a border across the top, so that affects that sort of thing a little bit. Nothing major with that, but helps a little bit. Then we'll do contact and then dot section header. So we're targeting. Were targeting what a global styles. But we're targeting one specific to this section. So Section header is in every single one of these, but were only targeting the one inside of contact here. So that's what we're doing with this declaration. So section header. And then we're going to do border bottom and will do Ah, one pixel dotted and will do number 444 like that. Right? So that's again. That's the section header right here. So it gives a little remember from our example here we have this little dot dot dot thing right here, so that gives a little sort of division there. So that's that. And then let's go into the section title. So Contact section title and the section title. We're gonna change the font family to Yellowtail. So yellow tail cursive sans serif. All right. Ah, And then we're gonna change the color again. Toe are purple. 890 was a d b b b d d. All right, so that that's that, Um, so that's that's that That that section, um, thinking we go ahead and look at this lead section here, let me go and just add text left like this. Pretty sure text was left on that. So that's Ah, that does that. All right, so let's go back over here. So there's section title. Um and I think we need to change the color of that text as well, because it's not very. Ah, it's not showing up very well down there. So let me just go in and do. Did I target that? I see. Well, let's just do contact lead and let's do this. Contact lead. Let's do color. Let's do. Let's just try this to start. See? See? See, it's a little too much is due 555 Yeah, maybe 666 Uh, let's avoid that one. Right. Okay. 777 That looks fine to me. That looks about where we're at. Okay, so that gives us our color for that. And it looks like our left side is pretty much done. Pretty much good to go there. Maybe have some stuff would come back to, but that looks pretty much styled up for us. My next is form title. So it's gonna be that Contact me text or moving over to the right side. When do color 999 Um, and let's do font size 2.25 gram and margin 000 10 pixels zero. Okay, so it gives us a nice big contact me title there, and now we're gonna target this. So this form is a dark where we remember we gave it the class dark because it's a dark form . Not every form on her side is gonna be that way. So we're just targeting this one specifically, So we're going to do dark, and then we're gonna do our text fields and then dark and our text area fields. Now, that's all of our fields. Except for our submit button, if you remember because we gave name the class of text, we gave email the class of text and email and then we gave this the class of text area. So we basically just targeted all of those fields. And now we can we can, uh, style them. So we're going to color or 999 That's gonna be the text color and then border color. See border color. And we'll do Ah, 222222 We'll do the background color. We're going to do rgb a here, and we're gonna do black, which is 255255 255 However, we're going to give it a no pay city, so we'll do 0.1. So that gives us that that sort of grayish color you could find a great color and just do a hex if you want. But I just was like, Well, let me just mess with Theo pasty that because then you can come in here and you can say, Well, two now I don't like that you can kind of play around with until you get what you like, so that makes it a little bit easier work with. So there's that and then we're going to do a box shadow, and we're gonna make it in set. So this is going to make a a shadow, sort of inside of the form field. So it's inset 02 pixels, three pixels on, then RG rgb a and will do 000 and then 0.6. So that's white. And then we have sort of ah pacenti on it. So you can see that creates that little shadow in there. And you could sort of play with these numbers. Let's just make this sort of obvious. Let's do 20. See, that brings it way down. If we do 30 here, you know, that sort of fades it out a little bit, etcetera. Stew 20. Here. You can sort of play around with these with these numbers until you get it toe. Look how you want it to look. So these air just sort of the numbers that I messed with here, Okay? And I think for me, I like the way that that that shadow looks. Ah, well, also was Just copy this. Um I can't remember off the top of my head where Box Shadow was at with browser support. But I'm gonna go ahead and do this. What kid? Ah, box shadow. Like that just in case we need that If it's not necessary, then it's not gonna hurt anything. So we'll just go ahead and throw that in there. All right, so that's That's the little text areas here you can see again. Those look pretty similar to what we had in our example Here. Um, now we need to go ahead and dive into the button so we'll do dot Dark again Will do button submit, and we're gonna do color will do white f f f and we'll do background color, background color would do RGB a again. And so if you're not familiar, this is just the RGB RGB red green, blue colors and then a is for the A pass ity. So that's essentially what rgb A is. So the 1st 3 letters air the RGB and then the last one is the opacity opacity however you say it so 000 again is white and then we'll do 0.2. So that gives us and you know you can go the other way. If you want right, you could do to 5555 and then I mean, you can sort of do that how you want, but that gives us a nice looking sort of black color. I will do border, um, with one pixel solid and will do RGB a again and will do zero 00 and 0.1. So the borders just a little bit darker. CNC now has a little bit of a darker border there. And then we'll do font wait 300 because I don't like that bold looking Ah, text on that. Right, So that's the button. And then we need to do the hover for the button. So do dark and will do dot button, uh, submit, submit and then hover and they will dio dark dot button Submit, submit and we'll do focus If someone happens toe, use their tab button to sort of tab through these. You can change the focus here so we'll do focus and we will do, Ah, background color and we'll do. We're gonna change the background color rgb A and will do 0000 0.35 Okay, and and then we'll do the border color. We're just changing the colors of the background on the borders essentially on hover and on focus. So the border color would do rgb a again 000 zero. Ah, point to and then we're just gonna do cursor pointer. Okay, so? Well, that gives us this is actually the button here. So again, Tab tab, tab on focus here or on hover. You can see the button changes a little bit. Okay, so that gives us that styling. Ah, and then we have our status messages, so we'll go ahead. We'll go ahead. Style. Those ups will do status. Ah, status messages. And this is going to be sort of just the general layout when styling for the status messages. So margin Ah, top. And we'll do 0.7 rams. That's gonna give us a little margin between that and our button, and then we will do padding, and we'll do one rim. So it gives a little padding around the status message. And then now, now we need to do for error. We want the red and for, um, success. We want the green. So we're gonna do status messages and we'll do dot, dot air, and we're gonna we're gonna upend that. So we're gonna do this, and we're gonna a pen that class. Remember, if we go back to HTML, all we did was a div with status message. I d We didn't have air success. We're gonna pen that with RJ Query. Okay, so we don't have toe worry about that in HTML, but we need to do do have the styling. Okay, so on, of course, sure you do that. So when do background and it ends up being D. C 3545 and I would be able to see any of this right now, but we will once we get everything hooked up. So it's gonna be the background color and that that's gonna be that reddish color, and they will do color. I want to wait and then down here, do status messages and will do dot success. And actually, we can just take this color here should just be able to take this. I was doing in both air and success, but we actually should build put that up there like that, and then then we don't have to re rewrite code. All right, so we'll do background, and this is gonna be that green color. So this ends up being to eight a 745 And those were just sort of played with those to get the right color. Um, again, you can sort of make those what? What you want. All right, so that is the footer section. That's the HTML and CSS part of think we're We're pretty much where we need to be if there's anything we need to tweak as we go along here because we're we're actually testing this yet. Um, then we'll go ahead and tweet that here. But that should be the HTML and CSS Ah, for that section.
11. Build the Contact From PHP Processing Script: this lesson. We're gonna write our PHP processing script, Remember, from our for me said the action to process dot PHP. We're gonna hackle this via Java script for BOJ query. But still, you know, if we if we send it there, what the I didn't do a lot in terms of the output that you get back. But still, you know, if this form is sent to this page, it should still process it, even if we weren't hijacking at via JavaScript. So just in case someone has javascript turned off Ah, the email still gets sent The message that the response that they get won't necessarily be the most, uh, you know, the most nice looking, But still, this will, um it should all still work. So Ah, that's that's why we're gonna put this processing script at that. That you are else still okay. It's I mean, people these days of people don't have javascript turned on. There's a lot of the web that they can't even use a lot of sites and developers these days just sort of assumed that javascript is turned on. And so I don't think we're out of bounds with doing the same thing anyway. We'll go ahead and create this new from the file will call process dot PHP. And it's just in the root sort of this working folder that we have here. So it's right next to index dot each melon on One question I know probably could come up with this is, Well, we haven't html page, but we're sitting and we're submitting it to this PHP page. Doesn't this need to be PHP? An answer is actually, no, because there's no PHP code actually on this page. So there's nothing to process, even though the form ah submits data to a PHP processing script, that script is a whole separate, ah, file here so you can actually do an index dot html page and send it to a process stop PHP page. And it works just fine. So just take sort of answer that question, right? So with that said, let's go ahead and openness and let's go ahead and write our PHP script. So first thing we do, of course, opener PHP tags and then we're gonna set up are sort of our con fig. Now I'm I'm keeping this. There's I mean, there's whole scripts that are massive scripts for doing contact forms and so forth. I'm keeping this really simple because I didn't want to make this a huge PHP course. Okay, so if you want to dive into PHP, I have a bunch of peach people courses, you know that are available that you conveyed access to you go stored out John Morris online dot com. Or if you're on skill share, just go to just go to my profile page, and you'll see all of them there. But I'm trying to keep the the PHP as limited as possible. So first thing we're gonna do is we're gonna do the send to. So who are we going to send this to? And this is gonna be Remember, this is a quote page or a actions going closest. This is a quote request paid. So this is gonna be your email address. Okay, So I'm just going to set this to no dumbing at john Morris online dot com or whatever this is was this is gonna be a dummy email address here for me, but you would obviously want to put in your email address of your clients email address and then the subject. You make the subject line whatever you want. This is the subject line the email have when it arrives. I'm just gonna put new quote request and actually, let me go back up here. Well, actually, it's just do it here. Generally do single quotes. Sometimes I flip flop. So anyway, so let's make that single quotes just consistency. Then we're gonna check and see if there's any post out of even when this is submitted via Ajax. It's still it's recognized as being submitted as a post sort of submit. So we wanna check to see if Post Data has been submitted and we're gonna so we're gonna check and see if Post is empty or not. If it's empty, then we're just We're not going to do anything. You could, of course, put an else statement in here and say something like, you know, echo no data or something like that. So if you want to do that, you can You can do that. Um, for what I have, I'm actually just leaving it blank. Um, so you can just sort of decide whatever you want to do there. All right. Next thing reduce. Going to create a white list. So this is a white list of feet form field. Well, except so we're gonna do name equals. Ah, Post and we'll do name. And again, there are really fancy, concise ways that you could do this without writing this all out for both like this. But again, for those of you who don't know necessarily a ton of PHP, I don't want to make this too complicated. So all we're doing is we're grabbing the data from the the form submit. So when the former submitted, it will essentially send ah request with this data in this post super global right here. So it looks like a PHP variable. Sort of like what we did appear. But it's structured a little bit different. This basically the name that was submitted, the email that was submitted in the form like That's really all you need to know to understand this, and I will do message he do message equals. And that's uh huh post and message. And then we're going to do honeypot equals and will dio post and your URL. And that actually makes me I don't I think that we added the honeypot to our form. Yeah, so we missed the honeypot when we made our form. So actually, let's go back over to index html. It's fine. It's not that big of a deal to add. So we'll add it here right below our text area. And so we're going to do div class equals form field. So it's gonna look what a honey pot is is. It's a field that when a baht comes through, a baht feels like it has toe oftentimes on bots come through. They they're gonna fill out something in every field here, right? And and so ah, honey, pot is basically it's like a bear can't resist the honey. It's like a body can't resist filling out this field. So we're gonna create a field that the baht would fill out, but a human wouldn't. And the reason the human one is because we're going to set this to display none. Okay, so this is not actually going to show to a human, but a bott reading this will see this field and they'll fill it out. Where's the human Wouldn't. And that's so then we can tell if we have a bottle, not so input type type equals hidden. Uh, now, this is a very rudimentary way of dealing with spam. But if you do it right, actually can work. So you do Name equals U R l And then we'll do. Placeholder equals you, Earl, right? None of that matters because it's not gonna show. But the point of a honey pot is is like spammers had have figured out that people do this. And so if you just name this input type equals honeypot, Well, the the bots probably gonna have something in it to recognize that and not fill it out. Okay, so you need to make it look like a a real form field. And you are l is like, when you when you use the term honeypot, Teoh bait the pot into filling it out. Most bots. The thing they absolutely want to put on your site is there you are l That's why they're spamming. So when you use a u. R. L as a honeypot, it could be actually pretty effective because people are going to just want to fill that out. So that's why I use that here. Okay, so this is a form field. You notice it doesn't show over here. If I got rid of ah style display None, then Ah, actually, it's not Well, it's a hidden field, so it doesn't matter, but it's not showing over. Here is the point. And so the humans not gonna fill it out, but the baht will. And so then when we called him over to our PHP script, we can grab that and we can test. And if it was filled out that it was probably a bought that submitted this form, okay? And so then we can just not process it. So that's actually the very first thing that we're we do. We're gonna check the honeypot, because if it's, ah if it is a honeypot, it's a spam, A spam. But we're not even gonna mess with anything. So we're gonna do if if not, empty, and we'll do honeypot. So if that's not empty, that means it was filled out. There was data submitted into it. Then we're gonna do Echo J. Sohn Ah, actually encode encode and we're gonna create a ah Air Ray. Now, the reason I'm doing this this way is because when we get to the JavaScript part, we're gonna grab these messages and parse amount on display them. This is where I say that if you if someone actually submits this form with javascript turned off his formal process. But what is going toe echo out? Is this encoded array Jason encoded or a I didn't do anything toe to make that look nicer. Anything? Because I'm I'm really focused on the the the a jack processing of it. I wasn't really too worried about If someone visits directly with PHP for you, you may want to you know, that may be a thing that you want to account for. And so then you would Ah, you know, you would make sure and do that in your particular script the way you write this. Anyway, there was a problem. Okay? And again, with this particular message, you notice I'm not giving a whole lot of information because this is if if apes were assuming a spam baht filled this out, we're not going to say Oh ha ha. We know your ah, spam body or whatever, right? We're not going to do that because we don't want to give them that information toe, maybe try and work around or whatever. We're just simply going to say there was a problem and then hopefully they move on from us . Okay? So again, just keep this in mind. This is four dealing with spam. All right, so now we're gonna check for empty values again. This is a place where you could do some fancy PHP script. We're just gonna keep it really simple. So if and then we'll do empty and we'll do name. So if the names empty or empty and will do, uh from and we set the from equal to the email address that was submitted, that was just a choice I made about how I named the variables And then or so if that email that this basically this email right here is empty and that's this condition will be meant or ah, empty message. So if the message is empty now, we put required one thing to keep in mind with this is we put required on those in the H two mouth. So if we try to submit this form, the browser is going to tell us it's empty. So we're already doing that on the front, and we already have front and validation but we're also going to check it on the back end, just in case. I mean, someone could be coming from a really old browser that doesn't do that or whatever. So again, we're just you always check on the front end and the back end. So that's what we're doing here. So if any one of those thes air or statement So if name is empty or from his empty or messages empty of any one of them is empty. Then again, we're going to echo and well do Jason. Ah, and code. And we'll do an array and we will do status zero and message and we'll say, a field A that's do required field is missing. Okay, so we're giving a little bit more because we assume this is a human. Now, at this point, we're giving him a little bit more information than we did for Ah, the baht. And again, we're gonna do die. Okay, so that's gonna kill the the script after that. So if that condition is met, it will echo out that Jason encoded Ah, that Jason encoded array. And then it will die. And again, the reason The only reason we're Jason encoding. This is because we're gonna, ultimately, eventually grab via Ajax. And so it will print out a message that we grab via Ajax. And then we use that on this side on this page to display the proper message, and you'll get to see all that here soon. Right? Next thing, we're gonna check for a valid email. Okay, So we're gonna set from equal to and we're gonna do filter bar, which is a PHP function, and we're gonna do from So we're gonna pass in our from email. The email. That was Ah, some email address. It was submitted, and we're gonna run the filter filter. Validate e mail. Okay, so basically what filter bar does it's gonna take this variable and run it through this filter. And what this filter does is checks to see if it is a valid email address. So, you know, there's a standard out there for what a valid email address should look like. And PHP has these filters that can run the email address of submitted against that. So that's what this is going to do is going to check that and then down here, we dio if not from. So if basically, if that filter of our returns false meaning, that's not a valid email address. And again, we're gonna echo Nissan, uh, and code. And we're gonna do an array status status zero message on will say, um, not ah, valid email. Okay, so that will be our message. I just noticed up here this on those messages again. Do that, I and then we'll do die down here. Okay, So that checks to see if we have the valid email. So we're just running through a series of checks. We checked the honeypot, we check for the values, then we check for valid email. So we're just sort of knocking out all the things that could stop this from processing. And then once we get through all those, then we can get into OK, now, we were pretty sure we have valid data and so forth. Now, let's send the email. So we're gonna send an HTML email, so we're gonna get set headers equal to, and I'm gonna do sprint f and I'm gonna do from and we'll do percentage eso sprint f essentially allows you to pop in placeholders. So where do from and then we'll do the from like this and then dot Uh, backside are back slash and like this. Okay, so this is basically setting are from instead of it just being, um the email addresses, which what it would default to. And we just get a, ah, something from the email address. We can make it look nicer if we want. Now, what I'm doing here is I'm actually just setting this from to the email address, so I'm not actually doing anything here. But I wrote that out so that if you want to, you can change this up and do like some like from, and then you could do the name and then the email address and so forth. So anyway, Ah, that's that's why we're doing this here. So then headers. And again, I have a whole course on sending emails. So if you want to really dive into that, I recommend checking that out. Um di equals. So this is going to append to the top first line. So sprint f and we're going to do reply to and we'll do percentage s again, and we're going to do from again. So this is setting the reply to again. It'll default to the the email address. But we're just again. We're gonna set it explicitly so that if you wanted to change that, you can change that. So you could set the reply to to something else other than what? The actual the actual email address that was it was sent from, in this case, I don't know necessary Why you'd want to do that. But again, I'm just sort of throwing this stuff in here to show you how to do these 80 million miles. All right, so this is gonna add again. So we're going to spread f and then we're gonna do X ex mailer, and we're gonna dio PHP slash percentage s. And this is just gonna set what PHP version. This is being sent from here. All right, so that gets our headers. And then now we and the dot equals basically what that means is it's a pending it. So it's gonna this ultimately what headers is gonna be equal to is from and the from email address and then a line break reply to the from email just in a line break, and then x mailer and the PHP version, right? So it's the DI equals is just depending to the line before it instead of overriding it. Which is what you would do if you didn't do the dot equals right. So if and then we'll do will run the male command. So male and we're gonna set Ah, the first variable is the two. So that's the sent to That's what we set up in the conflict that's gonna be sent to you or your client, whatever the subject of the email, which we also set in the convict, and then we're going to do the message, and then we're gonna do the headers. Okay, so that's going to be what sends our email, and we're checking by running it in a conditional like this. If male returns true than the conditional be met. If it returns false than it won't be met. So if it returns true, then we're going to echo Jason and code, and we're going to do an array. And this time the status is going to be equal to one because it was successful and the message will be email email sent successfully like that. All right, go. The pope. We're still going to kill the script after that because we don't need There's no more processing that we need to do. We just need to echo that out and that's it. And then the last thing we're going to do and I'm not gonna do it inside else statement is we're just going to echo J. Sohn Ah, in code. And we have just This is just sort of ah ah, default status message. So array status. We'll set it to zero, and then we'll set message equal to him. Email not sent successfully. Please try again. Okay. And that's the end of the scripts that we're not going to do the diving here. So essentially, what's happening here is if we have all these checks that we run through if you know it, if one of these fails, if this one that this condition is met which made basically means we have a failure, we're going to return a negative message, return a negative message, return a negative message, and then we're going to try and send the email. And if the email sends will return a positive message and then down here, for some reason, someone goes wacky and it makes it through the checks but doesn't send the email or anything else. Basically, we're going to return. And a negative message that says the email wasn't set successfully. Okay, that's the PHP script. And again, we're gonna Ultimately, we're not going to send people there to this directly. We're gonna use Java script urge a query to send in Ajax request and these status messages that are getting Jason encoded. We're gonna grab those in RJ Query, and then we're gonna process those in RJ Query. And that's what's going to display the message down here. So when someone Smith's this form, they'll never leave this page.
12. Build the Contact From AJAX Processing Script: I announced time to create RJ query script that is going to process are formed out here. So we are going to come over to our file that we already have freelancers is there one dot Js and we are going to go inside of the ready function that we've already created here just because not really any use in creating another one. All this. Ah, Jake, rail. Just load once the document is ready. So, uh, we're just gonna go and put it inside here, and we are going to now. You could parse this out. I think I mentioned this before. This is for the menu. Now I'm doing the form. You could create two different JavaScript files, so that would be a little bit more portable. Feel free to do that if you want. Um, so I'm gonna say we're gonna attach a submit handler to the form. Whatever. However, that makes sense. All right. So, again, if you're not familiar with Jay Career, I recommend, like, I'm not going to do. Ah, Jake Ray 101 Here. So but so if you want to learn more about Jake, recommend finding course and taking that I currently don't have any. Um, but maybe down the line anyway, gonna invoke J query and we are going to look for we're going to select or contact forms. We gave our contact form a class of contact form, and so we're going to select that, and then we're going to do dot submit. So that's a J query method. So on submit of the form, then we're going to create an anonymous function and will type in event so that we can target the event, and then we're gonna do stuff inside of this anonymous function. All right, so let's see what? Our errors. Unexpected token. Okay. Yeah, I So we we put the token up here, Um, and so we're invoking it down here. So on. Actually, part of that's going to be because this should only have one that should be down here. Exactly. Sure. What? I typed wrong there, but that actually closed the brackets than the parentheses. There. Okay, Amy, that's how it should look. So we have our submit. Now, we're creating an anonymous function inside of these brackets, and this is where we're going to handle our form. So the first thing that we need to do is we need to stop the form, actually give a little space here. We need to stop form from submitting normally. Right? So we want to keep it from submitting and actually going to that PHP page create because we're gonna do it via Ajax. We're going to event dot prevent default. So again, this is sort of a jaqui method that's just going to take this event that we passed in. So the button clicked the form submit. It's going to take that and it's going to prevent the default action which is submitting the form to the U. R L in the action script. So it's going to stop that from happening, So it's the first thing that we need to do. Then we're going to serialize the submitted form data and get the action, which is essentially the URL. Okay, so first we're gonna create a variable aim form, and we're going to set it equal to this, Which is this on in this case is since we submitted we did it. We're doing this on submit. It's the form. So we're going to, um this is why we're setting equal to form this is going to give us the form element from our from our page. Okay. And then we are going to get are you are elsewhere in se. You are l equal to, ah form. We're going into a form variable that we just created dot adder. So attributes and action. Um okay. So essentially, what this is doing is it's saying we're gonna go into the form that was submitted, right? Because we did this on cement. We're gonna go into the form that was submitted, and we're going to go into that form element, and we're going to get the action, the value of the action block, which is process dot PHP. So that's what this variable should be set to. So the reason we do that is so that we can grab, you know, there could be multiple forms that are processed by this J query script, and so we're going to grab the actual form or the actual U R l from that particular form, Whichever one happened to be submitted. So it just makes this a little bit more, uh, modular. All right. Next we're going to Ah, I'm sort of making this very Berber bowls, but we're gonna send the data using post. So we're going to variable and we're going to do posting equals, and we're gonna set that equal to dot post. So this is a again injured Cory method. You are l So let's euro. We just got So we're gonna The post method essentially is a shorthand for the using Ajax inside of J query. So this is going to create going to post this data two. We're gonna post something to this u R l. And then we got to tell it what to post. So we're going to do form are formed from above form variable Chazal, our entire form dot serialize. So what serialize is going to do is essentially take all of the data in the form. So all of the ah fields that have been filled out here is going to take those and serialize those so that they can be It's easier to pass as post data. Okay, so that's what that's doing. And then now we need to so that that actually is what I mean. That line right there is what actually sends the post data. So as you can see, it's It's pretty simple and straightforward this way, Jake worries. I mean, I know a lot of people have moved on since to some other stuff, and I'm sure they do similar things, but still pretty handy right now. We're going to put the results in. Ah, div. Okay, so we're gonna do posting. That's why we did posting variable above. So we can now reference that dot Don. So when it's done, when? When this finishes up here, then we're going to run this. And so we're going to function and will do data like this. And now we're going to essentially inside of this when the perform is done and we've got a response back by Ajax. Now we're going to run this anonymous function, and it What we get back is the data that we got back from our request. And so we're gonna do variable response and said that equal to dot and we're going to parse Jason because you remember, we what we submitted. Ah, what we're sending back is Jason. When we creator PHP script, we kept Jason and coding all of our responses. This is why it's easier to work with inside Ajay Kori we're gonna parts that and then we're going to do target equals and will do status messages. Okay, so we've done a couple things there. We've parsed our data and set it equal to response here. And then we've got our target. Remember div with status messages. So we've set that very well. This is just setting variables. We haven't done anything yet, So we've par star Jason and set that equal to response. And now we've set our target for where we want to upend this data in. And now we're going to do ad success slash air classes. Okay, so we're gonna add the class members. So we're gonna do this. Um, inside of J. Corey. So what we're gonna do is going to do if response dot status. Remember, response has what we got back. And remember, we sent back an array with a status and message. So we're now checking that status that we created in our array when and then that we Jason encoded in our PHP script. So if response dot status and we're going to say if that is equal to one, right. Remember, we had one as one of them and zero as the rest of them. So that's equal to one. There were Do target dot remove class error just in case that, uh uh, the air message was was already on there. Right? Maybe they submit the form, got an air message, and then now they submitted again and they get a success message. We want to make sure remove that air message. Otherwise, it's just that that stats message Dave is gonna have both classes. Okay, so we got to remove the air message, and there went to target dot add class and we're going to do success. So we're gonna add in the success message. Okay? So, basically, if the if the what we got back from a PHP script, it's a successful response that we're going to remove the air class from the staff's message, Div. And we're going to add the success class. Okay, else if response dot status and you could probably just do else. But I'm being very explicit here. Response dot Status. We're checking that Same thing equals zero night then. So if a equals zero, then we're going to do target dot remove class and success. This time we're gonna move the success class because that this time it failed and we going to target dot add class air. Okay, so that's adding our air messages there. So it's just adding and removing a class. We already created those classes on our CSS. And then the final thing we're gonna do is we're going to upend the message. So we're going to do target. Remember, this is are we set target equal to status messages are our block here, so target empty dot append. So it's basically empty is removing it anything. If there's anything in there before it's going to remove it now we're gonna penned we're gonna do response the message. So the message that we created in our PHP script for our Ray and they were gonna do hide and dot fade and so that's just a defect. I wanna do 400. Okay. So that essentially what that does is that's going to append. It's gonna move any messages in there. It's going to upend the new message that we just got it. It's hiding it and then fading it in. OK, so it z basically that allows it to fade in right so that it creates that effect. And so that's what when we have all of this, no, then that's what we have. When we come over here and we say No, John Lhasa will fill out some stuff and we right now it's Red says not about email. We said, Get quote now It changed. It faded back in and all of that, if we come up here and do like, G not a valid email and then we get not a valid email. So that's what allows all of that effect toe happen is, Is this j query here and the hiding and the fading in the response and so forth. So that's it. That's all for the J query in here. So again, fairly straightforward. If you're not familiar, Jake Ray, maybe a little bit tough to follow. Ah, I recommend, you know, finding course, Andrzej Career or something, or just maybe going back through it o r. Referencing the source code. Whatever you need to do in order to get this done for you
13. Build the Smooth Scroll jQuery Animation: What I want to do now is the smooth scrolling. So if we look at this here Ah, and we click on one of these links here if we click on you notice they just sort of flash to each section and our original We had some. We had a smooth scroll. So I want to add that here, there's a couple different parts to that. So the first thing that we're gonna do is we're gonna target are are actual event. And so we have to start with our selectors. We're gonna do menu mav item, and then we're going to the anchor tag for ah, that's so remember in our menu, each one of these list items in this on ordered list is given the class menu naff item, and then we're just referencing the anchor link, the the the the anchor tag in that. So we do that and then we're going to go on in the event where after is click. So when any of those links air clicked, then we're going to do something, and what we're gonna do is we're gonna creating non anonymous function that is going to do the stuff that that we want to get done. All right, so and we need to get rid of that. We need to put that down here. All right. OK, so that's our selector. And our event handler are targeting our event. And so now we need to do a few things with this. So first, we're going to set some variables we're gonna set this equal to are this object that just so we can reference it multiple times and J Coury doesn't have to go back into the dom. It's just a performance thing. And then we're going to We need to get our h ref. So are a trap for these are the It's gonna be pound about pound skills, pound portfolio. If you remember when liquidity section we gave it an I d. Ah, that matched what's in our menu here. That's why when we click on these, it works to go to each one right now. So ah, but we need for our purposes. We need to grab that. So we're going to do, uh, I'll talk about why here in just a second, we're going to a draft equals and they were gonna reference Are this Ah, variable and then we're gonna do adder, and we're gonna do a treff. Okay, So what that does is it's basically grabbing that pound about or pound skills grabbing that a trip, uh, attributes from whichever one of these was clicks. When you click about than h this a draft gets set to pound about when you click skills to get set to pound skills and so forth. Okay, so that said some variables that will need. And then the first thing we're gonna do this actually optional. So we're gonna toggle the knave menu. So right now, when we click on a link, this knave menu over here stays. Okay, So I wrote this, and I would say probably the intended behaviour I prefer is that when you click one of these, it's scrolls to the section in the menu closes. Because I in my mind, I sort of assumed that when someone clicks on a section, they're actually gonna want to read it. And so then if they have to click the X again, that's like it's an extra click. So we go ahead and close it for him. You may disagree with with me on that. That's fine. if you don't want to do that, If you don't want to close the menu in an item is clicked then just don't include this little section right here under toggle knave menu before the next smooth scrolling section . But I wanted to show you how to do it in case you wanted to do that. So what we need to do here is essentially mimic what we did up here with our toggle ing, our menu and our menu toggle, but only do the remove part. Okay, so we're gonna do is we're gonna do menu toggle, and then we're going to do dot remove class close. Okay, so when this menu is open, the toggle gets gets. Has the class close added to it and that we have some animation that goes along with that. And so when we remove that class, then that's going to remove that. That that toggle, and then we're gonna come down here. We're gonna do this dot Parents of this again references the menu item anchor tag that was clicked. So when do parents not parent but parents? And then we'll do menu. We'll do Ah, knave item and we'll do menu knave and will do menu. Okay, so these mimic up here when we appear the elements that we added the show class two. When we toggle this, we're now just it's the same ones. But now what we're gonna do is going to do remove class, and we're gonna do show so we're gonna remove that class, and that's going to cause that menu to close. OK, so again, that's just creating this effect that where when we click one of these items here, it's gonna close the menu. So you see, now the menu closes as if we had hit that X button. When we click one of these items here again, if you don't want that behavior, just remove these lines in here. All right? So the last thing, then, is the smooth scrolling and the smooth scrolling is actually pretty straightforward. So we're gonna reference our route variable that we created before remember, appear route. Ah, a smile body. So we're gonna reference that and we're going to do an animation, so we're gonna do animate and then inside of that, we're gonna have some options for our animation. So the first thing that we want to do is we want to specify what our animation is. We're gonna do scroll top. So that's gonna be what our animation is, and we need to tell it where we're going to scroll. So we're gonna reference H ref, which we created up here, which remembers pound about pound skills and are sections. Have these I ds. So this is essentially Emily emulating what you would would happen if you didn't have any javascript out of this and you would click it except it's animating the process. Then we're gonna add offset. So we want to add offset, and we're going to do top minus 100. So essentially, what this is going to do is when when one of these, uh, lynxes clicked, we're gonna animate the scroll, right? And we're going to scroll. Still to the top of that, whatever. Eight. Ref was cooking school the top of that section, but we're gonna add an offset to the top of minus 100 pixels. So basically, when you click it it instead of the section here, scrolling right to the top of the browser, like like that is gonna give you about 100 pixels. Okay, so that's what that does again. You may be fine with this going right to the top. Or you may want 400 pics of whatever it is for your situation, but ah, that's just what I have sort of chosen here. Okay, so that's that sort of sets up the animation. Now we need to say how long it's gonna take. So we're gonna do 500 milliseconds. She's about half a second, and then we're gonna do attach another anonymous function, and again, this is sort of optional. But I think it makes sense in this situation. This will work without this anonymous function here. But what this does if we do window dot location dot hash equals breath. Um, So what? What happens? Me do that real quick and well, I need to add something on here, but I'll talk about that second. So if we did not add this right here, what would happen when we click one of these links is we would scroll to it and everything will work. Find that way. But it would not upend the ah hash tag or the hash to the end of the URL. And so, by doing this What happens is it depends when you click on about it puts pound about at the end of the URL Pound Skills Pound port portfolio, etcetera. So it's sort of mimics the default behavior because that's what would happen by default if you if you had no job a script attached to any of this. So I think in this sense that makes sense to mimic the default behavior in that way. Depending on if you're using this for another application than you may or may not want to do that, so you depend what you're doing. You may or may not add this part here, and then the last thing that we need to do here is return false, and that's going to make sure that the default behavior when you click one of these links doesn't happen. Okay, so if we come in here now, we click on skills you can see we get that smooth scroll. We got our 100 pixels here, and if we go to portfolio, same thing menu closes. Contact, etcetera will go back up to about and so that gives us our smooth school. Now, if you're not familiar with Jake query. If this sort of your first introduction to Jake Ray, this is probably could be a little bit overwhelming again. I would recommend, you know, taking E J Corey class or going back through this because once you know, a little bit of Jake where this is actually pretty straightforward. This is some pretty Ah, I don't want to say basic, but it's some pretty standard stuff when it comes to to Jake Worry So. But hopefully that shows you how to do that. And you can sort of make this work for whatever situation you happen to be in.
14. Build the Site Footer: All right, you've made it. We are down to the last section here. I know some of this is probably pretty thick to go through. I just recommend maybe going back through it and working with a little bit of here, having a little bit of trouble falling long. But we're down to the footer section. This one's actually pretty simple and straightforward. So we're going to do Footer. And just like the header, we're going to class equals site footer like this and we're gonna do as always, Div Class equals container. Did Div class equals row And then we're going to do div class equals and we're gonna do a call 12 and we're going to text center. All right, and then inside that will do. Just doing a copyright kind of thing here. Of course, Change this for year. Your site will do and copy. That gives us the copyright. Mark me Scroll down here so you can see we're down. Clear down here So and copy. And I'm gonna do 2018 on 18 Joe Freelancer. Oh, all right. Reserved like this. And that's pretty much it. That's That's the footer. We just need to style it at this point. So we'll go. I'll say that. And then we'll go over into our CSS here and let me grab my divider here. So there's our divider and we're just going to do site footer and we're going to do padding 20 pixels. School down so you can see that So patting 20 pixels will do background and we'll dio two d two d two d, just a little bit different gray. And then we'll do color number 999 Right, So that gives us pretty much are our final footer there. Oops, you go and save that. All right, so that gives us sort of our final footer there. Ah, and that. I mean, that's really all there. There is to it. So pretty quick one here all Ah, jumping to a wrap up lesson after this and we could talk about some some things to keep in mind on going forward from here
15. Class Project and Wrap Up: All right. So hopefully you guys and enjoyed the course. If you did, I'd appreciate it if you'd leave me a review on the course. I really helps me out. Also, be sure to follow me over on my profile so you can see when I release any new courses and also check out any of the courses that I've got there. You know, I've got Beginner's Guide to PHP have got HTML course object. Do any programming? A number of Web development courses. Ah, one of my more popular courses Is this freelancing on up work courses? So if you want to get into that and so forth, So again, feel free to check those out and diving any of those that that you ah, wanna learn as well as far as for this, You know, one of the things that I can imagine going through this is you know, some of this stuff if you a lot of times people get into web development so forth, they may learn CSS really well. But maybe not. You know, Jake, we're Java script as much or whatever. I actually am in a similar boat, you know. I know. J query good enough, but javascript really isn't something I've dove heavy into a sort of more went down the PHP path. Ah, and so when you have something like this, I think the thing to keep your mind is it combines it fairly. Don't say advance, but necessarily it's an aggressive, you know, html, CSS, JavaScript and PHP. And so when you're bringing all of those different languages together, Ah, you may not know every single one of them as well as you thought or is was you want or whatever. And so, of course, like this can maybe feel a little bit overwhelming. And there's a couple things I just want toe sort of reiterate here I've said them, but one is, you know, if that's the case, just just kind of keep going through and keep working with it and so forth, and I think I'll start to make more sense. The second thing, though, is and sort of. The point of why I wanted to make this video is it's really important. Project based courses like this are nice because you gotta learn how to build something you know, real, and they're fun and so forth. But if you really want to master Web development, you want to be really good at this, and you really want to master specifically a particular language. You really need to dive into a language specific sort of concept specific course. So something like my Beginner's Guide to Ph. Pierre, my Beginner's Guide to HTML, those sorts of those types of courses. They're not necessarily as fun or as quote unquote sexy as a project based course like this . But those are actually how you get in and really master those languages. And it's those things that people take to get to the point where they can do a project like this without having toe, you know, without a beast being super overwhelming and so forth. I mean, when I sat down and made this, sure, I always have to do some research and look things up. But I have the general gist in every language of what I wanted to do. And that's because I've taken ah language specific courses on on all of this stuff, and I've learned the actual individual languages in depth themselves so and use them on a day to day basis. So I had a pretty good idea of what I was gonna do. So again, I just want to encourage you to not get caught up in Onley taking project based courses like this again. They're fun. They're great. I think once you go through some of the language specific courses than project based port courses like this are are really good next step to take. Because now it allows you to take all of this sort of knowledge that you've gathered and put it together into something. But, uh, again, you know, if you really want to master language, really want to master Web development, get into those language specific courses. All right, so that's all they really have to say in this wrap up here again. Hopefully enjoyed the course we did again. I appreciate if you'd leave a review again. Also, follow me over on my profile. If you wanna get notified of any other courses and I will do it, let me know if you have any questions in the discussion below. Thanks
16. Next Steps: I'm honest there's no more. So online.com, so little housekeeping to finish up this course. If you haven't yet, be sure to head on over to the class area. There is a class section for some, some steps for you to walk through for this course. So be sure to head over in that it's under the discussion in Projects tab that you'll see on the course. Also, if you head over to my profile, be sure to give me a follow on my profile here so you'll be notified when I release new courses. And I also have an ongoing sort of weekly podcast style course called Let's Talk freelance. So if you would like to have sort of access to ongoing training regarding freelancing and online business and so forth. Be sure to check out that. Let's talk freelance course as well. And finally, I do have a daily tips newsletter on my website at John Morris online.com. If you head over there, you can sign up to that mailing list. You will also be put into my own, my very own mobile app, or you'll get access to over 78 hours of free content at the time of this recording related to freelance and so forth as well. So if you're interested in that, BD sure to check that out as well. Again, that's John Morris online.com. All right. Thank you for taking the class. If you enjoyed it, I appreciate you for You. Leave me a review and we'll see you in the next course.
John Morris, I help freelancers get clients.
