Ask HN: As a Front-End Dev., what should I show on my portfolio?

Try this:

A dual column layout : on the left a screenshot of each of your best work and on the right a written explanation of why what you did benefitted the client. Turn each one into a three or four paragraph case study of why hiring you helps the project manager, Dev Lead or business owner.

A write up should cover the business need (40% of people who started filling in the quotation form did not complete. I rewrote it in AngularJS reducing the number of screens, improving response time and auto-filling some sections, and the completion rate rose to 78%. This gave an increase in leads of 30 per month)

Or

After their original contractor failed to complete, XXX hired me with two weeks to delivery to finish the site in time for the restaurant opening. After a full and frank day of discussion and designs we had agreed a reduced feature set which I delivered in time.

If at any point you can work in something like "this site is written in AngularJS which enables professional looking functional work like this to be created in less than 15 minutes - see this wistia video for a screencast where I show you" you get extra points.

Basically sell the benefit to the other person, not show how much you know about JavaScript. The person wining the cheques does not even know what a curly brace is for and so assumes you are an expert already.

Ps - put a big professional photo of yourself I the site, smiling. That seems to be a thing now on freelancer sites

I think the portfolio site itself should show off your skills. As a front-end dev, it isn't enough to just have clean, semantic HTML and clean css and js. You are getting ready to build a site where you can and should experiment with various technologies that you have interest in, but haven't had the opportunity to use them in a project yet.

Have a section dedicated to "current front-end experiments" where you just build cool stuff and show it off. Take things you are particularly proud of, try to abstract them to their core idea, and throw it on github.

I am going to agree with another user that you need to show proficiency with a front end framework, either Angular, Backbone, or Ember.

Also, a blog attached to your site where you discuss working on your experiments is nice too.

What do you currently send prospective employers when you apply for jobs as far as code? Throw that up there too.

I've been applying for jobs recently and don't have a portfolio site. I've been getting interviews just from my resume,one project that I built start to finish that I still manage, and a few small angular apps that are super simple. So if you would rather build a functional purpose built site, that is OK too.

I am not saying that devs shouldn't have portfolios, but I feel that they are more necessary for a designer, because that is one of the only ways they CAN show their work.

I do not know your specific audience which would see this site, are they customers directly, or would you be using this to show work to get hired at a company?

These have slightly different focuses. A customer centric site I would think would focus on things you can do which would help the customer. For example, I setup a Wordpress Install, which automatically does X, and the theme matched, etc. These people are unlikely to do a in depth technical review of what exactly your code looks like.

A company on the other hand, will tend to pay more attention to it. They could run your HTML through a validator, look through your CSS, and evaluate your JS coding style at minimum. They could also run the site through Pagespeed, or webpage test. They could check not only if all the above is done properly, but that you are leveraging caching, concatenation, and minification. They are much more likely to ask you very specific questions on the above.

In general however, I find that just listing your technical skills is 'OK', but writing a brief statement of the skill, and what it allowed you to do, is likely to get you better results.

Your point about your work being taken offline or altered after hand-over is important here. Make a habit of including in your contracts that you are permitted to keep a copy of the work for demonstration purposes (where possible) and use that for demonstration.

Don't aim to show all of your work. Instead, select your best pieces which demonstrate the depth of your skill for each of the key areas you wish to demonstrate you can do. Select pieces based on the complexity of the project, or the way you approached it. I would recommend including a picture of the site/product as a companion to a succinct description of the technologies and frameworks you used. Include the benefits of the solution you implemented.

You could show some relatively small (such as 600x250) images of parts of live sites that you have worked on, with those images showing some parts that you feel more responsible for having done, without having done the whole site. Those images would also link to the sites themselves. They would have a small caption saying what you actually did for that website.

make it pretty

you don't have to have soft-ware-ified things to show your design skills. you design and then code-ify. the physical portfolio can look kickass in a binder with some glossy prints. you don't need to list tons of sites so people check all your pixels or css lines, but so people get an idea of your creativity and passion

if you can present someone with a pretty tome of cool web-esque ideas they'll probably see you're legit.

just think of this as another project =)

my friend's buddy applied to this advertising firm's designer team lead position and his resume was the only one that was completely pink (pink paper). he got the job so.

it's the little stuff

A gallery of apps developed using Front-End technologies (Qt, XAML, Xamarin, Cocoa, Android GUI API etc.). Demonstrate the ability to choose the right tool when GUI quality is not important (HTML) or is important (native).

It's pretty obvious they're talking about front end web development.

Are you sure though? "...show pictures of websites and apps I've made..."

Ah true, didn't catch that. Saw angular & HTML5

Demos of front-end AngularJS modules.