How to create a portfolio as a frontend developer with no experience
When you start looking for your first job or even when you want to freelance, the first wall you hit is when the company asks you: "Can you show me some of your work?" and you be like: "This is my first job. I don't have any work to show".
Well, you can (and should) have a portfolio. Let me show you how.
What is a portfolio anyways?
A portfolio showcases what you are capable of, and it doesn't have to have 1500 finished projects. No recruiter will look that many anyways.
You can have a portfolio with three good projects, and that is fine.
What can I add to my portfolio?
If you are looking for your first work, it means you are probably learning. You might be in a boot camp, doing courses, tutorials, or in school.
All the good projects you built while you in this process SHOULD BE IN YOUR PORTFOLIO.
You don't need to include them all, but you need to pick the best ones and have them in your portfolio.
Make them better
Once you pick your best work, make sure you give your touch because many other people are doing the same courses, boot camps, and tutorials as you.
-
Improve the design: change the layout, colors, fonts, images, anything to make it look better and different
-
Clean the code: Revisit the code to see what you can improve. You can look at the clean code repo for some recommendations.
-
Create a new thing: take what you learn doing the Pokemon, Rick and Morty, or any other project and create something new for you. Here is a list of free public APIs for you to use.
Ideas for projects
If you don't have anything, let me give three ideas you can build fairly quick:
- Build small components with HTML, CSS, and JavaScript, such as a header, footer, navigation, accordion, dialog, listing table, contact form, and product card.
- Full dashboard page or a listing and detail page
- Build a landing page. You can get a lot of ideas in onepagelove.com
Needs designs?
Head to dribbble.com search, pick the one you like and build it as close as possible. Then send it to the author for feedback, they will love it.
I have some projects, now what?
Well, you need to put all this online, and for this, you have two options:
- Create a portfolio website from scratch (recommend)
- Use different services to publish your work
Create a portfolio website
Building your own is your best option because your portfolio ends up being a project to show in itself.
You don't need a very complex web app to have a portfolio. Since you already know HTML and CSS, you can build a static website.
Your portfolio needs
- Your bio: introduce yourself, what you do, include a nice picture of yourself, keep it casual and try to be concise.
- Your projects: include a good screenshot, a short description, and it is essential to add links to the demo and the code.
- Contact page: Don't add your email (avoid SPAM). If you can build a contact form, great if not, leave your LinkedIn account, Twitter, or any other way employers can contact you.
DON'T add your age, nationality, religion, or any other data that can lead to discrimination. Good companies care about your work and nothing else.
Publishing your portfolio
You need to publish not only the portfolio website but the demos of your projects. There are several free options in the market, but I recommend these two:
Github Pages
As a front-end developer, I recommend you to have a Github account because it is kind of the standard in the market to host your code, and with Github Pages, you can host your static pages.
Github Pages allows you to host your website and even add a domain to it for free. Check their documentation.
Netlify
You can host your site for free by just drag and drop a folder with your HTML, CSS, and JavaScript files, and it can't be easier than that.
Use services
If you don't want or don't have the time to build a custom website for your portfolio, that's ok. There are several services that you can use to showcase your projects. I like these three:
Codepen
Is a social development environment for front-end designers and developers. It works perfectly for projects that are mostly HTML, CSS, and vanilla JavaScript. Add title, tags, and descriptions to your "pens" to get more exposure.
Stackblitz
An online IDE where you can create Angular, React, Vue, Typescript projects that are immediately online, and it can sync with your Github account.
Codesandbox
Very similar to Stackblitz but have more types of projects and real-time collaboration.
And then what?
Once you have your projects in any of these services, you can send the links in your application, add some description, and you are good to go.
The importance of a portfolio
Having a portfolio might not be a requirement to land your first job. Still, if you have no experience, you need a way to show your possible employer what you can do. Trust me, most of all, most of the other candidates will have a portfolio.
In short
- Use your learning projects as portfolio items
- Build your own thing
- Or use services