Portfolio Website Challenge

Codecademy Challenge: Build a Portfolio Website.

Background Image of Portfolio Website

What I Built

For this challenge, I had to build a Portfolio Website that showcased some of my previous projects. I created a home page with a nav bar, three featured projects, links to my LinkedIn, GitHub, and email, and an additional About Me page. In the nav bar, I included my resume and a link to my blog. My goal was to combine my current skills in HTML, CSS, and Javascript and create a responsive website.

What I Found Challenging

The HTML portion of this assignment was a breeze. Most of the CSS was not very difficult either. What I struggled with was incorporating Javascript. It’s easier to create CSS elements than to use Javascript. For example, my social media icons “shake” when the user hovers over them. This could be done with Javascript, but CSS makes it much easier. Instead, I used a `click` element and a `setTimeout()` function to make my project divs disappear for a couple of seconds after being clicked on.

Another issue I came across was including my footer. I saved that section for last and struggled to get it to cooperate. It didn’t want to sit at the bottom of my page and it would act strangely when the screen was resized. After a couple of hours, I decided to make it “disappear” when the screen got to a certain size. This wouldn’t be a permanent fix if my site were a live webpage, but as this isn’t my official Portfolio Website, I’m going to leave it as is.

What I Would Do Differently Next Time

One thing I would change is using Grid instead of Flex Box. Using a Grid makes it easier to rearrange divs and adjust as necessary. I think that would’ve made my footer issue much easier to deal with. Another thing I would do differently is add my footer sooner. I had a blast with this challenge and I’m definitely getting more comfortable with front end development.

Check out my GitHub Repository for this challenge and let me know what you think.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: