The transition from solely learning to job seeking and continued education can be overwhelming. There is something to be said about knowing how to build a web application and understanding the crucial elements a web application should gather in order to capture a visitor and ensure they want to dive deeper into your content. This knowledge is at the forefront of many goals a web developer's portfolio sets out to achieve. A web portfolio is much like a visual skills representation of an entire resume; it allows a visitor, hopefully a potential employer or recruiter, to gather information about a web developer in a creative and dynamic way before they actually interact with them. This can leave a lot of responsibility to the web developer to both design and implement best practices and creative ideas into their portfolio to ensure the visitor wants to take the next step in contacting them for an interview. Below are five tips that various websites agree are 'must haves' in a web portfolio to make a developer stand out and become one of the few chosen.
Tip # 1 => Be yourself
Being yourself may seem like a simple sentiment both friends a family give to everyone pursuing a career and looking for employment; but really its true. A web developers portfolio is an extension of themselves and their work, it showcases who they are in a concise and creative manner in order to entice potential employment. If you have a favorite language, a skill you're proud of, hobbies you enjoy outside of coding, or CSS you enjoy using, implement them into your portfolio. Allowing your personality to shine through your portfolio will give the visitor a feeling of who you actually are! They wont think you're coding all day in a basement just knocking on employment's door --but if you are bring some humor to that, owning where you are in life and who you'd be around the office, or in a zoom call, will make certain they know who they're contacting for an interview. Many interview processes involve a 'cultural fit' interview with other developers, so be transparent and put your personality into your portfolio and the interview process --this can help them know whether your a good fit, and leave it up to you to decide if they are in return.
Tip # 2 => Keep it simple
In a world where designs, information, and resources are abundant, we find ourselves as people wanting to get to the bottom line of everything as fast as possible. Dynamic and 'shiny' websites are fun to look at, but at the end of the day if we don't get the information we've came for in about 5-15 seconds those nice looking styles and creative designs go out the window. Most visitors to a web-developers portfolio come for three main reasons: checking out the competition, critique for improvement, or to gather information needed to pursue an interview with the creator. Don't get me wrong, you do need to have an eye appealing presentation when it comes to your portfolio as HTML and JavaScript wont get you hired or keep visitors on your page long. However, some developers lean a lot on the design and how it looks but leave the actual information about them to be desired. This is paralleled with other developers having decent designs but then the information within the portfolio is hard to locate or involves a marathon of clicks to reach. Keeping a web portfolio simple in the sense that the design is clean and eye catching, and the content is either self explanatory or the navigation of reaching a developer's information is intuitive are must haves. Most people are visiting for the first time, unless your portfolio rocks and they came back, so keeping the site effortless to navigate and gather information will leave every visitor exiting with a sense of unwasted time.
Tip # 3 => Lean on your projects
At the end of the day for all web developers, what you've built will get you hired. Your projects should be the focal point of your portfolio, right next to a contact form. Now, this is all only true if you have good projects; projects that are deployed, have good documentation and function properly if a visitor decides to navigate to one of them are essential. The projects located in a portfolio should be the absolute best in your arsenal for displaying skills, creativity, attention to detail, and the ability to have them go live without glitching or erroring out. Afterall, most employers who come to your portfolio and review your projects are their because they are looking for competent developers to build other projects for them. A portfolio is usually a front-end picture frame of who you are and what you've built; next to the actual creator (you) is the work you've done and the possibilities of what you can do for future employers. Remember most people have never heard of your project, and you wont be there to explain them in person, so make your project's documentation clear and concise as well as those sites intuitive for first time users. Employers will appreciate best coding practices and creative ideas that are deployed to the public and actually accomplishing why the project was built in the first place. The effort in being a competent developer with real world application is more important than what the actual project was built for. Show off them skills!
Tip # 4 => This is a visual resume --be creative!
Most web developer portfolios are strictly front end, the functionality and what you've hardcoded in are what the user can see and interact with. If someone has navigated to your portfolio you've done half the work, they are already there so make it an enjoyable experience. Display your skills, experience, education and who you are in creative ways that catch the visitors attention, but still gives them what they came for. This can be as simple as click events that display more detailed information regarding topics, or transitions from one resource to the next, even displaying your name in a creative way can catch a visitors attention. This site is an opportunity for you to take a normal paper resume and turn it into actual art. Now, if styling isn't your true niche there are plenty of templates out there to get the bones of a creative site looking better. However, never leaning just on a template is best practice, tweaking a template or even bootstraps library to fit your personality can lead to some under the hood creativity on your part and ensure that your not showing yourself in the same light as everyone else whose used that same template or bootstrap class. There's a balance between what you have to show them and how you show it, just remember something is better than nothing and designs can always be improved!
Tip # 5 => Ensure that everything works
At the end of the day, the last four tips do not matter if your portfolio is broken. We've all been there, we navigate to a website, start exploring, and something breaks --oops! Most people will leave due to frustration or disappointment, some devs will wonder why it broke and explore further, unfortunately most hiring managers are like most people. A lot of pressure is on web developers to have a functional, error free web portfolio --after all it's kind of a part of the job. Once you deploy your site, visiting at least once a day and running through all of the functionality will make certain that everything is in working order for future employers. On the development side this is where best practices for different browsers come into play, building the site to be mobile friendly or run on explorer, firefox, and chrome is essential for any potential employer to navigate to your site from anywhere or on any device and actually see what you've done and who you are. A sentence to remember: if it's broke then you're broke, and if it works then you'll work.
These five tips are at the upper echelon of what the internet agrees make for a good web portfolio. Implementing them into your website will make for a better experience for both you and all of the visitors that come to check it out. This process can be overwhelming but with the right mindset, tips, and skills everyone reading this can be hired as a developer.
Resources :
https://toggl.com/blog/web-developer-portfolio
https://brainstation.io/career-guides/how-to-build-a-web-developer-portfolio
https://arc.dev/developer-blog/web-developer-portfolio/
https://www.creative-tim.com/blog/education/web-developer-portfolio-website/
Top comments (2)
really great tutorial
Do we really agree on these?