About Me Section Content

[00:00:00]
>> Jen Kramer: All right, so now that you have done all of this work pulling together all of your information that you're going to want to put on this portfolio website, we are going to start by coding the about me section on the website. And I typically use a program called CodePen while I'm teaching.

[00:00:17]
I really love CodePen for a couple of reasons. It allows us to write our HTML and CSS and see it applied to the page immediately in action. The other piece of it is that I don't have to worry about files, folders, dependencies, or any of the other things that go into web development.

[00:00:36]
We can just get in and start coding. So I'm not suggesting that this is a fantastic development workflow for a professional developer, far from it, but this is great for education. So we are going to start with this about me section. So I'm here in chapter 3 on the website, and we are starting with part 1, marking up the HTML.

[00:00:59]
And I as I say here, I've given you some starter text, the SVG images and a photo. We're gonna talk about how to mark it up. Your social media icons may vary, you can get social media icons a lot of places on the internet. I actually went to Font Awesome.

[00:01:16]
Let me just show you this real quick. If you go to Font Font Awesome, let's say that you're looking for the GitHub, we can just do a search for GitHub. And it will give you, here's a few choices here for a GitHub icon. And if, say you like this one, you can click on it and then scroll down.

[00:01:40]
It will give you the option of including this in a bunch of different ways. The HTML version is if you've actually linked to the font Awesome Font. The thing that I'm suggesting here is you actually go to SVG. And if you just click on the code, that will actually copy it to your clipboard, and you can drop it into your HTML.

[00:01:59]
So Finalism has got tons of SVGs, it was like 50,000 odd. And so your social media icons are probably in here and they're probably free to download. But again, there's a lot of places you can get SVG on the web. All right, so we're going to start with the beginning CodePen here.

[00:02:19]
And your screen probably looks like this, if this is the first time that you've ever used CodePen. Make sure that you sign in. And the way I usually like to work in CodePen is, up here in the upper right corner, there's a button that kinda looks like a cupcake.

[00:02:37]
Looks like three different boxes on the top and a bigger one on the bottom. If you click that, it will give you the option of putting your code on the side. I usually find this better for working in HTML and CSS, because, of course, we like to change the size of our display screen to see how things are doing in responsive view.

[00:02:55]
So that's what I've done to set up my coding environment here. And we are going to start with our HTML, because great code in the web starts with HTML. And we don't care what it looks like because this is HTML, CSS is what makes it beautiful. So let's just focus on it going from here.

[00:03:17]
All right, so starting with this particular text that you see up here on the page, what would be the most important thing that you see here on this webpage? Anyone wanna take a guess? Most important thing that you would see here on this part of the web page, yeah.

[00:03:34]
>> Speaker 2: The photo?
>> Jen Kramer: The photo is definitely really important, but it may not be the most important thing. What would be the most important piece of information? It's a portfolio website, yes.
>> Speaker 3: Your name?
>> Jen Kramer: The name of the person is the most important thing. So in this case, this is Brissa.

[00:03:53]
And so therefore this gets our h11. My goodness, yes, that is the second line of text here. And it is possible that this may, in fact, happen, your h1 is not the very first thing on the page, right? What is the second most important thing here on this page that describes Brissa?

[00:04:14]
Yeah.
>> Speaker 4: Her title.
>> Jen Kramer: Her title, front end developer. So we're going to give that an h2.
>> Jen Kramer: Perfect, okay? Once again, we're not worried about how this looks, we just want to get the right markup in place. Then we're going to have some blah, blah here, right?

[00:04:34]
It's gonna talk all about this person, that would be a paragraph of information. So shockingly, we'll mark that up with a paragraph element. Okay, then we're gonna get to our SVG. So this is basically how you copy the SVG right from Font Awesome. And the one that I have here, it looks like I just put in a bunch of SVGs without links around them.

[00:05:01]
So we'll want to put in some links around these SVGs and we'll also want to think about the right markup for this. So in this particular case I've got, I think this is blue sky, LinkedIn, GitHub and I think email, was the order that I had these in.

[00:05:22]
Yeah, the GitHub, LinkedIn, and email, they're all outrageously large because we haven't styled them yet, so nobody panic, it's totally fine. This is a list, right? An unordered list of SPGs. So we're going to mark that up accordingly. And I will start with,
>> Jen Kramer: Our unordered list, right?

[00:05:48]
So we start with an unordered list. And because there's likely that we'll have other unordered lists on this website, I'm going to give this a class, just to keep things simple. I'm calling this icons because I'm creative that way. Then I'm going to give this a list item, which is our li, and I'll give it a link, a href =,
>> Jen Kramer: And then maybe you have a blue sky link.

[00:06:29]
>> Jen Kramer: This happens to be mine. I'll have it open in a new window.
>> Jen Kramer: And then that link is gonna end after the SVG.
>> Jen Kramer: Okay, all right, so what we have here is an SVG, the picture. But we do not have any kind of text explanation for someone who might be using a screen reader.

[00:07:01]
And that is very important to add. So there's a couple ways that you could handle this with SVGs. You could use various ARIA types of attributes. But one of the simple ways of doing this is, believe it or not, with the title tag. And you can just use the title tag, give it the name blue sky.

[00:07:23]
Generally speaking, you're gonna want that right after the SVG element name itself. You give it the title tag here, and you'll see that the word blue sky does not display over here on the web page. So title, then, is a word that will be read by the screen reader, but it doesn't actually display on the web page, which is exactly what we want.

[00:07:46]
There's all kinds of other ways, like I said, you could use various ARIA elements. You could put in spans and then visually hide them with CSS. There's all kinds of other things that you can do. But honestly, this is very simple. So that is what I'm going to recommend.

[00:08:00]
And the other thing that I'm going to do while I'm here is to my SVG, I'm going to add a class of social, okay. And the goal of that will be eventually we will wind up styling these as social media icons. All right, so, does anybody have any questions at this point as to what I've done here and why?

[00:08:27]
Started it as an unordered list, we have individual list items. We have our SVG, we made it accessible, and we assigned a class. Any questions? Yes.
>> Speaker 5: Can we also use an alt attribute in this context for SVG?
>> Jen Kramer: So an alt attribute in an SVG, which is a great question.

[00:08:47]
If you are including your SVG in the image element itself, so you're pointing to a file that may have the SVG in it, that certainly works. The problem with using the image element that contains your SVG is we cannot restyle it. Here, I can now give this a color, as you'll see when we get to the CSS part of it.

[00:09:07]
I can give my SVG a color, I can give it a hover state, I can do all kinds of different manipulations with it here. If I have my SVG coming into an img element with the alt text, I can't manipulate it in any way. Great quesion, yes.
>> Speaker 6: That social class, is that your CSS class that you wrote, or is it some other class?

[00:09:29]
>> Jen Kramer: It is a CSS class that will write, I haven't written it yet, but yes.
>> Speaker 6: Cuz it looked like the image shrunk a little, I'm not sure.
>> Jen Kramer: Well, it probably did shrink a little bit. You"ll notice right here, there's one tiny dot, that is from my list item.

[00:09:44]
[LAUGH] I haven't marked these other ones yet to include my list items, and so it probably bumped over a little bit from the side because of that. What I would do at this point now, rather than sitting here watching me continue to type? I would continue to mark up all of my links, I'm going to continue to add titles to all of these differents SVGs, and I will continue to mark these individual list items.

[00:10:11]
My list will end right down here. I will end by li and I will end my ul down here at the bottom. And I'm gonna show you my finished version of this, so that you don't have to sit here and watch me type the entire time.
>> Jen Kramer: This is my finished version of my HTML.

[00:10:36]
So I have my h2 here, my h1, my paragraph of information. And then I have my ul class with icons, my lis, titles, and so forth, all the way down the page here and down to the image at the end. And this is how it looks over here on the HTML side.

[00:10:58]
You'll see my tiny little dots here, that's from my list items.
>> Jen Kramer: And the picture down here at the bottom,