*by a junior developer.
Hello there, I recently started my first role in software development! A big part of the process was putting together a portfolio website to showcase my skills and help me to stand out. Now I'd like to share some of the tips I've learned for anyone else looking to create their first portfolio site.
1. Quality Over Quantity
Don't worry about having lots and lots of projects in your portfolio. One or two really polished projects are far more impressive to potential employers than lots of small practice projects. These projects should be ones that you are really proud of and you should feel confident about discussing your ideas and processes. Test these projects and make sure everything is working! It's also a good idea to host live versions of your projects too.
2. Make It Responsive
Practically everyone has a smart phone now, so it's extremely likely that people will use their phone to view your website. This means that your site needs to be responsive, so it looks good on all devices. Responsive design is really an essential skill to have as a developer, so it's important to showcase that you understand it. Even if your goal isn't to be a frontend developer, you'll definitely lose marks if your site looks ugly and squished on a phone. I highly recommend learning how to use Flexbox if you don't know it already, as this will really help you. CSS Tricks has a really good explanation of what Flexbox is and how to use it. You can also learn it the fun way with these games, which I particularly enjoyed:
3. Think About The Design, But Don't Overdo It!
It's a good idea to sketch out the layout of your site (like a basic wireframe) so you can plan what you need to build. I personally think that one-page websites work really well for portfolios, as it allows recruiters/potential employers to easily skim through it...I also just like the way that it looks quite fluid. When it comes to the styling, try to choose just 2 accent colours that compliment each other well, as this looks pleasing to the eye and helps to tie everything together. I also recommend choosing one modern and clean looking font throughout; but if you decide to use another font for titles for example, just make sure it compliments the other font so it doesn't look like a mistake.
4. Get a Custom Domain
This is optional of course, but you will definitely look more professional with a url like www.yourname.com, rather than one that looks like random gibberish. It's also more memorable and easily sharable.
5. Just Build It!
You don't need to be an expert or have amazing skills to build a portfolio. I built my first portfolio with HTML, CSS and JavaScript and I learned a lot from the process. Later, when I learned React I built a React version, before finally using Gatsby to build the version I have today. Your first portfolio won't be perfect, but it should develop along with your skills.
So those are just a few of my tips, but if you have any other useful tips, please add them in the comments!
Top comments (6)
Also, it's a good thing to contribute to an open-source project to learn and improve your portfolio.
and if we are already talking about open-sources ;). I've been started a new open-source project in the last few days. its a q&a and knowledge management application (like Stack Overflow, Quora etc... but open-source, the idea is to give organizations the ability to setup them self and for their employees a platform to share and save knowledge inside the organization)
I'm looking for contributors (senior and junior developers, you're all welcome of course)
this is the GitHub link: github.com/veaos/veaos
if you need help starting contributing and need a mentor you can reach me at GitHub or here (you can find contact details in my profile)
Great suggestion :)
Pretty frikkin nice portfolio and great tips. Thanks for the article!
Thanks for sharing! Congrats on your portfolio as well.
Thanks for sharing! Also enjoyed looking through your portfolio!
These are all great Tia! Thank you for sharing. I agree the best thing we can do is just build it :)