7 Portfolio Tips for New Developers

Here at DigitalCrafts, our students receive career support as part of their bootcamp experience. In this process, we provide guidance and feedback on student resumes and portfolios to help get them recruiter-ready. Students can also participate in mock interviews, practice whiteboarding and gain access to our ever-growing list of hiring partners.

As the Director of Career Services at DigitalCrafts, a big part of what I do is individually review those resumes and portfolios. I offer advice on content, layout and wording on resumes, and I go over portfolios to make sure that students highlight their work in an easily understood and compelling way. We've even put together a Career Services Toolkit, which outlines how to do everything from crafting your portfolio to passing a technical interview.

I've always encouraged students to follow the portfolio guidelines in the toolkit, and I had the chance to use them myself when I enrolled in our part-time Flex Program to stretch my skill set. Like any other student, I was required to create a portfolio.

When I set out to build it, I thought I would follow the guidelines provided in the Career Services toolkit to the letter. This plan was, however, almost immediately derailed. It turns out that my first attempt would never pass my own review!

After the experience of building a portfolio on my own, I wanted to share what I've learned both as a career advisor and as a new developer myself.

Portfolio Tip #1: Plan Ahead

I wasted a lot of time getting started on themes and then changing my mind and starting over. That's understandable, since your portfolio is something that you want to represent yourself and your work in the best light. To build one that's right for you, you need a plan. It's important to really sketch out your ideas and let it sit, so you can be sure you're heading in the direction you want.

Look and what other people are doing, and if you are angling to be a front-end developer or designer, it's important to be caught up on the latest trends in web design. That doesn't mean you need to have the loudest, most cutting-edge theme. This is, after all, something you want to be relevant for a while, without having to constantly update based on the latest fashion.

It does, however, mean that you should be aware that light backgrounds and sharp edges are common. Some places I looked for inspiration before setting out are Themeforest and Dribbble.com. Codyhouse also has a lot of really cool features you should incorporate.

Portfolio Tip #2: Don't Use A Template

I'm no designer, and I immediately felt overwhelmed by the idea of building a portfolio from scratch, so I opted to follow a template. The Career Toolkit advises against using a template, and it turns out that's for a good reason. Following a template was a mistake. I ended up gutting it almost entirely, which left me with a lot of code I didn't need—and a lot of wasted time.

As I was working through my portfolio, I realized I could have (somewhat) easily built my own. It's a static one-page HTML layout, not the complicated endeavor I had built in my head, and building your own is also a good HTML/CSS refresher from the first weeks of class. Furthermore, because I used a template, no matter how customized it was, I had to credit the author.

However, I recognize that some people are as stubborn as I am and that I can't convince everyone to start from scratch. So, if you know you can't put together a visually appealing landing page to save your life (or just don't want to), let me save you some time:

Don't waste a lot of time searching for "the one."

I waded through a bunch of spam-filled free WordPress and PHP template sites getting too scared to download anything before finding some legitimate sites that fit my criteria. Startbootstrap.com has a limited but good selection. Plus, you can fork all of their templates in GitHub and get started right away. Freebiesbug.com has a bigger selection, and you can search based on language. I personally ended up going with a simple design from bootstrapious.com.

Portfolio Tip #3: Make It All About You

I will be the first to admit that I am minimalist to a fault. The sooner brutalism dies, the happier I will be. So I knew going in that I wanted a simple, easy whitespace design. But what I ended up with was a boring portfolio, lacking in any sort of personality.

Don't make the same mistake! Include things that are specific to you, and why you like to code. I opted out of a landing section, but that's a good place to show what you are all about.

Too often I see people leave stock images in this important, attention-grabbing section. When I review portfolios, I always think, "Cool, that is a beautiful image. Now tell me what it has to do with you. Are you a photographer? Do you like hiking?"

If there's nothing that relates a cover photo to who you are, you need to change it. And if it does relate, don't leave the reader wondering! Include a sentence or two about it in your bio.

Portfolio Tip #4: Use A Custom Domain

Custom domains are cheap, easy, and professional-looking. I went with a commercial site, bought a domain and after a few minutes I had my own site ready to go. I deployed to netlify.com so that changes to the GitHub repo will be automatically updated, saving me time in the future.

There are many other versions of this story that you can try for yourself, including options from AWS. If you're not ready for this kind of commitment, you can set up a GitHub Page from your repo and it will be free forever, but without a custom domain.

Portfolio Tip #5: Icon Consistency Is Important

You need icons for your skill section and contact info, and you want them to be consistently styled.

Font Awesome is, in fact, awesome. Link it as a style sheet and you have access to over 3,000 logos at your fingertips. Flaticon is another great place for free vector icons. They have more creative options and you can get themes in packs.

Portfolio Tip #6: The Details Matter

Your portfolio is meant to feature your projects and you need to make them visually appealing. The details mean the difference between a subpar portfolio and one that makes you look like a pro:

• I often see distorted thumbnails, which is an easy way to turn someone off of a project you've put a lot of hard work into. There are lots of different ways you can style with CSS to make sure this doesn't happen, depending on how you are styling this section.
• Load times are important—40% of people abandon a website that takes more than 3 seconds to load. Make sure your images are small so that your page doesn't take a long time to load.
• Easy on the animation. Yes, animation is cool, but too much is distracting. Don't overdo it, and have things run once instead of on a loop.
• Check your copy! It's easy to put in an extra space or wrong word when writing in your code editor. Any word processor will do. I personally use Grammarly.
• Have someone else look at your portfolio. If they aren't a programmer, that's even better. You may only take into account 10% of their feedback, but that makes your portfolio 10% better.

Portfolio Tip #7: Give Yourself Time to Add Polish

Making a portfolio, like every other coding project I have ever done, took more time than I thought it would. There are a million little things that you can do to make your portfolio the best possible version, and those take time. Think about adding these:

• In addition to a good-looking functional live demo, you also need to have a well-done, descriptive ReadMe file that includes screenshots and code snippets.
• Try out different color schemes and positionings to see what looks best.
• Remember to change the title in your HTML.
• Make a video walkthrough of your projects to make the biggest impact.

Once you get the biggest things out of the way, you can start focusing on these details. All of these things coming together is what creates a professional site and will impress employers.

Are you ready to take the next step in your career and become a developer? Download our course packet for more information about our full-stack web development bootcamps.