There are a lot of Front-End Developers in the workforce today building exciting and innovative projects. Together, they help push the envelope on how web development is done, providing other developers with new techniques to use in their own projects. But this also makes it hard for new developers to stand out in the crowd.
If you just started building your front-end development skills, there's no better time to make your portfolio. But it's hard to choose projects that'll get the attention of recruiters and hiring managers — especially with all the other skilled Front-End Developers out there. To help you out, we've compiled this list of projects you can add to your portfolio that'll catch the eye of a potential employer.
1. Technical portfolio website
This is a great project to start with. Building a personal portfolio website gives you a home on the internet where you can share all of your other front-end projects — and we'll show you how in the video below.
When you're just starting out, you can make it a simple static website that describes who you are, what you do, and the other details you should include in a portfolio. Then, as your skills grow, you can link to other projects you've built and update the features of your personal portfolio site with the new techniques you learned.
Building this website as a beginner won't be a walk in the park. You may struggle a little, but it'll be worth it, as one of our learners, Daniel Labrador, explains in our forums:
Since this site will showcase your other portfolio projects, you can also try optimizing it to get a perfect Chrome Lighthouse score. Lighthouse is built into Google Chrome and can test websites for performance, accessibility, best practices, and SEO.
A well-performing website gets a higher rank in Google search results and provides an enjoyable experience for visitors. Plus, it'll show recruiters you can build a site that performs well.
2. Landing page
Pick your favorite product. Then, do some research online and find a few landing pages you want to emulate. Once you know what you want your landing page to look like and how you want it to function, put it together. This project will show employers you can make a website look good and get clicks.
3. Responsive virtual keyboard
For this portfolio project, you'll create a virtual keyboard that looks good on any device. Create a simple page with a textarea. Then, create a keyboard on the page that's fully functional and can be used to edit the content in the textarea.
This may seem like a simple project, but it can actually get pretty complex. You can use it to show off your ability to use media queries, breakpoints, and column layouts in CSS. Responsive design isn't that simple when you're styling a complete keyboard with all the keys, and potential employers know this.
4. To-do app
CRUD stands for create, read, update, and delete. These types of data operations are carried out on many websites, including blogs, e-commerce sites, and more.
While many sites use a back-end service and a database to store data, this project will use the browser's local storage to store data in a JSON format. So, this project will also show your ability to use browser storage for data. It can be as simple or complex as you want, but since it's for your portfolio, try thinking of new features you've never seen before.
5. A meme generator site
For this portfolio project, you'll create a meme generator. The web app will present users with a selection of images suitable for a meme. The users will need to be able to embed their own text in the image and download it or share it on social media. You can use a site like imgflip to retrieve suitable images.
Build your skills and your portfolio
A portfolio is the key to displaying your front-end skills to potential employers. A resume is important for reference, but a simple list of your skills won't stand out the way your projects will. Hopefully, you found some inspiration for your own portfolio with the projects listed here. For more tips, check out our guide to creating a technical portfolio.
For more ideas on what type of projects to include in your portfolio, take a look through our project library. Or, if you're still building your front-end development skills, why not learn with us by taking the Front-End Engineer Career Path? This in-depth course will teach you the skills you need in modern front-end development and help you build three projects you can add to your portfolio.