
Ask HN: What kind of projects should I build for a front-end portfolio? - Calist0
I have no professional experience, so I&#x27;ll be applying to junior positions. What kind of projects should I build to showcase my skills?<p>I&#x27;m thinking of doing re-designs of a few popular websites (2-3 pages mobile &amp; desktop, wireframes) that I think can be improved. And then coding them into life.<p>Would that make a good front-end portfolio or are there better projects that I can be doing? Also, I&#x27;m new to github-- What could I contribute to on there?
======
iandanforth
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...](https://developers.google.com/web/fundamentals/performance/rendering/?hl=en)

~~~
tinalumfoil
> 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.

~~~
iandanforth
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.

------
lopatin
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.

~~~
Calist0
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/](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.

~~~
lopatin
_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.

------
bigiain
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...

~~~
Calist0
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.

~~~
bigiain
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.

------
technojunkie
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/html-css/)

[http://learn.shayhowe.com/advanced-html-
css/](http://learn.shayhowe.com/advanced-html-css/)

Here's a contest today that can test your skills

[https://a-k-apart.com](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](https://www.youtube.com/channel/UCnUYZLuoy1rq1aVMwx4aTzw)

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

~~~
Calist0
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?

~~~
technojunkie
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...](https://philipwalton.com/articles/untangling-deeply-nested-
promise-chains/)

[http://www.heydonworks.com/article/on-writing-less-damn-
code](http://www.heydonworks.com/article/on-writing-less-damn-code)

------
reitoei
> 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.

------
natnai
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.

------
restlessdesign
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.

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

------
aaronbrethorst
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.

------
ecesena
(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.

~~~
DeBraid
> 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](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.

------
skraelingjar
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?

------
xeniak
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.

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

~~~
tombrossman
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.

------
nfriedly
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.

------
rbrcurtis
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.

------
ejanus
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.

------
thomasedwards
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/](https://a-k-apart.com/) for tips!

~~~
userbinator
_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.

------
tootie
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.

------
gamebak
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.

------
kemuri
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.

------
edoceo
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.

~~~
Calist0
I sent you a message via your site.

------
m1sta_
Are you stronger as a designer or a programmer?

~~~
ejanus
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
?

~~~
m1sta_
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.

------
parpostdoc
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).

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

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

parpostdoc@gmail.com

~~~
Calist0
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.

------
chriswwweb
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.

