If you were applying for my job, some projects I would recommend to have in your portfolio

First, I'm not a hiring manager. I don't have any part in the hiring process beyond reviewing your work. My thumbs up to the Hiring Manager doesn't mean you get the job - it just means I think your work will fit in with what we do.

Second, this is specifically for MY JOB as a Frontend Developer at MY COMPANY. The requirements will be different in other companies. But the core techniques you learn from these tutorials should get you pretty far.

Finally, this was a (cleaned up) email to a local developer who wanted to know what to expect if they were on my team. It's my opinion, and not the end-all, be-all at my job.

Let's begin.

Expectations

Have a portfolio

A blog post about what to have in your portfolio, also includes your portfolio? INCEPTION indeed. There's in fact lots of applications that don't make it very far because they don't have a portfolio! I don't care how you build it. You can use vanilla HTML/CSS/JS. You can use a framework to quickly scaffold it. Doesn't matter.

Maybe you're in love with design. Or maybe you love minimalism. Maybe you blog. Or maybe you just use it as a achievement list of your projects. All of this is helpful for understanding who you are.

What you do include in this Portfolio site are:

1. Projects you're proud of. (Hopefully the ones I included here.)
2. Your github/bitbucket repos with code.
3. Some nice background information about you.
4. Nicely written semantic HTML & CSS.

What this tells me:

• What type of person you are.
• How you write frontend HTML code. (Is it semantic? Or is your site littered with <div> tags?)
• How you write CSS code. (Are you using modern CSS, flex/grid?)
• What type of framework you used - if any. (Did you impress me by using a JS framework? Or did you just build this with SquareSpace?)

Build a really attractive website

Show me you can copy designs (70% of my job is recreating sites from a designer's file)! Recreate one of these landing pages, rebuild a WordPress theme landing page, or even recreate your favorite website like Nike.com. Use Webpack, Snowpack, Parcel, Rollup or your favorite build tool! Set up the project in github, and recreate the site using your favorite CSS framework (Bootstrap, Bulma, Tailwind, Material, etc), and deploy it on something like Vercel, Netlify, Heroku, GitPages, etc. Also check that it looks good in mobile/tablet/desktop view!

What this tells me:

• You have design skills and understand CSS pretty well.
• You understand mobile-responsive design.
• You can use a CSS Framework.
• You understand build tools to compile your JS code.
• You can deploy sites without handholding.

NOTE:
This is the bare minimum. One of the tests is literally building a website.

Deploy a WordPress site locally and customize it

There are many tools for this— Local by Flywheel, MAMP, Docker. Go into themes and do something with it. Modify the navigation, make a template-part, or have it dump out user data based on the user logged in.

What this tells me:

• You aren't afraid of PHP, or at least figuring it out.
• You did your research and know our stack and can jump in quickly.
• You can google and do research on how to implement something.

Javascript Projects

If you haven't done Wes Bos' Javascript30, do it now. I thought I knew JS and was blown away at what I didn't know. Build a few JS toys. A video player is always fun. And the keyboard is really nice. Or maybe a API that pulls movie data.

Go the extra mile and build a React/Vue project, or show off a bit of JQuery. (This is a good tutorial.)

What this tells me:

• You're proficient at Javascript.
• You understand Javascript, and the difference between React/Vue/Jquery.
• You follow the Javascript world and care about building cool web projects

A project with clear commit messages & comments.

This is not a project, but a exercise. There's a lot of opinions on how to write comments and git messages. I like the 7 rules of great Git commit messages because it explains 'the why with examples', rather than just rules of thumb because somebody said so. There's no agreement on Clean Code Vs Comments. But the point is... write clear enough instructions so another developer can pick up what you dropped off.

Include a readme.md. Include how to build the repo.

What this tells me:

• You know how to use git.
• You care about readability.
• You aren't afraid of writing code publicly.

Make a multi-page website and include Flexbox/Grid & SCSS.

I see so many one-page test sites. Show me a freakin' real website! That means a site that has multiple pages, like an About Page, a Home Page and some other stuff. You can do it simply with server-side web development (like a index.html, about.html, etc), or pick one of the many many sweet Fullstack JS Frameworks like Gatsby, Nuxt, Next.JS, Svelte, Eleventy, Astro -- google them and read the docs)

Vue is really hot in my circle - Vue's Community Guide. But React is the industry standard - Wes Bos React for Beginners. (If you're going React, use:
React->NextJS or React->Gatsby).

Include SASS as part of your project. As a front-end/web development, Sass is like a vital skill to know. It has a very low learning curve, and will make your life easier. This is an okay video... couldn't find any great tutorials. Better yet, read the documentation.

What this tells me:

• You know how to use a build tool to compile your SASS into regular CSS.
• You can organize your design code.
• You know how to read documentation.
• You know modern Javascript.
• You are on the cutting edge of web development.

Optional but why not?

My job isn't looking for these. But why not have these in your toolbox? Being able to do these things tells us that you are better than the average web developer.

Show me some Node projects!

Build a NodeJS project that sends email. Or show me you aren't afraid of AWS. Heck, do a full-stack node project!

What this tells me:

• You know the difference between Javascript and NodeJS.
• You can build cool tools outside of front-end

You know the city lingo

In my city - show me that you are flexible beyond JS. Ruby on Rails and PHP are still big here. There's a .Net community here too. Full-stack with Ruby on Rails + HTML/CSS/JS, or PHP + HTML/CSS/JS. Laravel (PHP framework) is incredibly popular in many businesses. Follow a tutorial and build something small. Just seeing it in your github will make me smile.

What this tells me:

• You are driven to being a well-rounded developer and you're not just chasing the money.
• You care about the dev scene

Write some blogs

"If you can't explain it simply you don't understand it well enough." Nothing impresses me more than someone who can articulate their process and hand off a document to someone else. There's enough blogs that explain why.

It doesn't have to be a college thesis. Look at this post and how casual I write.

What this tells me:

• You can write in human words!
• You have exceptional communication skills.
• You are interested in learning and teaching.
• You aspire to be more than just a code monkey. Senior devs need to teach junior devs, and those who cannot teach cannot rise to that level.

Blow me away with something

Build something that amazes me. Build something in PhaserJS like Candy Crush tutorial. Or dig into ThreeJS with 3D animation. You don't have to master it - just touch the water.

What this tells me:

• You're not afraid to read documentation.
• You are excited by what you can do with code.

Build projects beyond standard HTML/CSS/JS.

This is super vague for a reason, because it could be anything. Letting me see that you made a side-scrolling game with Python, a polished puzzle game in Unity, or even a simple Slackbot.

What this tells me:

• That you are able to code outside of your comfort zone.
• You can learn something new without needing hand-holding.

Keep following tutorials/courses. But importantly, focus on delivering. The links above will get you pretty far, as they're pretty close to simulating what my average day-to-day work is like.