Portfolio Project/Challenge - Feedback on Code

Updated: Thanks everyone for your input, I ended up forking it and re-working it a bit and I think it works and looks a lot smoother now! - https://codepen.io/derekbmcintire/pen/woRjdb

Hey everyone,

I just completed my portfolio project - https://codepen.io/derekbmcintire/pen/vydjrr I haven’t done the javascript section yet so it’s just pure html and css. I may go back through the jquery and see if there’s anything I can add at some point, but for now I’m satisfied with how it looks and functions.

However, I feel like my code is a bit of a mess. I don’t have a lot of experience, so maybe it’s not as bad as I think, but since it was a learning process there was a lot of trial and error (and some help from people here - thanks!). If anyone feels like taking some time to look and give me any advice that would be appreciated. Thanks!


I like it, only thing i would change is font size at your About section its kinda hard to read…
And there is little typo in your about section: I am *begining *to learn

Oooh this looks really nice.

A couple of suggestions and comments:

  • Definitely increase your font size.
  • I notice that you have empty div’s with id’s for the anchor links. You can combine that with the actual divs for the area you’re jumping towards? For example: <div class="about-container" id="About">
  • Don’t wrap lists in p tags (Stack Overflow explanation)
  • The border on Some Project 2 shows on small screens so a media query for that might be helpful
  • I also noticed that About Me and Portfolio aren’t headings. Here two sites that can better explain this than me: https://mrwweb.com/use-html-headings-for-accessibility/ and http://www.hongkiat.com/blog/html-5-semantics/
  • There’s a bottom scrollbar appearing and it’s really bothering me because I can’t figure out what’s causing it haha.

Overall though, this is actually a pretty impressive portfolio for someone with not a lot of experience. I can’t really comment DRY code because I still struggle with that, but more practice will help with that definitely.

1 Like

Thanks for taking the time to look and offer your feedback! I will definitely bump up the font size, use headings and look into the About id. I think I had it there to take up space so that it lined up perfectly with the fixed navbar on top, because without it the screen was coming down a little too far, but maybe there’s a better solution using margin.

I"m not sure why a scroll bar would be appearing, and I haven’t seen one on any of the screens I tested it on, will have to look into it. Thanks!

Here’s what I’m seeing (my resolution is 1920x1080) :slight_smile: :

Very nice and looks great on small devices. One minor thing I noticed is that in your contact section, the href attributes both have a value of “#”, i.e. redirect to the top of the page. Is that intentional or an oversight of some kind?

Thanks! That is intentional since I am not ready for anyone to actually contact me yet.

Just learned how to use media queries to fix the margin above the skills circle in order to keep it centered on larger screens and not have a big gap at the top on smaller screens. Also used ones to get rid of the borders on project two on smaller screens. No idea about the scroll bar, I noticed it pops up on mine when I grab the screen and move it but is not visible otherwise.

Making progress!

1 Like

deleted - thought I fixed the scrolling but I didn’t :frowning: