Sharing CSS with CodePen

[00:00:00]
>> Jen Kramer: We had a lot of creativity going on here in the classroom. And I saw some really awesome stuff. Nice job, Shawn on, on slack. And so, what I'd like to do is we can share a little bit what we have created. And so, an easy way of doing that is using code pen.

[00:00:20]
We went through code pen in the internet fundamentals course. But just to remind you how we can go about setting this up and then sharing it. I'm going to walk you through that now. So the website you want to go to is codepen.io. And hopefully you've already created an account here.

[00:00:39]
If you have created an account you'll be able to share this with everybody else. If you need to log in, go on ahead and do so. There should be a log in button up there on the top somewhere. I've already logged in, that's why you can see me in the upper right-hand corner.

[00:00:54]
Then we're gonna go ahead and click on Create. And we're gonna say create a New Pen. Create New Pen. And this is gonna give you boxes for HTML, CSS and JavaScript. We don't need JavaScript so you can just sort right off the screen, all right. We just need the boxes for HTML and CSS.

[00:01:17]
Just click and drag to get rid of the JavaScript box. You can move around the division between HTML and CSS just click and drag. Now when we go back into our visual studio code, what we need to do is we need to copy our HTML. But, you do not need to copy all of the HTML you only need to copy part of it.

[00:01:37]
And the part you need to copy is the part right here inside of the body tags. So from body to just before slash body, not including the body tags but what's inside the body. That's what needs to go up on code pen. So go on ahead and copy all of that.

[00:02:01]
>> Jen Kramer: Then we can go ahead and put that on the code pen and HTML. So my HTML is starting with the line the h1 all about me. Okay, and you should be back to your usual ugly web page.
>> Jen Kramer: Right, then we're gonna do exactly the same thing for our CSS.

[00:02:25]
And in case of our CSS, we just copy the whole entire CSS document. Copy the whole document. Copy. And then go ahead and paste it here into your code pen. And your styling should go on ahead and pop up right here, on your webpage. We're still making ugly web pages, aren't we?

[00:02:59]
[LAUGH] We will get to pretty things. Okay. So this is kind of what I did here, I changed some colors, I'm pretty proud of my quote there.
>> Jen Kramer: Very nice, okay? And so once you've got that, all that stuff pasted up here on your code pen. If you go on ahead and click the save button up here in the top right corner, okay?

[00:03:29]
Once you click the save button and not before. Once you click the save button you now have a URL. And that URL you can copy. And you can share it right here in slack, just like that. Okay? So everybody can see my fabulous web page. So if anybody wants to share what they have done, I've showed you my page and my fabulous styling.

[00:03:57]
I assume yours is kind of similar to that. So if anybody wants to share, go on ahead and post your link on up there and slack and let's see what's happening. Okay, Megan. Yay, Megan. So here's what Megan did.
>> Jen Kramer: Meghan's actually got some design skills. Hers is much prettier, okay?

[00:04:26]
So she's got some text coloring going on there. Ooh, she did some cool stuff down here with tabs. You must have gotten that code somewhere off the internet, and copy and pasted it in. We will be talking about how to take bulleted lists like this and turn them into navigation bars, that will be later in the course.

[00:04:46]
So you too will learn how to do that kind of cool stuff. It is a very nice background color you have there Megan. So that's fabulous. Well done. If other people want to share here. So we got Lei. Lei went ahead and shared.
>> Jen Kramer: Okay. And so, she centered a bunch of stuff here on the page.

[00:05:20]
Very nice. She's playing around with line height and the paragraphs. You see here that the text isn't all stacked on top of each other so tightly. See how she's got some nice breathing room here? That's the line height property she's applied to the paragraph style. So she's got some good stuff going on here, well done, Lei.

[00:05:39]
>> Jen Kramer: All right, here's John's.
>> Jen Kramer: All right, and so John has played around with some font sizes here. He made some nice dashed boarders here around his around his headings. Good stuff and a different a different dash boarder around the other heading here. He's changed some, some links here.

[00:06:06]
So you see that he's turned off some underlines for links. Okay. Cool, nice, well done John. David there you are.
>> Speaker 2: One of my my changes I'm not seeing right now the border I put around the H2's.
>> Jen Kramer: Okay
>> Speaker 2: Not sure why, but
>> Jen Kramer: That's interesting. Okay, so Dave visited place puppy.

[00:06:31]
>> Speaker 2: That's a different puppy than I have on mine, mine's cuter.
>> Jen Kramer: [LAUGH] So maybe if we refresh, maybe we'll get a different one? Let's try. Nope. No, no joy today. Okay. So he's got kind of a busy background there, doesn't he? But it's a very cute puppy.

[00:06:54]
So what I would recommend here Dave, is make your text white, so we could actually read it. [LAUGH] Yeah, as you can see from this example and I'm going to pick on Dave here just for a second. We are kind of making like mid 1990s web pages today, right?

[00:07:15]
This is what we did in the mid 1990s is we put up these these background images, they tile you see how they tile going across the page and they tile going down the page. And you see that it can be very hard to read text and it's hard to pick a good text color in this situation because we have a brown dog on a white background.

[00:07:33]
So if we pick white text, it's going to wash out in a few spots, if we pick black text, it washes out in some other spots. So one of the things that we often do in this kind of situation where we really want to have this cute puppy everywhere.

[00:07:46]
But we still wanna be able to read our text is we'll actually take this, and we'll apply some opacity filtering to it to make it a little bit transparent. Or we'll wash out the picture a little bit or maybe blur it a little bit in order to make it not quite so overpowering as a background and make our text a little bit more readable.

[00:08:06]
You can also see one of the things that I did in my pen here.
>> Jen Kramer: So where I did the same idea here with the cat. So I have my words on the top or white. Worked pretty well. Underneath for my name, what I actually did was assign a background color for my text, and that would be another approach here to get your text to show up on top of the picture here when you're not really sure what the picture is gonna look like, okay?

[00:08:37]
Here we go. Same idea, same kinda puppy. Maybe it's cached on my computer. Look at that. [COUGH] So she's made use here of papyrus, and this is probably a generic cursive font, I would imagine. This is what Macintoshes do when they don't know what the font is, but the generic is set to cursive.

[00:08:59]
I think it's Zapf Chancery or something like that. So we've got that going on here. Very nice. Very nice, all right so well done everybody. I'm so glad that you had fun doing this and your code pens look great. Are there any questions that came up while you were working on that exercise?

[00:09:20]
Anything you wanna ask about? Yeah?
>> Speaker 3: What if I want to make the back down image like an image from my own computer rather than from online?
>> Jen Kramer: An image from your own computer, okay. So if you wanted to do that, you’re gonna need to do the same kinds of things that we did yesterday with the image locally.

[00:09:34]
So you’ll make an images folder, you’ll copy your image from wherever it is on your computer into the images folder that’s inside of the day two folder. So everything, this is a really important point. As you start to gather up resource to put together your website. You want to make sure that you entire website will be contained in that day two folder.

[00:09:58]
So if we were going to add some images here, we would want add an images folder. And put any images that we want to use inside of that images folder, okay? And then you can use them as background images using the correct path, or whatever happens to be, makes sense?