[00:00] Alright, this isn't a tutorial like I would normally do. It's just me live coding.
[00:30] Thank you.
[01:00] Thank you.
[01:30] Thank you.
[02:00] Thank you.
[02:30] Thank you.
[03:00] Thank you.
[03:30] Thank you.
[04:00] Thank you.
[04:30] Alright, you know I think one mistake that people make is they switch between HTML and
[04:51] see us too often. So I'll try to do better on this one. But like where you code one thing and then you go, you know, check what it looks like. And then you code one more thing and
[05:08] you go check what it looks like and so on. When, if you're any good, you know what it looks like even, you know, roughly as soon as you wrote it. Sure you might be missing some style or something like that but yeah you don't need to check it every
[05:25] single time and so I think people make that mistake of bouncing back and forth between their HTML and their CSS or their preview of their CSS I should say. A little too often.
[05:43] Okay let's I have three more to add. I just don't know how to do it.
[05:56] Okay, so that image is going to go there. I don't know anything else about that. A couple paragraphs.
[06:11] Well actually that image has text in it so I'm going to make it a header and then change
[06:30] the background image. That way it has a nice fallback.
[06:51] Okay, you're probably tired of seeing the major short version right here. Let's do a little CSS. I'll
[07:04] use the cell phone for the monitor and go find my font face declarations
[07:21] so I can do that over here Alright, man my internet is crawling today, I'd rather push it.
[07:44] I am also, over here, uploading a little video I did on the sales page design and it's taking forever.
[07:56] So you might get all those updates after your live Let's see I can grab any one of these well here I'll set this as the header
[08:16] And then go to my style sheet Okay, I found what I was looking for.
[08:39] That, so this is to get the chump copy of each regular. Those URLs are all for hosted on my site.
[08:51] you know what I thought you'd add let's copy this time because I'm on my local machine right now
[09:09] ah okay
[09:21] I think you're doing there we go so now this will work from my local machine cool okay in here and let this out what I actually want to do I'm going to embed
[09:40] the thousand later but I want to do two separate documents now so we're going to do like well stashy and then it's a joke I was a commute to a traffic source
[09:59] Okay, and then now I'm going to be able to see my HTML and my CSS at the same time.
[10:19] Alright, I dropped this, let's see. Let's grab that color and Photoshop it this way.
[10:42] You know what, I need a container wrapping this whole thing. Let's indent this.
[11:16] I'm going to put in our background image there. A little bit of padding. Top, I don't know, 300 pixels. Okay, I'll save that off the full little preview page.
[11:30] Perfect. Um... I need to set the character set. So that goes away. I'm trying to remember how to do that.
[11:45] you know what, I don't have to remember I just want the UTF-8 oh man, it's so slow
[11:58] you should feel sorry for me oh, I should find out
[12:10] Okay, so if the 5 is 2 and the same, I can use the short one. Boom.
[12:22] Fixed. Alright. Alright. Now for fonts.
[12:40] That's my default font size. 18 pixels.
[12:52] It's going big. Now I can kind of default to 1.5 and what's our color?
[13:04] Perfect. Alright, let's define some headers.
[13:34] 32 and Trump Gothic renders weird. It renders small.
[13:47] So far it's so big.
[14:04] Alright, keep your camera spread, Photoshop is off.
[14:19] Okay alright I went with a different color because this was two
[14:44] Perfect. Okay, now let's...
[15:14] 48, let's give that a try. I'm going to have to go with a smaller smaller.
[15:44] .
[16:14] Actually, it bothers me that it's taking up that much space.
[16:41] Okay, those are all set. Let's switch this.
[16:53] Now I can kind of make this wider.
[17:11] It's got color, it's got kind of blue in it.
[17:37] Okay, so you design those. Add links. Let's add links now.
[18:07] Okay.
[18:37] So, it shows me a little bit of color.
[19:07] Alright, we're making progress.
[19:32] I guess let's see what's cool next. So it's 27 pixels. That's a weird size.
[19:45] I probably wanted to fit on one line there. weird size. I probably wanted to fit on one line there.
[20:15] I'll cut it in the bottom of the screen. I'm just trying to make that.
[20:52] Thank you.
[21:22] I'm going to give you a quick example of what the
[21:38] Oh, it's that paragraph tag that's adding all that action space.
[22:06] I'll just start it off with a little out of hand.
[22:36] Hmm, I'm just gonna, I don't know why that didn't work.
[22:54] Just go position relative. Actually, that's the wrong way to do it. I should do it the correct way, which would be...
[23:06] Thank you.
[23:36] Alright.
[23:52] Shows what I want.
[24:06] Okay.
[24:29] Okay. So the question is, can I, which one do I drop it? I cannot remember. This one?
[24:41] Nope. I guess I can just copy and paste the open quote.
[24:57] there we go let's see, let's go position relative
[25:18] I think I'm using the same color to the unknown I forgot to check the font size. 60 pixels.
[25:43] Not bad. I think it's bold for some reason. Well, uh, I guess it's not. Georgia doesn't have lighter phones, or lighter versions, so.
[26:04] Okay, are quotes in there correctly? These H2s have way too much space for you, son. Question is...
[26:16] Okay. Alright, I'm doing some images.
[26:29] I'll try it this way. Okay, so this one. I'm just going to flatten the whole thing.
[26:42] Grab that little bit. I can't go right to the edge because it has eyes for the edge
[27:00] Okay, and then the other one I need is this one.
[27:27] Okay, so under headings I had...
[27:56] Thank you for watching.
[28:26] Thank you Look at that Look at that smiley face
[28:47] Okay. Okay. The other one I was going to go here.
[29:18] Okay, we're getting somewhere.
[29:38] next ok let's see if i can actually cut this
[29:56] i don't need that anymore
[30:08] Okay, so these are the Calvert-Ignew regulatory flip-exels.
[30:33] Oh, is that not what I called it? I call it
[30:53] it work
[31:05] Alright. Alright.
[31:24] That's weird. Oh, because I have a strong 7 there.
[31:38] I don't know why I made that drawing.
[32:08] Then we'll take a look at the closing shot today. Let's click the stand. Alright, that's better.
[32:38] Thank you.
[33:08] Okay. You know, I've been using a different blue-gray everywhere as an accent, and I should keep
[33:36] I'm just going to keep using that one.
[34:06] I'll use that later.
[34:30] uh... he had
[34:43] uh... I forget what the PNG type of parameter is.
[35:15] X then Y
[35:45] push that to the top because underneath it now it does need an end one so I'll add one to this as well
[36:03] this is all too big it looks weird well let me preview it on a normal size monitor it's hard to design at 1200 pixels or whatever on this tiny screen.
[36:23] Okay they don't look too big on a real monitor. So it's just a matter of making all this look good.
[36:41] I feel more space on the top than the bottom. Or on the bottom than the top I should say. So let's just...
[36:57] Actually let's go 8 and then maybe go up to 12. Okay. Sorry, just checking it on the other monitor so you can't see what I'm doing.
[37:20] Oh well. Alright, that's all good. I think it's pricing now.
[37:35] Okay, so we've got those two things.
[37:57] Oh.
[38:27] .
[38:56] I'll do this. Should I do another run on this list or... I think so.
[39:26] Let's see.
[39:55] Okay, let's change this to...
[40:13] Okay, now we see a button. I'll link to Gumroad.
[40:33] I'll style them differently based on this class here. I'll find out for $12.
[40:45] let's see I'm gonna pull that on the matter of our which is so I can see better
[41:02] I hate it when my doc comes over on to the planet I have a little space as it is okay
[41:15] Let's grab that border color.
[41:45] Thank you.
[42:15] Actually I don't want that.
[42:45] So just fill this out And then we do
[43:12] Okay, I think that's pretty good. I think the only other two we'll need.
[43:26] And then... Okay, now I can click over here.
[43:46] So, like this is just in the basic package.
[44:05] And I suppose what we have important left. I don't want one to overlay on top of the other so instead of floating them.
[44:23] I don't want one to overlay on top of the other so instead of floating them. Nice. Nice. I'm going to go ahead and start.
[45:03] Okay now let's see what she did so I had to drop down.
[45:16] I added 80 pixels. No I shouldn't have that much. So I added 60 pixels. We're getting somewhere. Still a little trouble here. We're getting somewhere.
[45:29] Still a couple of them. Um, what? I just lost my train of thought. Oh well, good time for a little break.
[45:51] This is all messed up, but I wonder why. Because I'm targeting all the allies in there and I just want to target the ones that's
[46:10] possible. Okay, that's better. Okay, that's better. I don't need a giant photo of myself anymore.
[46:42] Okay. Because it's still not looking good.
[47:03] What am I doing wrong? I'll pull this back in. Do I have the same border color?
[47:20] That would be interesting. D8, I'm using blue color so actually it looks just...
[47:46] Alright, so I got to fix all this weird padding.
[48:00] I did the H3s, but I think I... Let's see, I don't want 24 pixels. What's 24? Actually, I'm just going to make the H5 24 pixels.
[48:16] Cool.
[48:46] Connect some more established buttons.
[49:06] I've got that thin border.
[49:36] Thank you.
[50:06] Let's see, where does this need to go for both button styles?
[50:36] Alright, double checking on my other monitor.
[51:03] There's some weird things going on. I'm not sure what. But basically, as you can see, there's a flicker there.
[51:16] Like my cursor's not changing to a button all the time. That might be something I saw later. Thank you.
[51:53] Actually, I want everything in there to be Helvetica.
[52:23] Okay.
[52:53] Let's get rid of the name of it. and
[53:30] okay There's that first one. I guess I need to save out the other one. So we can Photoshop this behavior and it will auto-flex the layer.
[53:47] That is downright irritating.
[54:01] Okay.
[54:23] Okay. Hey, that works. So this is bothering me. That's on two lines. What else is bothering me?
[54:36] Oh, there's no space beneath this at all. Let's just go 20F because it's on top of the bottom.
[54:50] I wonder if I need something in the HTML after.
[55:04] Actually I'll just come up here to the my content. Oh I know why.
[55:16] It's because this doesn't have a height.
[55:30] There we go. so it was just shrinking to be really small.
[55:43] Okay, this is coming along really well. It took longer than I thought it would though. Um, let me go back to Photoshop and see if I'm missing anything.
[55:57] I'm missing anything. Oh yeah, I just need to fix that.
[56:11] Oh there's no room for that. I don't know what I can do. I can decrease the font size. That works.
[56:23] Okay, I'm going to check it out on a normal monitor.
[56:35] Okay, I think we're looking pretty good.
[56:48] So on this, I'll add a little bottom margin.
[57:03] Okay, that's good. I think I'm going to work on other parts of the class now.