Completed a 300 hour long lesson with this project

Code Feedback
1

I’d love your feedback on what to do what not to do.
https://codepen.io/ShAfiii/full/YzXMVpv

2

Hi, congatulations to the portfolio project completion!:slight_smile:

My feedback will be about design. I would personally prefer:

  • Bigger heading with core message like: ‘Name - Web Developer’
  • Clear and bigger portfolio examples and square format (like 2x2 or 3x3)
  • Less blinking and more material design (white background or high contrast, but less distractive for readability)
  • Make reading area of 50vw .

Again - it is basically a design comments and I understand and remember how difficult for me was to create first projects. Maybe for you it’s easier or harder and I do not want to discourage you growing further.

Those comments are easy to implement, but they provide better user experience.

You did an awesome job, do more, grow faster :slight_smile:

1 Like
3

Hi @ShAfi,

  • When using codepen it only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
    • I notice you have a few font-families in CSS but you don’t link to these font nor import them. You may have them loaded on your machine, I do not. Don’t expect users to have them loaded. And if the font cannot be loaded you should have a fallback font like sans-serif or serif
  • Just an observation, instead of a link away to a pen, link away to the full page instead.
  • Maybe add some padding to the top of each section so it’s not hidden by the navbar
1 Like
4

I’m going to make a suggestion. Using Firefox, go to the View -> Zoom menu and activate ‘Zoom Text Only’. Then hold down the Ctrl key and scroll the middle mouse button to make the text bigger. It won’t take long until you start seeing problems, such as the text in your project boxes breaking out of their box. You can’t assume the text size the user is viewing your page with and it should be able to handle much larger sizes. You also might want to consider using ‘em’ for your media query breakpoint instead of ‘px’. That way it will be more responsive to text size.

Overall the page is fine. But I do agree with UATyroni above that you should lose the blinking header. If you weren’t aware, HTML used to officially have a blink tag and it was all the rage back in the 90s. Today you would get laughed at for using it. Your header is too similar to that blink tag.

1 Like