Hacker News new | comments | show | ask | jobs | submit login
Ask HN: What kind of projects should I build for a front-end portfolio?
115 points by Calist0 on Aug 28, 2016 | hide | past | web | favorite | 57 comments
I have no professional experience, so I'll be applying to junior positions. What kind of projects should I build to showcase my skills?

I'm thinking of doing re-designs of a few popular websites (2-3 pages mobile & desktop, wireframes) that I think can be improved. And then coding them into life.

Would that make a good front-end portfolio or are there better projects that I can be doing? Also, I'm new to github-- What could I contribute to on there?




I'm hiring but I've seen a lot of disappointing FE applications. These are a few things I like to see in junior candidates.

- They have built something that looks good and works. Even if it's small, I can click around for more than a minute without breaking something. It works in chrome and firefox. It isn't super ugly, or too flashy.

- They know how the web works. They know what HTTP is, what HTTPS is, they know what TCP is. Maybe they even know a little bit about handshakes, or http2.

- They know a bit about how browsers work. They know that layout and styling are different things, they know a few API methods that are provided by the browser as opposed to a library. Maybe they even know that some of those methods are blocking and what that means.(1)

What really sells a candidate for me is that they are really interested to work for us and not just some company and that they are intellectually curious. If I can nerd out with someone on a call about anything it's a huge win.

(1) - Read this, don't worry if most of it is over your head -https://developers.google.com/web/fundamentals/performance/r...


> They know how the web works. They know what HTTP is, what HTTPS is, they know what TCP is. Maybe they even know a little bit about handshakes, or http2.

People hire front-end developers that don't know HTTP(S) is? It's literally in your browser's URL bar at every waking moment you browse the web.

Even if you're exaggerating, I don't get how one comment down is someone who'd only be impressed if they saw "a re-creation of Slack or Gmail that is comprehensive and actually looks and feels like the real thing, and handles errors correctly, and handles off-line mode, and has the performance of the original" and you're impressed with knowing what a blocking function is.

I'm not a front-end developer, but I come out of these threads more confused with what employers are looking for than going in.


I'd say their standards are too high, they'd say mine are too low. :) In some ways it's like high-school vs college, they both have juniors but they are is worlds apart. This is true for companies as well. Our FE needs are relatively straightforward, the hard bits are all in our robots. In other companies FE is the product and hiring people who have no experience just isn't an option.


Ha! I was fully mounted and strapped in on my high horse thinking, "Oh man, another 'you have to be PASSIONATE about my disrupt-random-industry startup" guy.

Then I looked at your site, and man, that looks like a fun place to work, with subject matter to really dig into. Ahhh... go ahead, screen for passion, you get a pass. :)


I always have no problem with any of this stuff, and then when I get into an onsite interview they expect me to regurgitate a BFS algorithm on some arbitrary graph on a whiteboard in front of three people, then I get silently judged and asked to leave. Meh.


BFS is fairly simple.


OT: Those are some neat robots. I spent a bit of time researching warehouse robotics and the whole thing is fascinating. Do you have more info about them aside from the one on your website? I'm intrigued.


I can only speak from personal experience but here's what worked for me. Build one thing that will truly impress the senior engineers at whatever companies you're applying to. In order to be impressive, it has to solve an interesting engineering problem. Try to build it yourself. Fail (probably). Now go pick up a library that does the hard thing for you. What's great about this is that you're now very familiar with the hard problem and have ideas/opinions about it. That will make you a valuable contributor to that particular open source library. Your project will be the centerpiece of your resume, you have the lower level knowledge that will give you points during eng interviews, you've got an open source contribution that is actually impactful, and a war story for how you failed at some very hard problem (engineers love this). That is, go deep. Not wide. For me, the hard problem was real time sync of a multiplayer game but yours can be anything you're interested in. Drop your portfolio, call it a resume. Ditch the "wireframes" and don't even think about adding parallax to your site.

Edit: Your idea of recreating popular websites is also good though, I just think it's more of a shot in the dark. If I saw a resume with a couple projects recreating some sites, even if they're good, it just doesn't tell me much, just that you're basically competent and most companies are looking for more than that. But if I saw a re-creation of Slack or Gmail that is comprehensive and actually looks and feels like the real thing, and handles errors correctly, and handles off-line mode, and has the performance of the original and is open source ... I might just literally throw money at you.


Thanks for the feedback! Do you know of any interesting engineering problems that I can try solving? Perhaps a project like this:

https://haseeb-qureshi.github.io/n-queens-visualizer/ The blogger used it for his own portfolio. It solves the 'N/Eight Queen Problem'. I actually tried doing it myself using JS and I ran into a lot of problems.. My skills may not be that far along yet.


I actually tried doing it myself using JS and I ran into a lot of problems..

Excellent. Keep trying until you succeed. In the interest of giving practical advice instead of hand waving, I'll just say that the n-queens link you provided is something that I would expect a good JS developer to build in, say .. a day. You will get there, and it's OK if for now it takes you way longer. "one day" is provided, of course, that I'm not being naive about what the implementation requires. Currently I think it is a collection of JS implementations of algorithms for which the pseudocode can be found on Wikipedia + a simple simulator that runs said algorithms one iteration at a time. (Interesting that the speed can be edited. I guess that rules out setInterval) Let me know if I presumed too much :) Definitely do it for fun, practice, confidence, github, etc... but I wouldn't make it the first thing on a resume unless there's something novel going on there.

Try this: Find a thing and make it faster. Like way faster. Often, there is some operation (F) that is called many times on some type of object (X) and it's possible (perhaps using linear algebra) to improve performance by figuring out a way to express many operations on single items into one operation on many items. I.e. F([X1, X2, X3, ...]) instead of F(X1), then F(X2), then F(X3), ... and so on.


> Perhaps a project like this... n-queens-visualizer

Ugh, projects like this feel like a homework puzzles that will have multiple extant solutions. As an interviewer, I'd prefer to see something more authentic.

Is there nothing you want to see exist in the world? No actual problem you, your friends or family face that could be made easier with a little single page app? This could be something tiny like experiments for a better UX pattern for an app that frustrates you e.g. adding a friend in social network X or hashtag auto-completion etc. That lets you show creativity without committing to a large succeed/fail project.

Closing the loop of identifying and resolving problems indicates a good engineer. If you can't come up with a long list of problems you see in the world I would be concerned!


> But if I saw a re-creation of Slack or Gmail that is comprehensive and actually looks and feels like the real thing, and handles errors correctly, and handles off-line mode, and has the performance of the original and is open source

I think many people would throw money at an open source Slack or Google.



> ... I might just literally throw money at you.

Watch out for people who literally throw money at you.

Coins are easier to throw than banknotes.

Better than peanuts I suppose.


What are your showcase-able skills?

Who are you intending to showcase them to?

These "junior positions" you'll be applying for - what sort of companies are they with and what sort of work are they likely to ask a new junior FEDev to do?

Since you sound like you're just starting to get this portfolio together - and it seems like it's major objective is to land you your first FE Dev role - target it like crazy at the actual roles you're applying for, keeping in mind the sort of work they'll expect and permit a first-time junior FE Dev to do.

First thought there, if you're working anywhere bigger than a startup or 3-5 person agency, you're probably not going to be asked or even allowed to "change things so you think they're improved", you're much more likely to be required to "build another page for an existing site that fits in with all the other pages - both in styles/designs, as well as using the same framework/js-libraries/css files". Example: if you're applying to an agency that runs an automaker's website, as a junior you won't be asked to redesign their flagship vehicle's page, you'll be asked to add a new model or variant to something in their mid-level or entry-level range. You'd be better off (if I were interviewing you) having something in your portfolio showing an imaginary new Corolla model that uses the existing Toyota website's css/js-includes/bootstrap-files/whatever and would _obviously_ fit in with the existing site - compared to a innovative and game-changing new marketing strategy for the top of the line Hilux or Landcruiser - because that's _not_ what junior FE Devs get asked to do...


Thanks for the advice!

>What are your showcase-able skills?

I know html, css, js, jquery, and a little bit of php. I know how to make websites responsive. I know how to make AJAX calls (although, I'm a bit rusty). I have some knowledge of design.

>Who are you intending to showcase them to?

I plan on displaying the projects on my portfolio site for recruiters to see.

What exactly do you mean by 'target it like crazy'? Do you mean that I should create a project that relates to the company that I'm applying to?

Using your example.. I could create a vehicle page for the 'Model Y' Tesla car (which hasn't been released yet), and make the design similar to the other model pages.


Exactly - work out who you're sending your resume to and target with laser focus on them, find out what they do, and highlight your ability to do all the junior FE Dev parts of that - don't pretend to be a Creative Director or Marketing Strategist or Head Designer if there are people way more experienced that you easily findable on LinkedIn at the company (or on the other hand, if it's a two person agency or a 7 person startup, try to demonstrate that you can cover those three roles as well as FE Dev). If it's for recruiters, it's a bit harder, but try to do the same thing using currently open job ads as your guide (but as soon as you get a nibble from a recruiter, then find out who the comoany is and follow the rest of the plan).

Make sure your portfolio clearly demonstrates that you can do the sort of stuff you'd need to do for them.

For your counter-example, yeah that's the idea - but don't _just_ make it about "similar design", make sure you can explain how you've used the existing Tesla.com css stylesheet, javascript and jQuery libraries, and that your page uses the same media queries and is mobile friendly and responsive in the same way as the rest of the site.


You should decide what type of front-end position you're interested to get into; the front-end is now so broad that it's tough to know everything.

First, prove you are proficient with the following:

http://learn.shayhowe.com/html-css/

http://learn.shayhowe.com/advanced-html-css/

Here's a contest today that can test your skills

https://a-k-apart.com

Learn javascript and show you know ES5 inside and out. If you already know ES6/ES2015, awesome, show that too.

Any project where you've written the code from scratch (not using Bootstrap), where you teach others what you did, will show you're on the right track.

Want to contribute to Github? Look for a language, project, framework, library you're interested in, fork the project and improve the code. Doing this regularly, every day if you can, will show you're eager to learn and contribute.

If you're already at this level, pick up a specialty. It could be templating within WordPress, .NET or Java, or it could be MVC based coding using React+Redux, Angular, or Ember. Pick your favorite from these, get super proficient and even blog about your progress.

Finally, once you've gotten this stuff done, you will set yourself apart by learning cutting edge tech like Service Workers, Offline first, progressive web apps and just about anything the Google Chrome Developers are talking about here: https://www.youtube.com/channel/UCnUYZLuoy1rq1aVMwx4aTzw

My favorite is Totally Tooling Tips (all three seasons are gold).


Btw OP if you succeed at this guy's post, you are already a senior engineer in a lot of places, and middle-level in the rest of the more difficult places.

People with less skills than this earn 3x as much as a junior would make.


Thanks for all the suggestions! Really helpful.

For Github: How could a newbie ever improve the code of someone who's experienced enough to create a library or framework?


When you fork a Github project, you'll have to examine the code to see what it's doing and how.

With HTML and CSS, it's mostly visual but you can find improvements on semantics or simplifying what's there. If you can improve performance by rewriting a javascript function into CSS, such as animations, submit a pull request with your suggestions.

With Javascript, look for bugs and improve the code that's written. Javascript easily becomes a mess and is often referred to as spaghetti code when it becomes hard to manage.

Overall, look for ways to simplify the code, even if it means more code overall although usually it means less code. Two examples:

https://philipwalton.com/articles/untangling-deeply-nested-p...

http://www.heydonworks.com/article/on-writing-less-damn-code


> I'm thinking of doing re-designs of a few popular websites (2-3 pages mobile & desktop, wireframes) that I think can be improved. And then coding them into life.

This isn't as good as an idea as it might sound. "Popular" web sites like Google, NYT, BBC employ teams of very senior & experienced industry people. If you're going to attempt to pick apart stuff like that and give your own subjective interpretation of why your version is better... you better have the technical chops to back up your opinions.

It certainly would be interesting to see something like this in an interview as a "fun" exercise, but don't try to pass off your mocked up version as technically superior unless you can genuinely defend that position. My advice would not be to put yourself in that position in the first place, you might bite off more than you can chew. Don't force questions upon yourself that you can't answer.

My advice? Build a small site/app that demonstrates you understand how modern front end tools work (bower/NPM, gulp, SASS, uglifyJS). Maybe roll your own little responsive CSS grid. Animate some SVG graphics. Show off your flexbox skills. Use some good typography.

Make the source code available on github. Have a live demo running somewhere. Be able to talk through the various layers of the application, i.e. graphics, CSS, JavaScript, HTML.

Demonstrate understanding of the technology and that you are capable & hungry to learn more. Good luck.


I was in a similar position to you just a year ago. I landed a job at a great start up as an FE dev. I think the best thing you can do to help yourself is really to build solutions with technology you're interested in. There's no point in learning framework X just because it's the hot thing in the industry -- learn to solve problems and demonstrate that you can do so with the appropriate tools. Solve problems you're interested in solving and the right job will come to you, because solving problems that interest you means you'll do it better, and companies interested in solving those types of proteins will also he interested in hiring you. In view of this, I say, do whatever the hell you want, but make sure you DO IT WELL.

Always remember that developers are first and foremost problem solvers. We solve problems and code is our primary tool. That's all there is to it. No more, no less. Good companies hire problem solvers, not developers who can remember the redux and webpack docs verbatim.


From a JS perspective, I would be interested to know that you understand how to make requests, parse them into a data structure, and manipulate them DOM. Preferably, one project which demonstrates that you can do this without the help of a framework; another project, that you can.


Agreed. The best projects are those that make use of AJAX requests and show the programmer can organize and handle asynchronous flows.


Alright! I definitely know how to make AJAX calls and manipulate the DOM. I'll make a project showcasing this.


Things that you care about. Things that you are passionate about. Things that you can talk about literally for hours with anyone who will simply give you the opportunity.


(we're also hiring)

Another option is to contribute to open source projects. Just make sure it's visible/easy to catch by looking at your github profile (or if you have a website even easier).

Options vary from dashboards for "backend" tools, even just improving the ux, visualizations (projects like airbnb/caravel), or focusing on little details such as autocomplete or similar features.

You may loose the ability to choose your preferred stack, but viceversa you can show that you're adaptable.


> even just improving the ux

This worked for me. Learned a ton doing an overhaul of UI/UX for niche website [advanced hockey stats] that I used all the time -> https://github.com/debraid/puck

The key is to find something that motivates you and keep building/expanding on it. For example, find a popular open source project to modify/contribute to, but pick something unique to your interests. By focusing on a particular non-technical subject matter you're more likely to attract attention from places willing to hire a junior dev based on culture fit.

Lastly, find a rapidly growing firm with >10 technical employees. Places that are growing quickly (but past the seed/founding stage) might be more open to hiring junior talent.


I am also just beginning to build my portfolio as a FEDev. I volunteer at a local non-profit and when I found they were having trouble finding an affordable solution so the public could fill out and sign forms digitally, I jumped at the chance to build it. Maybe you can find a way to volunteer and create something that will highlight your skills?


The best contributions you can make on GitHub are legitimate ones: start using various libraries etc. and when you find bugs or missing documentation, open an issue or try and provide a PR.


Could reach out to local non-profits and offer to update their sites.


Upvoted, I think this is by far the best suggestion. Find a local charity or non-profit and help them get online or update their site, and add an easy way for people to donate online. Re-imagining a popular site to show off your skills seems like a vapid decision, much better to do something more meaningful. The charity benefits either way, and you've made some contacts which may help you in the future.

Some organisations may be reluctant to accept because they've tried this before and the developer moved on to other things. The charity can't be left with no clue how to update the website, so make sure you have a plan to hand things over to them. It can be something as simple as styling a Tumblr page mapped to their own domain.


You could try taking a few jobs on freelance sites. The upsides are money and real-world experience. The downside is that you (usually) can't put the code on GitHub (although you can put screenshots and links in your portfolio.)

Feel free to reach out to me for advice if you try this but need a little help.


FWIW, I'm a hiring manager.

Build ANYTHING. It's mildly more interesting to me if you build something because you were interested in the problem, but if you take the time to learn a framework (or 3) and build something with it, you're proving to me that you are capable of learning and are interested in doing so as opposed to just showing me the projects you worked on in college.


I am in the same shoe,I need entry level front-end job. I am currently going through freecodecamp.com. My intention is to become employable but I read a comment that mentioned things like building gmail and other exceptional projects. I really need to get a foot at the door.


I would love to see how much you can do with not much at all. Anybody can make a great-looking site, but can they do it in under 500kb? See https://a-k-apart.com/ for tips!


Brought to you by Microsoft Edge, in association with An Event Apart.

©2007–16 Microsoft

Microsoft!? That's one of the last companies I'd think would sponsor something like this. It seems they really have changed a lot.


I judge developers on their ability to solve problems. Aimless coding does nothing to satisfy that. Get some PRs approved for useful open source projects and I'll be impressed. Even adding test coverage or documentation would be good.


Look into angular and react, and do at least 2 side projects to show off that you have some experience. Moreover, you should know some of the jquery.

Learn about SPA, those are future oriented, and it's just starting to catch up.


Another great way to showcase your skills is to team up with a designer who did a recent redesign of Google/Skype/Amazon/etc and turn that into a working thing.


Please redesign two of my web properties. I can provide two directed projects, real-world experience and both design and code experience.

As a CTO/startup founder shipping something is the first thing I look for.

Also, I wish your github was linked here. I would have spent >5m looking at it.

Contact via my profile.


I sent you a message via your site.


Down voted for providing opportunity?


Are you stronger as a designer or a programmer?


I am in the shoe. I can code C Lang(advanced learner), but working to become intermediate. I currently play around Javascript. Why asking for such specific ?


It's great to have both skills, but it's better to be good at one than mediocre at both. You should double down on what you're good at for your portfolio.


Would you actually consider doing an outsourcing job for a reduced fee ?

Probably a react site. It has a few pages of dynamic elements (charting, real-time updates). You will be starting it from scratch.

We cant really help you with visual & appearance stuff. But we will build the server/algorithm side of things.

You can claim full credit for this & get paid (not a lot at this stage).


Is this offer open to other FE guys too? :)


Yes - why not. But i would like to give the OP a chance to reply ;)

parpostdoc@gmail.com


I'd like to know more about what you need done, and I'll let you know if I can help. I sent you an email.


Nice opportunism


Some tips from somebody that has done lots of interviews and has also interviewed others:

* Use technologies they have in their stack. There are websites that help you find out what technologies companies are using to build their product. For client side code it's not very hard to find out by yourself, look at the source, look at the libraries that get loaded, beautify their code and have a look at what gets imported. Try to find out if they use react, backbone, angular or something else ... when you have found out, use those libraries for your project. When building your project use as much of those technologies to show them that you are familiar with the technologies they use.

* Make something related to the company you want to apply to, if you want to work for a game company, don't make a blog about cooking recipes, make a game ;). Try to find the idea for a tool that does something that is related to their business. Show then that you have taken the time to look into what they do. Maybe that prototype you have created will be so impressive that they may want to transform it into a real project after hiring you.

* If they have an API, use their API to get data for your project. Don't do a project that uses dummy date. Use their API and try to create something new using their data. Use the data they use for their product but display it in a different way, to show that you thought about what can be done with that data. So copy or create a page or tool they already have but try to innovate using their API. Or even better do a mashup. Combine their API with another one to create something new that is more spectacular than just using their data. Or if you can, grab their data and enhance it, for example by sorting it using some intelligent algorithm.

* Not that important but always worked well for me ... make something fun :) Try to avoid making a tool that is boring. For example let's say you want to apply at twitch, then don't just make a page that lists the top ten streamers, but make a page where people enter the name of two streamers and then a dust cloud appears with some fighting sounds and after your code has compared the stats of both streamers, a winner gets displayed. Ok this is not super fun ;) but it's an example, I guess you get the idea. If the people that review you, have a smile on their face while testing your project, it's a good thing and will help them remember you.

* Also not so important, but it can still make the difference, try to make something beautiful. Don't just apply some basic css rules to your project. Yeah developers will tell you the most important is code quality, but I'm sure that some good code that outputs something beautiful, will always be better than just some good code. People and even developers ;) also judge with their eyes. People might be unconscious of it, but I'm sure something that looks good, helps to give the feeling that it is actually good. If you don't have the skills yourself to make your project look good, than ask a friend to help or ask somebody on the web to help you.


[flagged]


And just like that, I now know what it feels like to be discriminated against based on race and gender :/


but look at the bright side, you get to sit at the front of the bus!


Is this a solution to the problem? Probably not.


Unfortunately I'm very white!!




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: