Portfolio Example Solutions

[00:00:00]
>> Jen Kramer: Good morning, everyone. Welcome back. We are into week two of the front end masters bootcamp. I'm so glad that you all came back. Greetings to those of you who are joining us. My name is Jen Kramer. I have been here for this past week, we've been working on HTML and CSS.

[00:00:15]
And we're gonna start today just going over some of the work that you might have done over the weekend. So as you saw, all of the videos are up and posted. You can take a look at all of those, you can work through all the exercises. And one of the last assignments that I gave you is to start building a portfolio.

[00:00:32]
And some of you who've done some really fabulous work and wanted to share a few of those with you. Once we go through these portfolios, and I'll be done here and we'll be on to Brian Holt and JavaScript and learning something entirely new. So let's take a look at some of these great portfolios here.

[00:00:49]
So this is our first one, this is from Emma, who's here in class with us in person. Emma, do you wanna tell us about your website?
>> Emma: Sure, yeah, so this is my portfolio site. I wanted to put up information on the job search right now, so I wanted to put up information about my professional projects and achievements, as well as my quilting which is probably my favorite hobby.

[00:01:11]
So I used flexbox to make these little like Polaroid photos of my quilts with little descriptions below. Eventually I wanna get better photos of my quilts in uniform sizes so it looks even better. I learned a lot about flexbox doing this, I found the color scheme on Adobe Color.

[00:01:39]
And I'm really proud of using emojis well, [LAUGH] in my header, I found the font on Google fonts. So I'm pretty happy with that. I embedded a YouTube video of me speaking.
>> Jen Kramer: Excellent, very nice. For those of you who wanna take a look at this, this is at emmay.github.io and you can take a look at Emma's website from there.

[00:02:05]
And this looks absolutely fabulous. Well done.
>> Emma: Well, thank you.
>> [SOUND] [APPLAUSE]
>> Jen Kramer: All right, so let's take a look at another one here. And this one is from Chrissy who's online and she's been online the whole week. This particular website here all about her bootcamp projects.

[00:02:25]
As you can see, she's already for JavaScript. And if you take a look at her links here, she's got an About Me page. So here's a little bit about Chrissy. You can see she's made nice use of fonts here. She's made use of some icons, probably from Font Awesome.

[00:02:40]
I would imagine. She's got a quote in here and so forth. And she's posted her book excerpt. So this is one of the exercises we did last week. This is that book chapter, she went ahead and formatted. It looks really, really great. She's done a nice job with her pull quotes, a nice job with the photos.

[00:03:01]
She's got our rounded corners, nice and consistent. And if we take a look then, she's got a contact form that's gone ahead and built. I really like the use of fonts on this one, too. She's done a very nice job, making a very clean sorta look here. So I think these links go to the same places.

[00:03:20]
And so I'm really pleased with that. It's an extra level of challenge to follow along online rather than here in class and Chrissy, you did fabulous work, great job.
>> [APPLAUSE]
>> Jen Kramer: All right, and then, Thomas Fitzgerald also online. And he's done some interesting stuff here. And I'm just gonna scroll through his stuff first and then I'll show you some of the extra things that he's done here.

[00:03:46]
He's clearly been doing a little research online. So here's a picture of Thomas here. And you can read all about his stuff. This is a Fitzwebdevgithub.io. Here's his projects. You can click through on those. And he's got his links to social media down here in the bottom. That's probably some more fun awesome icons.

[00:04:08]
Now he's done some cool stuff here with his navigation. If you click on his links here, he's jumping things down the page. Just like that. Very nice. So he's doing some in page navigation, jumping things around. He's also done some cool, I thought I had some animation in here but maybe not.

[00:04:29]
So here's an example of a code pen that he put together. That's something else he's doing here. So that's certainly something that you can do with your website, you can drop in a couple of codepen examples. Here's the form that he built in class. That probably looks familiar to a lot of you.

[00:04:52]
All right, so a very different kinda look but very nice, very clean, very usable. So well done, Thomas, great job.
>> [APPLAUSE]
>> Jen Kramer: And then we have the last one here, from somebody online, this is Iris, and this is a completely different theme than everybody else, who got kinda comic book kinda thing going on here.

[00:05:14]
And what I really like about this site is that she's got all of her areas of expertise spelled right out here on the home page. We know everything about Iris immediately. In a very short little bit of text, that's actually pretty compelling to read cuz its got a very fun formatting to it.

[00:05:31]
So she's a front end developer and a technical writer and a trainer, a coffee drinker, [LAUGH] and a jigsaw puzzler. So this is a really fun way of presenting information maybe that's something and idea that you could pick for your own website. As you can see down here on the bottom, she's got her social media, and she's got some other stuff going on here.

[00:05:51]
She's got some comic sorta stuff she's doing here. She's got some projects that's she's done. Once again, repeating that same style from the home page where she's listed her credentials. Here, she's listed her projects in that same sorta format. It's really nice to repeat those formats over and over again.

[00:06:12]
So that's really fun. Iris, one little piece of feedback on this, as you roll over, these are hover states that you've done here, and you put a border on the hover state, but you probably don't have a border on this, the regular display state and that's causing this little bit of a twitch that you see here as you roll over that link.

[00:06:31]
So if you actually put a border on all of these, just color the border the same color as the background color that you're using here, then when you roll over it, you won't see this switch, because you'll already have a border set. So border at the same width, just the same color as the background so no one will see it, but you'll avoid this twitch on Hover.

[00:06:53]
Looks fabulous though. It's really amazing how far you all have come in a week. So, well done, Iris. Great job.
>> [APPLAUSE]
>> Jen Kramer: Do you have one more? Sure.
>> Speaker 3: It's just brileyah.github.io/portfolio.
>> Jen Kramer: Okay, slash portfolio. [SOUND] Look at Briley. All right, Briley, tell us all about it.

[00:07:17]
>> Briley: All right, well, I built a modelling portfolio because that's in my realm. That's what I've got going on. I found some cool parallax scrolling that I really enjoy. There's my dog, Munchie, on there.
>> Jen Kramer: So hang on just a second, so those of you who are wondering what parallax scrolling is, that's where the image stays in place.

[00:07:37]
You see how we scroll up and down, and you can see the image gets covered slowly, so that's parallax, P-A-R-A-L-L-A-X, if you wanna put that in Google and look that up, there's tons of places that you can get the bit of code to do that. So go ahead, Briley.

[00:07:55]
>> Briley: Yeah, it's still kinda I had started on something totally different and scratch this I still am in the making but a little bit about me down there.
>> Jen Kramer: [SOUND] Sorry, all right, down here. Yeah.
>> Briley: And then you can find my social media down at the bottom, underneath that, another scrolling, then I have my actual portfolio for my modeling work as a link at the top up there.

[00:08:22]
>> Jen Kramer: Yeah.
>> Briley: And I'll take you to that, some more of the same.
>> Jen Kramer: Nice.
>> Briley: Some friend and then down below is some video as well. So that way I decide to do this. I have control over my portfolio as opposed to someone else.
>> Jen Kramer: Yeah.
>> Briley: It's a good way to display.

[00:08:43]
>> Jen Kramer: Absolutely fabulous.
>> Briley: Not the best description, but [LAUGH]
>> Jen Kramer: That's okay. That's okay. The content will come later. This is one of the wonderful things about being a model is that you have tons of pictures to choose from.
>> [LAUGH]
>> Jen Kramer: And they're really good pictures and so this is absolutely fabulous.

[00:09:02]
Well done, Briley. Very nice.
>> [APPLAUSE]