Project: Build a Personal Portfolio Page

Image of freeCodeCamp Portfolio Project on CodePen

One of the best things about learning to code is working on projects. Not only is this a great way to learn but it is also a lot of fun.

I recently completed the second project in the freeCodeCamp Front End Developer course, which is to build a Personal Portfolio page.

Originally, I started to work on this project shortly after I finished my Tribute project back in October. I had a vision of what I wanted the page to look like but I didn’t have the knowledge necessary at that time to bring that vision to life.

I tried a version using only CSS and another using Bootstrap but I kept running into problems. While I was able to figure out solutions for some of the issues, my code was a cobbled together mess of things I picked up here or there on the internet. It wasn’t pretty and I wasn’t happy with it.

Some of the things that gave me trouble included getting the background image in the heading to scale properly and putting the different projects side by side on the screen.

Frustrated with the progress I was making, I decided to hold off on the project and focus more on my lessons.

It was like the people at Treehouse were reading my mind.

As I worked through their Front End Web Development track I kept coming across solutions for my different problems. It seemed like every section I completed taught me something else that could be directly applied to my Portfolio project.

When I restarted the #100DaysOfCode Challenge last week I decided to start my Portfolio project over from scratch.

For those who may not be familiar with the rules of this project, here is a short video to explain them:

After learning more about HTML and CSS I knew I wanted to stick to CSS when it came to styling the page. I felt confident that I could achieve the look I wanted and I didn’t want to rely on a tool like BootStrap to do the work for me.

It might not be the best way to create a web page but when it came to my Portfolio project I worked on it from the top down, one section at a time.

For the header, I wanted a large background image that would take up the full screen. Since the page is fairly small, I decided against a floating nav bar so I just included it in the header.

As the page evolved I felt like I wanted to give users the option to return to the top of the page, but I didn’t want to muddle the layout and symmetry of the other sections by adding a return to top link. I ended up using a floating return to top button that was inspired by this article.

The header, about-me and project sections all came together fairly easily. Like I said, I had a vision for what I wanted the page to look like. Thanks to my Treehouse lessons and other things I learned over the last few weeks I had a good idea of how to accomplish that look.

The area I struggle with the most was the contact section. I couldn’t decide between a contact form or just some verbiage and images linking to my various profiles.

At first, I was leaning towards some text and links but I couldn’t come up with wording that I was happy with. The section also felt too small and I wanted each section to fill up the screen.

In the end, I decided to go with an HTML form, which was something I wasn’t very familiar with. I had to do a bit of research but I was able to come up with a design I liked.

One thing that I wasn’t clear on since I didn’t have a domain for the page was where the information would go once it was submitted. Because of that, I set the action to link to an address. I have a lesson on HTML forms bookmarked to watch later today so I plan on changing where information goes once I learn more about how it all works.

The last thing I did for the layout was to create a footer with links to things like this blog and my GitHub account. It was my first time using Font Awesome for the icons but it was super easy to figure out.

One thing I think I can improve on down the road is the efficiency of the CSS. There are 102 lines of the code in the HTML file compared to 315 lines of code in the CSS file. I am sure there is room to tighten the CSS a bit and combine some of the styling into the fewer rules.

Media Queries for Portfolio page project.

One part of the CSS that I am particularly proud of is the addition of media queries to make the page more responsive to various screen sizes. It took a bit of extra work, but I think it was worth it, in the end, to have better control over how the page looks.

I used GitHub Pages to create a website using the GitHub repository for my Portfolio page project. You can click this link to see the finished version of the project.

If you would like to check out the code for my Portfolio project you can find it in this GitHub repository or on CodePen.

While the project is far from perfect, I am quite happy with how it turned out. It is very close to what I saw in my head and it was a real confidence builder to make. I look forward to revisiting the project down the road through more experienced eyes.

If you have any feedback or thoughts I would love to hear them. Also, hit me up on Twitter or in the comments below with links to your Portfolio projects.

Sharing is caring!

Author: Lee

Hi, my name is Lee and I am a 40-something who recently made the decision to become a self-taught programmer. This site was set up to chronicle that journey and my experiences along the way. Feel free to contact me with any comments, questions, or suggestions.

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × 5 =