How to Build a Junior Developer Portfolio That Will Get You Hired

if like me you don't have a computer science degree or maybe you have no previous work experience but you want to become a junior developer building a portfolio is probably the best chance you have of standing out it's kind of crazy because just two or three well-placed nicely packaged and described projects on your portfolio can send such a strong signal to an employer about your ability to do the job your enthusiasm and i think it also shows employers that are someone without formal education this isn't just a hobby for you that being said there are some alarmingly common mistakes that new developers make on their portfolios like using skill charts showing too much bravado when really you should be expressing your humility and teachability and one more thing i'll mention is sort of listing tutorial projects almost like they're your own don't do that in this video i'm going to show you what employers are looking for in a junior frontend web developers portfolio based on things i've learned hosting the scrimba podcast speaking of experts on twitter and crucially i will be showing you not one not two but three example portfolios from junior developers who were recently hired in the last 12 months we'll be using those as concrete examples and teaching opportunities this way you know what i'm talking about actually works because these developers have actually gone on to find work along the way we're also going to explore whether you need to build and design your portfolio from scratch or if it's okay to use a template my name's alex let's get into it before we jump in and go too far i want to implore you to think about the objective of your portfolio probably it's so that you can stand out in front of an employer and get your first junior developer job maybe it's to find freelance clients but the important thing is that you nail your objective because that is going to inform every decision we make next if your objective is indeed to become a junior web developer then to satisfy that objective you need to demonstrate some competence enthusiasm commitment and humility in other words you want to demonstrate your potential this is something i want you to keep in mind as you decide what projects to build and how to describe and position yourself on your portfolio i would also encourage you to think about how to stand out and be a bit more memorable by trickling some personality and character into the text on your website the copy as well as your design but alex i'm not good at design me neither i mean i'm a self-taught developer not a designer i think it's important to acknowledge and respect that those are two discrete skills yes it is true that the best-looking portfolios have a nice design and yes it's also true that even if your focus is code the best front-end developers also appreciate and understand and have some acumen for design and user experience but let me remind you humbly you are not the best developer today you are an aspiring junior and the rest will come a big part of many junior web developer roles is taking designs and converting them into responsive websites why then would the employer care if you're good at design your job isn't to design the website is to convert the copy and i think if you want to be good at design most employers will recognize that you are going to sort of absorb that knowledge as you work on more projects with experienced designers but it could also be that you don't even want to be good at design maybe your passion is more on the behavior or interactivity side the javascript side of web development and in that case it's not even reasonable to expect that you'd be good at design this is where the template argument comes in because if you don't have design skills it's possible you're going to inadvertently hurt your opportunity if you don't lay out your information clearly the most important thing and i i want to stress that to you now is the content of your website which is made up primarily of your projects but also the text and copy on your website such as your description these are great places to let the employer know where you're coming from where you want to go and sprinkle in your personality but ultimately if you don't have a couple of good projects there really isn't much point in having a portfolio because you could be served by other platforms like linkedin and so forth so what makes a good project for a portfolio it's a very legit question here's what i've observed speaking with senior developers hiring managers and newly hired developers on the podcast and spaces and things like that i think on one end on the more basic end you could build something like a advanced calculator i'm thinking of like a salary calculator for deducts tax contributions or something you could also build like a coffee to water ratio calculator for coffee enthusiasts that's a perfectly good type of project for your portfolio and maybe you agree it's relatively basic compared to some more production level apps on that end of the spectrum you know one student at scrimba built a home schooling app because they were homeschooling their son while learning to code now this to me feels like a great project because it solves a specific problem that person can tell a story around the problem it also feels more like a real not real app but it feels more like a project or a product versus a utility and that's what makes it like a really great project but the truth is everybody's at a different place not all junior developer jobs are made equal if your project falls on either end or in between that spectrum i think it's a good project for your portfolio the most important thing honestly is that you apply some degree of polish like ideally it's going to be responsive maybe you'll deploy it no matter what i feel like it should look relatively polished another question you could ask yourself is you know where did you get stuck and how did you overcome that if you got stuck that means you are pushing your skill level and that's drive that's something you can write about in your project description on your website and it's also a story you can tell during your interview both of these will make you more memorable and i also feel like again if you are struggling that means you're pushing the upper limits of your ability in the introduction i kind of mentioned you know don't kind of claim tutorial projects as your own you wouldn't pass that litmus test about did you get stuck and how did you overcome it because you had a tutorial you had a guide you had the key you wouldn't really pass that question and so it might not make a good project for your portfolio with that in mind let's look at some junior developer portfolios that actually enabled these students to get jobs and i'm going to be very honest these portfolios are good they're really good but they're not perfect because they are juniors right and and that's okay i think so often we set such high standards for our portfolios thinking they have to be the absolute best reflection of our work and that causes like analysis paralysis but we don't actually make progress towards our goal and that's a big shame in my opinion i'm going to show you a variety of different portfolios from junior developers with different skill levels and slightly different interests and objectives i'm not here to review them as such but i would like to highlight some of the things they did well things you can consider and here and there i'll sort of suggest things we could learn with the benefits of hindsight each of these three students who created these projects have actually featured on my podcast the scrimba podcast where we talk a little bit about their approach to their portfolio and what the employers actually ended up thinking about the portfolios and work once they got their foot in the door and got the job we're going to start with alejandro from canada who by the way featured in a mock react js job interview with myself and a scrimba teacher named cassidy williams you can find a link to that in the top let's have a look so right away we have a very clear description about alejandro that shows enthusiasm because they love it commitment because they're a lifelong learner and also a little bit of personality as they express their love for tradition neapolitan pizza when you apply for a junior developer job or put your portfolio in front of an employer it's either going to be someone from the hr side or it's going to be another developer hr people in particular i think are going to want to see a list of your skills which is why i think it's really smart that alejandro has featured them high and proud in their portfolio this way the hiring manager can sort of connect the job description to your portfolio i like how alejandro further describes themselves here and offers a link to continue reading for anybody that might be interested so far this structure is really really good now if you've ever thought about whether you should write in the first person or the third person which can sometimes sound really pro i would say always write in the first person unless you're a conference speaker and even then one nice little pattern i see some speakers do is offer a tab for different versions of their bio by chance cassidy williams who did the interview with alejandro and i this is how she presents her description on her portfolio okay so here's the really important part the projects of the project portfolio the first thing i like is how alejandro has featured a fairly compelling and clear screenshot along with a list of the technologies used this kind of reinforces the skills we saw at the top which i think makes them more credible and further expands on what alejandro can do for the employer there's also a short description of the project which i think is non-negotiable ideally the person looking at your portfolio can understand everything at a glance they shouldn't really need to go and click the project and we'll talk about that more in a second but first i want to highlight how there is a view project button that takes you to a dedicated page for each project most people don't do this but i highly recommend it because like alejandra does here you can expand a lot on the sort of purpose of the project a little bit about the technology stack and things like that moving on i think you should aim to deploy your projects and offer a link to that project but as i sort of alluded to ideally the reviewer or employer i should say has seen enough screenshots and read enough about the project but they don't really care about clicking the link beyond just verifying this is a real thing and it exists the reason i say this is because you can't exactly predict how the reviewer is going to experience your website for example they could be using a weird browser or maybe they're a bit unorthodox and run into an educated bug within a few seconds even if it wasn't totally fair it's not going to leave a good impression and there's no need for it since it's your website and you can control the narrative i'll also add that you want to make things as easy as possible for the person looking at your websites learning how to use your app or assuming it's a bit more ambitious if there's a login or registered form or something it's just too much work for an employer who's going through a few different candidates and so this is where the screenshots and maybe even better yet a video can come in that's a really good idea by the way if you can record a two-minute presentation about your project show your personality a little bit and how well you can present or at least practice that that's unique not many in fact i've never seen that on a junior developer's portfolio going back to the main page here alejandro includes their email and a getting touch button which takes the user to calendly as a junior actively looking for a job i probably wouldn't use calendly because really the recruiter or the hiring manager will want to be in control of the workflow and the calendar tool and the calendar invitation and that and that kind of thing and this is because they're going to be fitting you in among other candidates a lot of the onus on scheduling is on them still it's a smooth experience and a cool tool to consider i might replace the calendly link with a contact form as i'm starting to learn it's a good idea to have both a contact form and an email address is a few more things alejandro did very well that we can all learn from it sounds obvious in hindsight but alejandro is using a custom domain which is something a lot of people overlook they'll use like a netlife or it gets a pages a reversal sort of sub domain likewise there's no certificates errors or anything like that this might sound a bit obvious again but in reviewing portfolios i will often see inconsistencies in the design and in alejandra's case you know all the images are nicely sized they're not stretched or awkwardly cut the design is breathable the font and the colors and the presentation are consistent throughout you don't have to include a photo in your portfolio absolutely not but if you do you want to look approachable and friendly like alejandro after all you want someone to approach you for the job right the only other little criticism i would add is that if alejandra was actively looking for a job they have a job now so it's not as important i would recommend they make it easier to find their resume but i like this idea to mention the resume on the about page because someone might dart there to learn about alejandro before realizing what they really wanted is the resume ellie from australia recently got their first developer job they even dropped out of college to learn web development with scrimba and then build this portfolio as a way to stand out so it's very cool to see as you might kind of get the impression ellie is a bit more design orientated and that's reflected in her portfolio you can see that ali has opted not to include a photo like alejandro but an illustration instead that's something you could consider doing too in general i like the idea of having a call to action above the fold maybe ellie could have used a more descriptive label like see my work but you know that's a bit of a nitpick i'm not really in a position to comment about someone else's developer skills i don't feel like but what i would say is that the projects do look a little bit more basic than alejandro's which is which is absolutely fine because not all junior developers are in the same place and ali found success they found a job they get to continue to grow and build more exciting projects while getting paid so i think we owe ellie some appreciation for that because they've done a fantastic job sort of taking all their efforts and highlighting it without overthinking it and and sort of you know filtering it too much the first thing ellie's done is include her portfolio project which is not contentious but there are two schools of fords josh in his book for example says you shouldn't do this in my opinion if it's one of your more significant projects as it appears to be for ellie you may as well include it and i think in ellie's case in particular her website if you scroll to the top also has a digital garden and now page which i think could honestly be their own projects and so it makes total sense in this case and while ellie hasn't got a dedicated page for each project she did write a short description which is always appreciated and i like that they've put an emphasis on the technologies because it shows like an enthusiasm for these newer technologies like mdx and an appreciation for concepts like dynamic images these are actually not you know obvious i would say like they stand out a little bit i do think it would be better if there was a dedicated page but again this is good and it doesn't matter what advice people offer right because a lot of people have opinions about what makes a good portfolio but ellie got a job with this portfolio so we know it has to be you know pretty good something else ellie has done which i think is really interesting to highlight is they have included a to-do app and a movie search app which they credit in part to the front-end developer career path here at scrimba which if you don't know our main thing at scrimba is that we have a career path aimed to take you from not knowing any code to being at a hireable level for a front-end web developer you go through html css javascript react and there's even some modules about interviewing and things like that it's all very interactive project driven so you remember what you learn and obviously we have like this youtube channel our podcast and a bolstering community around the whole thing anyway we don't really suggest that you include projects on the career path in your portfolio unless you give credit not because we need the credit but because it just reflects better on you that you share credits and likewise if you expand upon it and i really like that in this case ellie has sort of expanded on it and talked about how they've refactored the code base and optionally perhaps you know added a new feature or presentation to it i also really like this idea of having something that's coming soon because it kind of gives you a bit more meat in your portfolio and it conveys that you always have a project on the go which i think is a positive signal i just want to point out right off the bat that karen is using a versal sub domain so you know clearly my advice isn't that good the point being ultimately that there is no golden rules and these are all just ideas at the end of the day your portfolio will play a part in your broader job hunting strategy and karen found a huge success actually because they encountered a job description asking for two years of experience karen had less than two maybe one one in a bit and applied anyway after interviewing they literally hired him on the spot sort of proving these requirements don't mean anything to the individual and honestly maybe this portfolio as part of his wider strategy and was a help we'll talk a little bit more about that in a second but just want to point out that this says namaste which is nice because karen is from pune again karen hasn't included a photo which is totally fine scrolling down a bit we see quite early on that karen has a degree i really think that if you've graduated and that is no small feat and you've paid for the privilege you might as well milk it for what it's worth and talk quite prominently about your degree is that could just be a green light for some employers even though that sounds unfair for self-taught people i don't think it hurts you if you don't have a degree i'm just saying if you have it you might as well take advantage of it again karen includes a skill list which i totally support the only one small bit of feedback i would offer despite this beautiful presentation is to add the technology names beneath the logos because a non-technical person is going to look at this and think it's a leaf and think what is that not knowing it's probably for db it just so happens that a friend of ours is scrimber annie the bomb who's been on a live stream with leanne and joined us for twitter spaces and things they're a bit more of an experienced designer they had a similar idea and this is this is al overlay this is how they sort of executed on the idea so you can check out her portfolio for a bit more inspiration even though they they've been at this for a little bit longer and more design orientated looking at the projects karen has a few projects and again highlights the tech which is good for all the same reasons it was good for ellie in this case you'll only see links to github which i honestly think is acceptable again it would just be better if there was a screenshot and a longer description and a live link and things like that because a non-technical person if they click through to github in this case they aren't going to have a clue how to run this and if you are talking about a technical person a technical recruiter or a developer on the team they're not going to want to run it because they're they're in a hurry and have other candidates and things like that still a portfolio is just a tool in your wider job hunting strategy and and karen's beautiful it's very clean and nice which is a perk and it's easy to understand i'll also kind of add that just by virtue of having a portfolio you are at least unique and you will probably stand out because the majority of new candidates don't have portfolios so i again i'm really emphasizing that you don't need to be dogmatic about these things and you can also iterate a website isn't like a book right when you publish a book i kind of end the authors because they shut the page and it's done but code basis projects they're always evolving and as a result you can iterate on your portfolio as you continue to improve you just don't want to be in a situation where an opportunity crosses your path but you don't have a portfolio because you were overthinking it and so what if you started with links to github but then refactored and rebuild the section at a later date maybe that was karen's intention before they ended up finding success success unexpectedly best part about this is how karen is not linking to like every project they've narrowed it down to five and then added a you know button which says check my other projects on github in general i would say two or three projects is the minimum on a portfolio and again you might be able to pad it out a little bit like ellie did with the coming soon which has its own perks um but probably five is the maximum because beyond that it's just a bit hard for the person viewing your project your portfolio to know where to focus and so if you have five or more you might need to kill your darlings and pick the projects that you think will best represent your work and increase your chance of reaching the objective we set out at the very beginning well there you have it those are the three portfolios i intended to show you i hope you've learned a lot by sort of running through them i've tried to highlight i think some of the most important things as well as some areas to improve i think it is better to give you some real examples than just sort of run through a checklist now if you do want a template there is no shame in it as i said if you're not design orientated that shouldn't hurt you and also you want to be ready for an opportunity should it present itself the content i said is also the most important thing and so you could start with a template to nail the content and again fourth point reiterating you can iterate on the portfolio right and so yes you can check out themeforest for portfolios there's also a few bootstrap ones i'm going to link some resources in the description another really good resource i can recommend to you is this twitter thread called portfolio review friday it's actually a hashtag it happens every friday it's run by someone named shashi and i don't know if it will still be running when you watch this video but what i do know is that those tweets aren't going anywhere and they are a treasure trove of advice knowledge and inspiration because you can flick through the submissions of other people's portfolios have a nosey see what you like and what you don't like and then you literally get to read feedback from senior engineers who are involved in the hiring process i think that's super important i also finally want to give a huge shout out to josh carmel's book because i've read it and you know it's longer it'll take longer to consume in this video but it is probably the best resource on the web for anybody who's looking to break into tech and build a junior developer portfolio it's very generously free as well and you know josh is a really cool guy he's been on the scrimba youtube channel with leanne in the past as well so very happy to recommend that resource and of course if you want to polish your front-end skills to build even better projects you can check out scrimba and the front-end career path my name is alex thank you so much for watching if you've made it this far please do remember to like the video as well as subscribe to the scrimba youtube channel because we as a team we upload and stream weekly about learning to code and breaking into tech hopefully i'll see you soon

Channel: Scrimba

Views: 140,992

Keywords:

Id: 9eMp8l4WEpE

Length: 22min 47sec (1367 seconds)

Published: Tue Jan 11 2022