Add A Project To Your Portfolio And 3 🔥 Bullets To Your Resume In 3 Hours!
Tags: portfolio, resume, career, codenewbie
Published: 2021-09-27 00:05:03


Do you feel like you don't have enough [good projects in your portfolio](https://codingcareerfastlane.com/first-web-development-portfolio-projects/) to demonstrate your skills and launch your coding career? 

Here's a quick idea - and I mean 3 hours to do - _QUICK_. 

But not only that. It will be such a 🔥 project that you'll add 3 🔥 bullet points to your resume when you're done. 

So, now you're probably wondering:

## How Can You Add A Good Project To Your Portfolio In 3 Hours?

Here's what you do:

### 1. Pick something you really like: 

- Your favorite author or book
- Your favorite musician or artist 
- Your favorite restaurants in your city
- Your favorite tv show or movie

Just make sure you pick something you can come up with content for _quickly_. Look it up on Wikipedia, Yelp, IMDB, etc. 

### 2. Make a _static_ site that:

- Uses semantic HTML & modern CSS, like grid and flexbox

- Still looks good when you squish the browser width

- Doesn't load much JS, and doesn't run *any JS on page load*.

Remember, we care more about the basics and going deeper into that than showing off that you know the hot new framework of the month. 

🚫 Don't use a static site generator or someone else's theme. 

✅ Do keep it simple and get inspiration from gallery site's like [One Page Love](https://onepagelove.com/)

### 3. Validate the HTML and CSS and make it accessible
Run your code through [W3C Markup Validation](https://validator.w3.org/nu/) tools, and make the recommended changes. Then check out [A11y Project's Accessibility Checklist](https://www.a11yproject.com/checklist/). Google anything you haven't heard of and make the site accessible. You can test the site's accessibility using [WebAim's Wave tool](https://wave.webaim.org/).

### 4. Increase your Google PageSpeed Score
Run a performance test using [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/). Look at the opportunities to increase performance. Screenshot the metrics, before and after you make all of the suggested changes.

## How Do You Write Good Resume Bullets For A Simple Static Website?  

I know it might sound far fetched considering how hard you have to work on most projects, but trust me on this. This project has plenty going for it and it gives you more than enough to brag about on a junior resume. 

Now, let's add those 3 🔥 bullet points to add to your resume:

- Reduced Largest Contentful Paint by X% and decreased overall page loading time by X seconds running web performance tests to identify opportunities to speed up the site.

- Built site following web standards and accessibility best practices, achieving valid HTML and CSS in W3C Validator, and perfect accessibility scores in WebAim Wave.

- Optimized site for all screen sizes, achieving a fully responsive site using CSS grid, flexbox, and media queries.

 
I'd pick these over resume bullets that superficially describe a CRUD app, or all of the bootcamp portfolios I review that have the same old tutorial projects I can spot a mile away. 


**Leave a comment below if you get stuck on any of these steps, and please share a link to your site or portfolio if you want any feedback**