Portfolio Feedback - Responsive Web Design

Code Feedback
1

Hi,
I finished my portfolio page, which contains my other Responsive Web Design Projects, and I would be really happy to get some feedback about it. The link is: https://codepen.io/juliana-brunes/full/vYLKQeL.
Thank you :smiley:

1 Like
2

It is very cool that you are doing asymmetrical design, but there are problems woth responsive design. Many elements overlap woth each other and simply are not alignes properly. Even the title is half-visible in phone view. I guess that is the result of wrong margin/padding use but I have not really paid attention to the code. Maybe try fixing the breakpoints a bit more. Also play with color, current designs look a bit too monotone and honestly I didn’t like it and don’t think many people will. Hopefully you can take something out of this and try to fix things gradually, but all in all you have got good basis to improve slighly.

1 Like
3

Beautiful vintage typewriter feel.

Consider adding a bit more padding to the nav-bar links in the :hover state?

:+1:

1 Like
4

Thanks :slight_smile:
I’ll definitely add more padding to the nav links. It is indeed too small. Thank you for your feedback

5

Thank you for your feedback :slight_smile:
I opened the page in different phones and indeed it was messy. I made some margin/padding adjustments and it got better (it’s faaar from perfect, but I believe that in most screens the elements don’t overlap with each other anymore). I also noticed that my page kind of keeps moving when I scroll it on my mobile, showing lots of white space, and I don’t know how to fix it (the body css has the overflow-x property set to hidden). Do you have any ideia of how can I solve this problem?
As for the colors, I will pay atention to it in my next designs. I enjoy this minimalist design, but maybe adding more colors would make my page more pleasant.
Thank you for you feedback!

6

It looks coool… but the text looks so smaller…
I think you can scale your your element when I hover on them…
just using transform scale property in css…
Please try to make it more responsive so that it looks good when I visit on mobile or on tablet devices…
feel free to think of this as my opinion only…
Enjoy coding, build more.
regards,
Rony

7

Welcome tot the forums @jubrunes. Your portfolio looks good. Some things to revisit;

  • I don’t normally comment on someone’s design but I had a hard time telling that your projects were clickable and differentiating one from the other. Someone on a device other than a desktop is not going to have a mouse to hover and won’t realize what’s clickable and what’s not.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.

I looked at a couple of your projects. On your survey form;

  • Don’t use <br> to force line breaks. That’s what CSS is for.
    • See this in your portfolio too.
  • Change the cursor to a pointer when hovering over the submit button
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
1 Like