A lot of new developers create identical landing pages from the same template (I wasn’t any different). As a result, job applicants are drowning in a pile of CVs and other portfolios.
I am a front end developer who owns a small software house. As an entrepreneur, I’ve seen many candidate’s portfolios. Many landing pages created by those developers were pixel-perfectly identical!
In Poland, we have an incredible challenge for front-end developers called “The Weekly Web Dev Challenge.” I love this challenge and I participated in it when I was a junior. Each week participants create landing pages and are then given feedback.
So, after a few challenges, multiple developers had similar projects in their portfolios/CVs, which they then used to apply to the same employers.
Put yourself in the employer’s shoes. You’re looking for a new developer, so you posted a job offer. After a few hours, you get ten CVs, all with the same project! Not one stands out from the crowd.
Those challenges are useful for practice, but they’re not suitable when you’re trying to distinguish yourself. No one tells you that when you’re looking for your first job. That’s why I’m telling you now!
As an aspiring front-end developer, you probably don’t know much about design. That’s totally fine! You’ll never be responsible for creating a site or product’s design. Knowing the basics of design is helpful and in my opinion, required, but you can leave that for later when you are familiar with the front end stack.
Most of the portfolios that I’ve seen are not very attractive, because developers without much design training tried to design them on their own.
After a few years of work as a front-end developer, I still don’t know how to create all those beautiful designs. I’m 100% a tech person. I have no imagination (except spatial imagination!). Let designers do their job.
But to help ourselves, we can use what they’ve created! The most famous websites for design inspirations are:
You can search for images there and use them to make coded versions. Just remember to give credit to the design owner!
You can create all sorts of different projects. Most of the Dribbble/Behance landing pages will be a challenge to work with because of all the images and icons. But you can develop applications! Applications are not as fancy as landing pages, but that’s ok. Fewer custom images mean fewer problems.
As you can see, there aren’t many custom icons. You can replace them all with free ones, or, if you already know some design, you can create your own.
But you aren’t forced to do that. You can create multiple other things, such as:
I love spending time on searching CodePen for new inspirations. You should try it too!
Here are a few simple ideas:
- Animated hamburger menu.
- Header with position fixed after scrolling.
- Buttons which scroll down to the section on click.
- Animation on scrolling.
- Buttons that open modal/pop-up on click.
- Basic website state — adding and removing elements on click.
There are plenty of things that you can do!
As I wrote before, everybody creates landing pages. So, to stand out, why not make a more complex app? Applications on the front end side are much more straightforward and its easier to achieve pixel-perfection. There might be a lot of different screens, but they’re all much smaller than a landing page.
If you already have the static-dashboard app, you can bring it back to life! You don’t have to know back end to create full apps (for the learning process, of course). My favourite tool is a JSON server. Using this tool, you can create your own database with all necessary requests.
I would love to see an app like this in someone’s portfolio. Basic authorisation, user profile, a dashboard with some charts, and that’s it. It doesn’t have to be a big app, but it shows that someone understands requests, which is a big plus.
Everything which will speed up your work! If you hate to UI (user interfaces), you can create your own UI generator!
- Box-shadow generator
- Custom CSS checkbox/radio inputs generator
- New trendy UI generators such as neumorphism or glassmorphism
- Drawing tool ( like MS Paint)
- Data visualisation
- Your own NPM modules
Creating games might be hard. It would be best if you broke down the logic of the game inro prime factors. It will help a lot to understand what you need to do. I will describe the logic of Tic Tac Toe for you.
- The game should have two game modes: player vs player and player vs computer.
- One of the players choose 0 and the other one x to mark their choices.
- The game is played turn by turn.
- The game ends when one of the players has the whole column/row /diagonal filled with his/her symbol.
- If no one wins, then there is a draw.
- Randomize which player starts.
- Add restart button.
- Add user name.
I hope that I have given you the employer’s perspective. If you don’t help yourself to stand out, no one else will.
Thanks for reading and see you soon!