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?
- 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...
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.
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. :)
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.
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.
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.
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!
I think many people would throw money at an open source Slack or Google.
Watch out for people who literally throw money at you.
Coins are easier to throw than banknotes.
Better than peanuts I suppose.
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
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).
People with less skills than this earn 3x as much as a junior would make.
For Github: How could a newbie ever improve the code of someone who's experienced enough to create a library or framework?
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
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...
>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.
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.
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.
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).
parpostdoc@gmail.com
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.
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.
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.
©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.
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.
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.
Feel free to reach out to me for advice if you try this but need a little help.
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.
Learn about SPA, those are future oriented, and it's just starting to catch up.
* 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.
