Take me back!! I want my CSS!! Click me to get back :)

×

Are you missing out on your dream job?

Enrollment for Skillcrush Blueprints JUST OPENED. Register today!

Click Here

Nothing to put in your portfolio? Read this!

Get the Beginner's Guide to What to Put in Your Tech Portfolio

Get the Beginner's Guide to What to Put in Your Tech Portfolio

Get dozens of resources, plus expert tips on how to build a KILLER portfolio even if you're an absolute beginner.

You can unsubscribe from our mailing list at any time. We won't use your email address for anything else, promise!

Web and product design careers are creative, ever-changing, and fun. Working to build easy-to-use website experiences, defining a company’s brand and online identity, testing how users experience a site – the field of technology has a universe of exciting career options!

But if you’re new to the field, before you can land that dream job, you need a personal portfolio. This is especially true if you are just beginning to learn new skills and don’t have lines on your resume to back up your new abilities just yet. What do you show off in a portfolio and how do you convince an employer that you are the perfect hire?

This may seem daunting when you’re just starting out, or if you’re transitioning to a new career (and… probably have no client work to include yet). I assure you though, it is TOTALLY doable! You can absolutely create a beautiful portfolio that showcases your skills and you do not need to have a long list of fancy clients to produce portfolio-worthy pieces to show off! In fact, the creation of the portfolio in itself is an amazing project to showcase your skills, if you dedicate the time to design and code it yourself.

In this two-part post, I will walk you through what you need to include in your online portfolio. The first part will cover ‘The Basics’ – simple items EVERY portfolio needs. The second part will cover ‘The Goods’ – 5 projects you can get started on TODAY, without a client.

PART ONE – THE BASICS

Every portfolio needs these basic items.

You can start building a portfolio with only your HTML & CSS skills! (We teach you all you need to know in Skillcrush 101.) Estimate a timeline of 2-4 weeks to build a well-thought-out landing page and 1-2 additional pages on your site. It’s important to set yourself a deadline – go ahead and pick a launch date before you get started and publicly commit to it! Tweet that your new portfolio website is coming soon, or tell your partner/friend/colleague when you’re going to launch your site. Your community can help keep you accountable.

I’ve known many people who start a portfolio and don’t ever launch it to show the world. And that’s not helpful in getting you hired! The point here is to launch something – ANYTHING – in a few weeks, even if it isn’t perfect. Don’t worry – after you go live with a site you can fine tune it as you continue working on it. Remember – a portfolio is never really complete. You’ll always find ways to continue iterating on it throughout your career!

Ready? Let’s begin!

GOALS:

  • Introduce yourself
  • Summarize your experience & skills
  • Tell your audience how to get in touch with you

PORTFOLIO SECTIONS:

1. About/Bio – A well-crafted bio should be the main focus of your portfolio. This will most likely be your home page. Introduce yourself to your audience in a powerful, memorable way. Writing a great bio should take more time than any other piece of your portfolio! Write a few different versions and test with friends and family. Ask them to read one of your versions and write down the 3 adjectives that come to mind after a read-through. Are those the descriptors you were hoping for? Keep refining your bio until you’re certain that the version you choose will be successful in capturing audience interest and compelling them to take the action you want (i.e. emailing you immediately to redesign their site!).

If you have a headshot, or a friend that can take a headshot, absolutely, positively include it on your site. Even getting professional headshots may be worth the (hopefully small) investment – depending on your city and the photographer, you can setup a session for about $100 (although, rates can go up to $1500 for professional headshot photographers!).

2. Social – Invite your visitor to engage with you on social media. Most people, if they are impressed with your site, will want to check you out elsewhere online. Make it easy for them to find you across social media platforms. LinkedIn is an obvious channel to include, because of its professional connections and focus on recruitment. However, Twitter is my favorite for conversations and building professional relationships. It isn’t just for updates about your breakfast, as some may have you believe! Twitter is an invaluable networking tool and the best way to stay on top of what’s happening in the industry. Plus, you can connect with potential mentors, learning communities, and even employers!

3. Blog – It’s always great to get a deeper insight into a potential candidate and their lives as well as a sense of the topics they are passionate about. Linking to your blog goes beyond the about/bio section and gives your reader a more well-rounded depiction of who you really are. If you don’t have a blog, don’t be shy about starting one now – it’s not too late! Start small, pick a couple of topics you’re interested in and write about them. Even a post on how you organize your desk tells the world something about you that they wouldn’t find anywhere else!  Totally stuck? Try this awesome topic generator from Hubspot to give you some inspiration! The goal here is to showcase your interests and critical thinking skills and most of all, to participate in the online conversation.

If you really get stuck here, skip the blog! Don’t let it prevent you from launching something. Just add it as a to-do for your portfolio version 2.0.

4. Resume – Have an updated resume you’re ready to post? By all means go ahead and post it, to make it easy to find! When I’m screening applicants, I always appreciate both an HTML and downloadable version instead of just one of the two. Make sure everything is formatted cleanly. Your future employer will appreciate this! Spend some time on styling via HTML/CSS, select web-safe and readable fonts and be succinct. Make sure the downloadable PDF version looks modern – spend some time on designing it well yourself and avoid the standard Word resume templates to help make yours stand out.

5. Career Highlights – Sometimes, you may prefer not to post your full resume on your portfolio site. That’s fine but instead, be sure to add a categorized list of accomplishments, if you’ve got ’em! Published works, keynotes/speaking engagements, certifications, podcasts, articles/posts you’ve written are great on a portfolio site.

6. Contact Info – Make sure to include an easy way to get in touch! Your email is best, but if you’re worried about getting spam, it’s okay to include just a contact box or form. The goal of your site is to showcase your skills and invite employers to contact you with opportunities, so make it easy for a visitor to your portfolio to get in touch!

Voila! Put those 6 pieces into a portfolio, and you’ve got yourself a beautiful working website! Make sure to check back every so often to test that your links work.

Need a little inspiration to get started? Check out these sites created by students in our Skillcrush Career Blueprints. When they started, they had no prior design or coding knowledge and in 3 weeks, they still created these gorgeous portfolios with the mentioned standard elements!

Camille Collard

Camille Collard online portfolio

Magali Dubourdieu

Magali Dubourdieu online portfolio

Shanna Compton

Shanna Compton online portfolio

What to expect in PART 2, coming soon! 

In the next post, I’ll walk you through 5 projects to include in your portfolio when you’re just starting out. Don’t worry – you won’t need clients for this. Every suggested project will be possible to complete on your own, with examples to help you figure out your strategy.

Interested in more guidance to create your online portfolio? Join us in a Skillcrush Blueprint and we’ll help you make a portfolio that knocks the socks off potential employers!

 

Get the Beginner's Guide to What to Put in Your Tech Portfolio

Get the Beginner's Guide to What to Put in Your Tech Portfolio

Get dozens of resources, plus expert tips on how to build a KILLER portfolio even if you're an absolute beginner.

You can unsubscribe from our mailing list at any time. We won't use your email address for anything else, promise!

Deepina Kapila

Dee is a fun-loving instructor with diverse tech experience across Fortune 500 companies, early-stage start-ups, government agencies & non-profits. Dee works at mobile product design studio Funsize, in Austin Texas where she lives with her husband, 2 border collie mixes, & 2 cats.

In her spare time she enjoys playing video games, reading on her Kindle & scuba diving in her hometown (Curaçao - an island in the Caribbean!).

Your email address will not be published.

23 comments

  1. Alicia Replied

    It’s recommended to put live links in your web design portfolio. How do you do that for “fake projects” without having to pay for each additional website?

    • Daryl Replied

      Hi Alicia,
      This is my question too! If you’ve received a response, please let me know!

    • Klaus Mana Replied

      Hey, a really easy way I have found of doing that is to put it in a place like CodePen, if it is a single page project, or use another free hosting website (000webhost.com) to host these fake projects. It is, I think the best way to do that for projects that are unreleased.

  2. Sterling Replied

    Wow so much information. Its too bad that the only thing on this list that I have is contact info.

    • Klaus Mana Replied

      Haha, just try and do some projects for hun and put them on your portfolio.It takes a little time, but it is what works best.

      • Sterling Replied

        but WHAT? that is what no one can seem to explain. Every one of these kinds of posts says “Nothing to put in a portfolio? put your experience in there”. No one can seem to explain how to put one together from nothing.

  3. dillon Replied

    this is one of the fluff pieces… a lot of nice, but looks nice. :/

  4. Sally Replied

    Simply put which makes a newbie not so nervous about what to include in a portfolio. Can’t wait to receive part two!

  5. Anjipants Replied

    This is absolutely wonderful! Thank you so much for the great tips and resources!

  6. related homepag Replied

    I relish, cause I found just what I was looking for. You have ended my four day long hunt! God Bless you man. Have a nice day. Bye

  7. Ric Replied

    How come no one mentions the fact that these companies actually want experience and whole list of projects? I have two projects and I’m pretty proficient with html5 and css3 and jquery. But when I go to interviews, they expect to see more than 2 projects under my portfolio. It’s been a tough road, but it’s not as easy as it seems getting a job as a front end developer for recruiters or companies. Don’t get me wrong, anyone can really learn html and css, but when it comes to javascript, they expect more than the basics. Frameworks are a hot thing right now and it seems like the city I’m in has the hots for angular, backbone and nodejs. So I’ve been considering making real time apps with one of those Frameworks instead of relying on making static sites with html css and jquery. I have had a lot of interviews and I’ve been really unsuccessful.

    • Angela Wyman Replied

      I was hired for freelance work with two projects… which then turned it into three projects, and those three got me the fourth, and so on. Its always tough to get started in a new field. That’s great you have gotten interviews, really! This shows you are trying and must look good on paper or on telephone. Perseverance is the trick here, if you love doing this kind of work; then you will get there, and the demand is only going up. Maybe also try networking through meetup tech groups, as often people have more work than they can handle and will help you get those first jobs. (Recruiter jobs can be a bit more competitive.) To help build out your portfolio try working on open source projects if you want developing work, or use made up design briefs if you want design work. That’s smart to learn frameworks, it sounds like that will give you an edge. Like a body builder in training, some day your developer muscles will be undeniable and the money will flow!!

  8. Meagan Austin Replied

    Great article! It was the only article that have given more of an explanation on what I can put in my portfolio instead of listing ideas. When is part two coming out? :)

  9. Kristi Henry Replied

    Great Article!! When is part two coming out? If you are beginning should your resume include jobs with no tech involve,

    • Kelli Replied

      Thank you, Kristi! Here’s part two: skillcrush.com/2014/08/11/portfolio-advice-2

      And you can definitely include non-tech jobs in your resume. Since there are plenty of skills that are “transferrable”, be sure to highlight them!

  10. Rose Replied

    Great article! Really helpful ideas. When is part two coming out?

    • Kelli Replied

      Thanks, Rose! Part two of the portfolio series is here: skillcrush.com/2014/08/11/portfolio-advice-2

  11. April Replied

    Great article! It has me thinking about how I can winnow my current website down into a lean, clean portfolio. I like the idea of including “Career Highlights” rather than a resume, because I have had so many “careers” that I need a different resume each time I apply for something. But the highlights are always the highlights.

  12. Katrina H. Replied

    This is a great article! I often think “you have to have work in order to launch portfolio site”. While that eventually could be the case it didn’t occur that taking the time to build and hand craft your portfolio site itself, IS showing your work!

    • Holly Replied

      I agree Katrina. The example portfolios I reviewed told a lot about each person, yet did not touch much at all about their tech skills.

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.