
Lesson Description
The "Writing Portfolio Content" Lesson is part of the full, Getting Started with CSS, v2 course featured in this preview video. Here's what you'd learn in this lesson:
Jen discusses developing effective portfolio materials to stand out in job applications. She provides guidance on creating portfolio artifacts that align with career goals, including project titles, screenshots, problem-solving narratives, and code samples.
Transcript from the "Writing Portfolio Content" Lesson
[00:00:00]
>> Jen Kramer: So let's talk a little bit about developing materials for your portfolio. Just recently, I went through the process of hiring a new instructor to work with me at Annie Cannons, which is where I work. I'm the director of learning design and technology, basically the head of a boot camp, which teaches human trafficking survivors how to code and how to build Websites, full stack web development.
[00:00:22]
And I looked at about 80 different resumes and it was really shocking how every single resume was exactly the same. There was very little that made anybody stand out. So I wanted to say a little bit about developing portfolio materials and how to tell your story a little bit more effectively than what I'm seeing out there right now.
[00:00:40]
And I'm going to point out to you that there is a link here to a Google Doc. I'll go through the information in that some things to think about as you put together your portfolio materials. I'd also like to point to Jerome Hardaway's course, getting a software engineering job, which is also available here at Frontend Masters, which has great information about resumes and LinkedIn and GitHub, AI interviewing and all the rest of that.
[00:01:06]
>> Mark: Also for free.
>> Jen Kramer: Also for free. Strongly recommend that you take a look at that course if you're serious about making a real portfolio website. So let's take a quick peek at my checklist here. I have a check list of things that you might wanna think about in terms of building this website.
[00:01:24]
So first of all, what is your goal for building this website? Typically, people are gonna think about, I want a permanent job or I just wanna get some side work. I have a real job, but I want a little bit of work on the side for my side hustle.
[00:01:38]
Or maybe I'm at a transitioning from one area of focus to another and I wanna demonstrate expertise in a specific area. Maybe I'm looking for a promotion. All of that is gonna guide what you wanna think about for your website. And I'm not gonna spend a whole lot of time on looking at this cuz I think this is all relatively self explanatory, but here's some things to think about if this is your very first job.
[00:02:03]
First time that you're perhaps you've just graduated from a boot camp. Perhaps you've graduated from college. You've never had a job in the field of web development before. These are some things that you might think about. Thinking about your new permanent job, thinking about side work. Demonstrating your expertise.
[00:02:22]
This is not a comprehensive list, but some things that you should keep in mind. You'll wanna create portfolio artifacts in order to align your goal with what you're gonna show on your website. Those two things should be in alignment, and so the kinds of materials you might wanna put together for your portfolio would include a very good title.
[00:02:45]
So the title of each project should clearly reflect the kind of work done. So, for example, a good title would be, using React.js to create an e-commerce app with physical goods. I know exactly what that is now, right? I know exactly, you're gonna have shipping issues. You're going to have inventory issues.
[00:03:04]
I know you're using React, as opposed to flare website that doesn't tell me anything at all about what that is. So unless you're working with something that's very recognizable, like you're talking about Netflix or McDonald's or IBM or anything else. It may be sufficient just to say the name of the company, but if it's not a recognizable name, you'll want to describe a little bit further.
[00:03:30]
You'll wanna have a few screenshots. Your screenshots are useful as an eye catcher, even if you're working on something that doesn't lend itself to a screenshot, like you're a database developer, you may still wanna take a few screenshots of where your data is being used. And then generally speaking, the way that we talk about this kind of stuff is there's a problem, there's a solution, and then you can spell out all the details.
[00:03:55]
So the problem was somebody identified a problem and gave you a problem to solve. Briefly, this was the solution that we came up with, and then you can tell a detailed story about why that was the right solution and how you went about solving it so forth. So I'll let you read a little bit more about that.
[00:04:13]
And then finally, a little bit about code. The easiest thing to do is just to link to GitHub, but you can also focus on smaller chunks of code. This was a really key piece of code that made this whole situation work and this is how exactly that kind of thing works.
[00:04:28]
There's an about me section. In the about me section, you're going to make sure you have a good head shot of yourself. Ideally, you're going to go to a professional photographer with good lighting, you're gonna wear something that's kind of professional looking and you'll have your headshot taken.
[00:04:47]
All the things that apply sort of generally between personal and professional photos apply here. So avoid things like strappy and sleeveless tops, avoid your sunglasses, avoid those blurry photos, or tiny photos or glamour photos or lots of people in the photo. You want the most boring photo of yourself ever.
[00:05:09]
Yes, your basic self smiling with professional clothes, okay? And I would actually argue that no photo may be better than using things like cartoons or illustrations, unless you are an illustrator and that's the kind of work that you're doing. I would also argue that no photo may be better than anything that's weird, AI enhanced or generated kind of images or anything that makes someone wonder whether you're a real person or if this is a scam site.
[00:05:37]
So that's something to think about. What to say? There's mostly three or four sentences of identifying your name, your current position, your current company, a few tools and techniques that you specialize in, the kind of work you specialize in, and a word or two about your educational background.
[00:05:55]
Yes, Mark.
>> Mark: Could you talk on the portfolio piece on what projects you should display. From your opinion, how big does a project have to be in order to be featured? If it's a small open source contribution, I don't know, kind of small versus large projects?
>> Jen Kramer: Yeah, so it all depends, right?
[00:06:20]
So if you say that you built the Amazon website, I don't believe you for a second. You did not build Amazon, but you might have built one tiny, small feature on the Amazon website, and maybe your story focuses on that particular thing. If you're at boot camp, maybe you did, in fact, build a whole entire application based on your particular boot camp, and what's going on in the boot camp, what you were demonstrating.
[00:06:46]
So that might be something where it looks like a bigger project than the one tiny thing that you did in Amazon. So I wouldn't necessarily think about scope. I would think about how well you can tell the story of the problem that you were trying to solve, the solution to that problem, and any details that you have to say about that particular problem.
[00:07:08]
I would also say that you wanna pick basically those portfolio items that would help you get the job that you're looking for. So you're a full stack developer, but you really wanna move into the frontend space. Go and focus on projects that demonstrate your chops in terms of building UI, as opposed to building databases, right?
[00:07:30]
So that's another thing to think about as you put together your portfolio, what skills are you trying to demonstrate? If this is your first job and you're just coming out of boot camp, you may have all kinds of different things inside of your portfolio and that's fine. That's absolutely fine to do that kind of thing.
[00:07:48]
What I would encourage you to do is get away from all of the class assignments that your boot camp gave you and start to focus on maybe some open source contributions. Maybe focus on some projects that you've identified and built on your own, or maybe some side work that you've done instead of just showing your classwork.
[00:08:07]
Because, by the way, there'll be a lot of people who come from your boot camp that'll be showing that same work. And then finally, there may be some other portfolio sections. These are not going to be on the site that we're going to build today, but I just wanted to mention that these are things that you may want to include.
[00:08:24]
I'm not saying that my portfolio design here is the perfect one. There may be more things that you wanna show off. So those might include, again, those open source contributions. Maybe you have some kind of formal educational background that you wanna highlight or technical volunteer work. Maybe you want a hackathon, you wanna talk about that.
[00:08:44]
Maybe you have other kinds of awards that you wanna highlight, or anything else that relates to your work as a developer and that will help you further your story and get a job. Okay, by the way, this whole worksheet that I just gave you could be a whole course by itself.
[00:09:00]
But fortunately Jerome Hardaway already made it. It's the getting a software engineering job. So this is just to help guide your thinking as you start putting together your own material to build this website. And then I would recommend if you're watching this course, you may wanna pause here.
[00:09:17]
You may wanna go spend some time pulling that information together and then come back and code along with me.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops