Portfolio Website feedback ^_^

Code Feedback
1

Hey everyone, i just completed my portfolio website. I would appreciate some constructive criticism.

https://codepen.io/justaname947/full/qGeGXG

1 Like
2

Hi, looks pretty cool! I can see you have improved little by little in every project. Keep it up! :slightly_smiling_face:
Things I would change: Add target=_blank into your a tags, it saves time for users. And your pictures doesnt seems to work right.

1 Like
3

Hey, thanks for the reply. My codepen and freecodecamp links are both targeted to _blank. What exactly are you talking about ?

The images, yes this has been on my mind for a while. What image hosting website do you recommend for hosting images that i would want to use for website? I know sooner or later at work one has to fully server the whole website with its needed content, but until i get there, got any suggestions ?
Have a great day :smiley:, and thanks for the first sentence you wrote, really cheered me up.

4

I am talking about your image links (A tribute website, form, etc… ). For images, I am using https://imgur.com/ . Its simple and works like charm. :slightly_smiling_face:

5

Hi in code pen there is html settings. Go there a put all your head tags in there, cause on a small screen your project is a jumble.

6

  • Remove the periods from your h2 tags. They are unneeded if you’re creating a border around them.

  • Check your work for spelling/grammar mistakes. I spotted dozens just skimming the website. The most noticeable one being one of the nav items.

  • The 1st navigation item is pushed off the screen on my phone. Work on responsiveness.

7

Got it, changed them all ^_^.
@Fanie I took out everything from the head tag and put them there. I hope it looks better ?
@RadDevDad Thanks for the feed back, i removed the periods and will rework the whole grammar/spelling aspect for sure.

Do you got any suggestions for responsiveness ? i barely know what im doing with it and as you can see i have media queries but maybe you can throw me your 2 cents in and tell me how to make it more responsive ?

Thanks everyone !

8

Try to use CSS Gridbox or Flexbox, really good ones for better responsivness. Also use more relative units rather than absolute.

9

Imgur does not work for hosting images from many sites, CodePen being a specific example. Try clearing your browser cache and load your page again. If you can see the image, then imgur hasn’t blocked the referer from your site … yet. I recommend a service that doesn’t block direct linking, such as Dropbox or Github pages.

2 Likes
10

Thanks for the advice, i am actually using flex box in my nav, projects tile and footer.

11

It looks pretty good.

  1. The page starts to overflow at around 490px, if you let the images scale down it will help a bit.

  2. I’m not sure I understand why you have the nav source order reversed and then use flex-direction: row-reverse;. The #icontext element is just overflowing the nav at smaller screen sizes. I would set the source order back to normal and remove row-reverse, then at 520px stack the nav using flex-direction: column; and align-items: center;.

<nav id="navbar">
  <a id="icontext" href="#">Greatness comes with practic...</a>
  <ul>
    <li><a href="#">about</a></li>
    <li><a href="#jumptoprojects">projects</a></li>
    <li><a href="footcont">contact</a></li>
  </ul>
</nav>

#navbar {
  display: flex;
  justify-content: space-between;
  /*     flex-direction: row-reverse; */
  position: fixed;
  background-color: #5e5e5e;
  width: 100%;
  border-bottom: 1px solid #f3d3bd;
  top: 0;
  left: 0;
  right: 0;
}

@media (max-width: 520px) {
  #navbar {
    flex-direction: column;
    align-items: center;
  }
}
  1. The id="hr" should be a class, ids are supposed to be unique.