Portfolio Project/Challenge - Feedback on Code

1

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!

-Derek

2

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

3

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
4

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!

5

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

scrollbar.jpg1914×953 171 KB

6

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?

7

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

8

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
9

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