Up next in 10
Build a web developer portfolio that STANDS OUT!
2K views
Feb 7, 2024
"Build a web developer portfolio that STANDS OUT!" is a tutorial video aimed at aspiring or seasoned web developers looking to create an impressive portfolio to showcase their skills and projects. The video likely covers various aspects of portfolio creation, including design, content selection, presentation techniques, and tips for making an impactful impression on potential employers or clients. Viewers can expect to gain insights on how to differentiate their portfolio from others in the field, ultimately increasing their chances of landing opportunities in the competitive web development industry.
View Video Transcript
0:00
And one of my recent polls on portfolios, a couple of people dropped some links to their portfolios in the comments
0:06
And I decided we'll do something a little bit different today. So we're going to actually take a look at one of those
0:10
And I'm going to kind of show you how I would approach looking at a portfolio website, share my thoughts for this person to maybe consider updates to their portfolio or things that I like
0:22
So you can kind of see my thought process and how I would evaluate a portfolio that was shared with me
0:27
And hopefully this review will also help you. with your own portfolio to give you some ideas of some things that you could do or maybe some other
0:35
things that you might consider changing. So we're going to be taking a look at a portfolio by Dieter
0:39
Hillier. I'm not sure if that's how he pronounces his name. And I hope he's good with this because he
0:45
shared the link. So we're going to be taking a look at it. Initially, when we first arrive at his
0:51
portfolio, I mean, I like the color schemes and stuff. It looks like it's a pretty clean look and feel
0:57
this button down here, the back to top, functions, but it does look a little bit weird with the styling
1:05
And I did notice that, like, you know, it flexes out and everything and kind of changes and stuff
1:12
And that probably needs to be addressed. If it's, you know, when it's in a more responsive view and stuff
1:16
you know, maybe, you know, changes up so that it just says like top instead of back to top so that it's not like a wonky button
1:23
But things are, you know, responsive, which that's going to be, Good for a web development perspective
1:30
That's a skill that you definitely want to have. All right, let's start with the About Me section
1:35
For years, I've searched for a career that would provide me happiness and the freedom I crave. Ever since leaving the United States Marine Corps
1:41
I struggled to find something that fulfilled my professional life. Eventually, I began working in the tech industry as a systems administrator
1:48
and discovered a love for code. Afterwards, I immediately began studying and educating myself on web development
1:54
Now I seek to become a web developer and cannot wait to provide my services and skills to the world
1:59
I'm always seeking to learn new things and strive for success. All right, I guess what kind of stands out to me in my first initial impression here
2:06
is that there's some statements in here that kind of suggests some doubt is going on
2:13
Focuses a little bit more on maybe weaknesses rather than strengths. For example, you know, where you're saying that when leaving the Marine Corps
2:21
I struggled to find something that fulfilled my professional life. in this particular situation, he should probably try focusing more on like the positive
2:30
like maybe some perspectives he gained while being in the Marine Corps
2:35
Maybe something like due to my experience in the Marine Corps, I always strive for perfection and excellence in everything that I do
2:43
Rather than talking about how he's struggled to find that fulfillment, because I'll just put some doubt in the eyes of whoever is looking at this
2:52
And then eventually I began working in the tech industry as a systems administrator and discovered a lover code
3:00
Maybe not talk so much about the journey from going into the tech industry as a systems administrator and that you discovered code
3:07
But maybe you could share, come from it as a systems administrator, here are some of the skills that I have, in particular a passion for coding
3:22
And then you can talk about, instead of saying afterwards immediately, I begin studying, educating myself on web development
3:28
Instead, start just jumping into focusing on the skills in web development that you bring, the things that are going to be really helpful to a customer
3:38
I try and focus this section on you're talking to a customer or potential client and you're trying to convince them of how you're actually going to be of benefit to them
3:50
So you want to let them get to know you, but you also want them to see the value that you're going to bring to them
3:58
Instead of focusing solely on like you, like your journey, like the things that you're hoping to get
4:04
same thing goes for resumes. All right. There's a what I offer section design
4:09
I have extensive knowledge and web design and fundamentals such as color theory and typeface with the ability to include responsive designs
4:16
I'm also familiar with bootstrap, tailwind, and WordPress. code. I currently know the fundamentals of JavaScript as well as utilizing event listeners in DOM
4:24
These tools allow me to construct websites with features such as API, scroll animations, and much more
4:30
I think that, you know, a lot of people, if you're talking to like a manager who is maybe not someone who's actually in software
4:38
they might not even know what you're talking about when you're, you know, saying utilizing event listeners in DOM
4:44
And if it is someone who is a more experienced software engineer who's looking
4:48
at this and they're reviewing, they're going to know what those things are, and they're going to be
4:53
kind of pretty like shallow things that aren't in depth. So I'd focus more on kind of down here
5:00
how you're talking about like some of the stuff that you've worked on. Like you have skills with
5:04
you know, APIs, different things like that. Talk about like maybe like the frameworks that you've
5:08
worked with. Have you worked with React? Have you worked with Angular? Have you, you know, what kinds of
5:13
things have you built? Have you built mostly websites or have you built single page applications
5:18
stuff like that that will kind of give a better idea of like the breadth at a larger skill
5:24
because it's going to be assumed that if you've worked with those, that you're going to know some of the basic things like the DOM
5:31
and using event listeners and stuff like that. Search engine optimization is important for any web-based business
5:37
I know how to organically attract leads to your site with my SEO specialization skills and keep you ranking in Google Now that something a lot of people probably aren going to have on their portfolios or in the resume as experience
5:51
It's actually something that's really good to know some of the fundamentals of search engine optimization
5:56
especially if you're going to be working or trying to work for companies that are building
6:00
like information sites where that's really important that they get indexed. So I have a little bit of experience with that
6:06
So something that I would look for here is, you know, let's see what kind of buttons
6:11
links they have. Okay. So the skills section. Okay, so up here you're seeing the hashtag skills
6:19
That I would probably hope if you're really shooting for like SEO and stuff that this might be
6:26
like, you know, programming skills or JavaScript skills, something a little bit more specific and
6:32
targeted than just skills because it's really hard to know what kind of skills you have. And
6:38
that's something that I would want to see if it came to you know SEO so he says he has extensive
6:43
knowledge in web design and fundamentals which does somewhat contradict up here the statement where
6:49
he's saying that he's seeking to become a web developer and then using these tools so i try to
6:56
align your terminology here for consistency and then let's also just see what he's actually
7:03
going to be using here okay so i'm going to come up
7:08
into the head section and just kind of skim through here and see what's going on whether it's
7:14
with like styles because what I'm looking for here is I want to see okay is this a website that he
7:20
has built himself or is this a website that he is using that's like some other template and it looks
7:27
like so we have a link to Webflow CSS and we have some more Webflow stuff and if you aren't
7:35
familiar with Webflow it's one of the many. different website builder tools out there where you can go and kind of quickly create a website
7:42
using just like kind of drag and drop stuff like that or like existing templates whatever
7:47
I haven't personally used web flow so I don't exactly know how it's different from some of
7:52
the others just that there are a bunch of these out here so what that tells me is that this
7:57
website is not a website that he has made himself now it kind of depends on what you're going
8:04
for and we'll kind of take a look at this in a minute because he
8:08
does have up here, you know, like pricing section and some other things like that. So
8:13
there are a couple different approaches for your portfolio. Are you trying to sell yourself to
8:20
get a actual software development job for another company? Or are you going down the freelance
8:26
path? If you're just starting out and going down the freelance path, then I think it's a good
8:30
idea to actually try to build your portfolio site yourself because there's a good chance that
8:36
someone like me, if I was reviewing it, that I would want to jump in and actually see
8:40
okay, did you do this? Like, how are you doing things? You know, are you using, you know
8:44
semantic HTML and to get a fill for your code just by inspecting and seeing what's going on
8:49
And in this case, I'd be like, oh, it's not your code. Okay, so you just lost one opportunity to
8:55
really present to me what it is that you can do. You're trying to sell your skills to software
9:01
engineers, they're most likely going to go and inspect your portfolio site and just look under
9:07
the hood to see what's going on. So now we have his portfolio section. Garden of the Gods
9:13
this site is built in dedication to Garden of the Gods in Colorado Springs. I experimented with
9:17
typeface design, form function, and added a weather API to update the current conditions of Colorado
9:24
Springs. I plan on adding hotel search API in the future and polish the design. Okay. So
9:31
So this also kind of goes back to what I was talking about in the About section
9:37
There's a little bit of stuff here that kind of suggests weakness instead of focusing on the strengths, right
9:43
He probably doesn't need to tell me that he's, you know, planning to like polish the design
9:48
That tells me that he's not satisfied with the design and his skills and that this probably isn't ready to be shown
9:54
So I'd actually just leave that off. I mean, especially if you're starting up. And that he experimented with typeface
10:01
designs. I would definitely highlight some of the stuff that's going on in here, but not necessarily
10:08
I wouldn't say I experimented with. You'll be just more bold or matter of fact of, you know
10:15
like this site, you know, includes and, you know, have your list of things that it's including
10:20
But just try to avoid words or phrases that really emphasize your newness, your lack of experience
10:28
It's not that you're trying to cover up for that. I mean, it's going to be pretty obvious in talking to you and that you're building a project and some of the types of projects that you're building, you know, whether you're new or not in the kind of position you're going for
10:39
But, you know, don't focus on, you know, the weakness. All right
10:45
He has a link to the site. Okay, we aren't going to just like deep dive into these other sites
10:51
I just wanted to make sure that that link works. And we also want to see where his code goes
10:58
so his code is taking him to, you know, GitHub, which is cool because then it makes it easier to kind of look at the code and stuff like that
11:05
So I like that JavaScript game, designed for desktop only. Again, here you're emphasizing and focusing on, sorry, he is emphasizing and focusing on some of the areas of weakness and stuff
11:20
There's a good chance that some people are going to just look at this, read it, and might not even go to the site or go to the code
11:26
and so I just leave that off or say you know desktop JavaScript game you know but I probably just leave it off and have JavaScript game If it comes up oh this isn responsive and stuff
11:39
You know, like, yeah, I was, you know, building that for desktop and leave it at that
11:42
This tutorial project showcases my ability with JavaScript and DOM. The game itself is mainly attempting to get a score 100
11:50
Each player takes turns rolling dice. Okay, so my question here is I'm not familiar with this if there is a tutorial out here
11:58
but they say in this tutorial project. Now, if this is just a matter of, like, copying a tutorial project that's out there
12:07
then I would question, like, what is the value of actually applying that here
12:12
Like, it's one thing if you were to do a tutorial, and you were to get inspiration from it and take the things that you learned
12:17
and then you apply that to something else. For example, in my last video
12:21
where I was actually talking about some of the projects that I did, I talked about how I had done a lesson in one of the books that I was following on
12:27
JavaScript that talked about building a battleship game. And then I ended up with this idea for this
12:34
other game that would utilize some of the similar principles, you know, namely like how to use
12:40
like the arrays and stuff like that. But then I came up with my own game that was completely
12:44
different and that was completely original to me. And then that is a true reflection of something
12:50
that I did. Right. I went and I learned some skills. Then I took those skills and applied it to my own
12:57
thing. So I can call that something that I did and something that I learned. And maybe he has done that
13:03
here. I'm not sure. But if it is just a matter of following a tutorial, then really that code is just the
13:11
code of the person who provided the tutorial. So does that actually speak for, you know, demonstrating
13:17
the ability to do JavaScript and DOM here? Maybe he took the instructions and he actually did and
13:26
looked at the picture and then he coded this and did that without looking at like the examples and
13:31
stuff and got it working that's really cool or maybe he just followed along and typed it in
13:36
word for word we just don't have any way of actually knowing that so squarespace would be again
13:42
kind of like you know the web flow i don't know the difference is between the two as far as like
13:48
the features that they offer so in this particular example he helped set up a website for someone else
13:55
not necessarily wrote the website from scratch or the infrastructure. So, I mean, it's fine to have like that as like a skill that you offer because it is experience, right
14:08
Or like if you like set up a blog for someone and you're managing it, you know, and it is on WordPress, you know, that does require some technical skills
14:17
especially if you're going in and actually like customizing like the templates and things like that
14:21
But it really depends on what you're focusing on, right? if you're trying to sell yourself to people who need that help and just want smaller websites and want them customized, then this could be valuable
14:31
But if you're trying to get into more of like an enterprise situation, this is not going to be as valuable as skills where you're actually building stuff from scratch
14:40
And so if that's the kind of thing you want, one of those enterprise positions building applications, then I would focus less on this, maybe drop it down, have its own section, like farther down, have its own section that is like
14:53
other like skills and services and stuff but de-emphasize stuff where you're just using other builders
14:59
that are out there old portfolio my old portfolio site i focused on CSS animations and attempted
15:05
to polish my design skills while building this project so that makes me wonder is this old
15:10
portfolio one that he actually built himself There's a good chance it is
15:26
I mean, there's a little bit of like padding issues here. There's some similarities, but it looks like he went to like switch it over to something that's a little bit, you know, nicer looking and stuff
15:40
Maybe with some of the other animations. See the end. Okay. And you'll notice in the head here, it doesn't have like all of the other stuff that was going on
15:51
There's a lot more stuff in here that comes built in with Webflow. to just handle stuff around like icons and other things like that
15:58
So my guess is this is the website that he built. And I would personally, you know, actually run with this and polish this up a little bit more
16:08
and use your own portfolio rather than going with the Webflow stuff
16:16
I just think it would be, you know, better for you. You know, better for him
16:20
Food site. This project consists of mimicking a food delivery. every subscription service built from a tutorial this project mainly allowed me to hone design and html skills
16:30
okay so again so here we're following a tutorial to build this not actually like you know building a site
16:37
and then he's focusing here on describing how it allowed him to hone his designs in html and css
16:45
which kind of again contradicts you know the extensive knowledge in web design fundamentals and you know
16:53
some of the experience up here because it's you know just demonstrated that oh here's
16:59
another like tutorial that was followed okay well again did you end up just look at
17:04
the picture some basic instructions to build it on your own or did you copy everything
17:08
word for word you know it would probably be better to be like okay you did this follow this
17:12
tutorial now you going to go out and build your own food site that you can you know demonstrate that you actually did those skills without you know just pulling over that code from someone else This Bootstrap project showcases the design of
17:26
the e-learning site, utilizing Bootstrap as able to form a modern layout that will be sure to bring
17:33
in clients due to ease of access and information. Okay, and this last part, you know, he's
17:40
talking a little bit more towards like the customer, what I was talking about earlier, where you
17:45
to focus on the value that you're delivering to an actual customer or to a company
17:51
And that you're starting to see in, you know, this last sentence
17:55
But in this first part, it talks about, you know, he has able to form, utilizing bootstrap
18:01
was able to form a modern layout. I wouldn't focus on, you know, bootstrap here as like the main thing about the site
18:10
Like, because a lot of times, you know, if it's a customer, they aren't going to know
18:13
if as a software engineer, they're going to know about bootstrap. But that's not necessarily
18:20
what I'd emphasize here. Now, I hope he doesn't like take it as personal. Because some of the stuff that I've
18:26
said and I've been talking about here, I'm probably guilty of two in my first
18:30
portfolio website. It's not until I've had more experience that I look back
18:34
and think about some of the things that, oh, I would totally do that differently if I was
18:37
starting over. Concepts for future projects. Social media clone. Camping. e-store and e-commerce. Okay, what I like about these two is that they do target more of a
18:51
commercial intent, which is going to be really valuable. I think it's good to start out with projects
18:57
that are smaller and tied to your interest as your first learning. But if you really want to sell
19:02
your skills to someone to a company or to clients, then you want to be able to demonstrate that
19:09
you have experience in the areas that they're looking for. And that means having
19:13
commercial intent, which those would be some good ideas. But if he's going to do this, I'd highly encourage him to build stuff
19:21
These are pretty big endeavors. I would say, like, you know, pick one of them and actually build it, but don't just, like
19:28
follow a tutorial. Right now is a concept design and stuff. It's not going to be, like, super, you know, important here
19:37
And then social media clone, it's like, okay, so that would be just another example of just
19:41
copying something else, which kind of like. like has a trend here when you have like all these kind of like tutorials and stuff that are being
19:49
fault they just cast some shade on stuff here of like okay you can follow tutorials but can he
19:55
actually you know build stuff on his own that's really what I want to see in the portfolio
20:02
is can he build stuff on his own and this is going to bring me to something else that I
20:07
touched on briefly earlier and that is what is the intent of this site because it fills
20:13
like it's trying to do two different things or appeal to two different audiences
20:20
Up here, there is this section on pricing where he's offering some services
20:28
So Squarespace site, basically helping to configure a square space site, which is totally
20:38
cool if you're trying to go down the freelancing path. SEO enhancements, okay, and then custom site construction
20:47
So, and free consultation. So this looks like he is pushing more towards freelance work
20:54
which there's nothing wrong with that, except for that the main portfolio is a mixture of something that you would do
21:04
to try to sell to a potential employer to actually get a job at a company
21:09
as well as clients who are freelancing. And I really think that he needs to do one or the other
21:15
and or actually split these out into two different portfolio sites. Because first of all, if he's trying to hopefully get a job
21:24
as building software for another company, and they see here that he's also trying to do freelance stuff on the side
21:32
there are going to be some companies that are going to be turned off to that because they're going to question how much commitment you're actually giving
21:39
to them. Are you going to be double dipping on time and some other concerns there and you just
21:44
would want to avoid that. Now if his primary goal is to become a freelancer, then definitely he needs to
21:53
like update the portfolio to focus on what he offers to the customers to get rid of the following
22:00
the tutorial stuff because that's just going to, you know, shoot him in the foot when it comes to
22:04
getting clients because it will scream, you know, amateur. And again, they aren't going to care
22:09
about, you know, that like you're talking about the DOM or some of those things you want to
22:16
actually speak to them about, okay, here's a responsive site that's accessible, you know
22:21
for people with disabilities that improves whatever it is that, you know, the customer is
22:27
looking for or that they need. So there is definitely some mixed messaging going on
22:34
here that I would hope to see actually get addressed. All right, a big thanks to Dieter for willing to put himself out there in the spotlight
22:42
so that we could take a look at his portfolio and give it a review
22:46
and wish him well in his search for success in software development
22:51
If you like this video, be sure to give it a thumbs up and consider subscribing to let me know
22:56
if you want to see more videos like this one. If you're interested in seeing those projects that I did that helped me get that first job
23:03
then you should watch this video up here. Thanks for watching and I'll see you in the next one. Lates
#Resumes & Portfolios