How to Build a Simple Web Developer Portfolio Without Using a Framework

A Portfolio Website is a unique way to show your work and let others know more about you and your skills. In addition, it is also a great way to showcase your experience, personality and capabilities. Having your own Portfolio Website means that you have a wider reach and potential customers can reach if they need to engage your professional service. In this article, I will take you through the steps I took in building a simple Portfolio Website. Please feel free to make changes wherever you want: change the layout, colors etc., put your creative designs skills to practice, because I really don’t have many. This is what I have been able to come up with. 😊Let’s get started!

The Head

As you already know, you start with the HTML brawler plate which entails the opening and closing tags of the head, tittle, body and html as seen below.

You should be familiar with this already. In the head tag, I linked my external CSS and a link to Google Fonts to enable me use some custom font styles. The Next is my body tag.

My Layout

Read the lines of code carefully to understand my layout structure,the classes inserted in the tags for ease of styling and the images etc.

The Final Layout

The final layout consist of external links to my past work. Please feel free to edit this add as many content as you wish and of course personalize this the website.

My Styling

As you know by now we add CSS styles to beautify our websites, web apps etc. Without CSS our Portfolio Website would be just plain text just like the websites from the 90s. Checkout www.yahoo.com in the 90s to appreciate CSS more.

And finally we have this below.

Output
The resulting output for all of these codes is this simple, yet beautiful Portfolio Website.

Conclusion

Now you have an idea as to how to design your Portfolio Website, it is up to you to bring in your creative vision into this by building up on this. Here’s a link to my github page to find the source code for the Portfolio Website.

Have fun learning!!!

Related Posts