Portfolio project feedback

Projects Portfolio Project: Personal Portfolio Website
1

Hi! :raised_hand_with_fingers_splayed:
I am currently 30% on the Full stack path and as a project, I decided to update my girlfriend’s portfolio website.
It was fun, and challenging for me. I think especially the responsive features.
It took me around 22 hours in total, from the design stage to the current state with the main page and “about” page.
The website is far from complete, but I would like to go on with my Full stack path.
Unfortunately, I can not share the GitHub repo since it is private.

Here is the website deployed: https://eeromaria.netlify.app/index.html

Any feedback would be appreciated :open_hands:

1 Like
2

Without seeing the source code, I can only comment on the project aesthetically ~

  1. The nav menu item “Artworka” might be a misspell. Artworks perhaps?
  2. Clicking on the “About” nav menu item and then clicking on the “MARIA EERO” banner leads to an empy url because the banner with the ID: banner is hidden.
  3. The placeholder text on one of the artwork spaces has a misspell: “Sample short info about the arteork”.
  4. The copyright year on the bottom needs an update. “© 2011”

Overall great work! Clean and minimalistic.

1 Like
3

Thank you @ThatTyGuy for noting down the mistakes.
I would love to share the source code, but I need to keep all the images private.
Is there any nice way to do that?

4

Unfortunately not, if you post the code it’s going to show the image URLs for the images you used, but then again you can see the image URLs by simply right-clicking the image on the webpage and opening the image in a new tab.

5

I have created a mirror public repo which I can share now.
I will be grateful for your feedback.
GitHub repo

1 Like
6

Thank you!

Browsing your HTML files I noticed a few things ~

You got the job done with <div>'s but I would highly suggest exploring alternatives such as <article> and <section> to make your portfolio site more accessible.

I noticed you attempted to use <span>'s for added spacing. Instead I would recommend using CSS and adding additional padding and margins to eliminate usage such as this that I found:

        <span></span> 
         <span></span> 
         <span></span>

In your contact form I noticed that you created a submit button, although it’s not required, it’s good practice to add a type=submit to ensure it’s behaving properly across browsers. Submit is the default behavior for a button in a form but it never hurts to specify the action through the addition I gave above.

That was all I found after a quick skim. Once again I think you did a great job, and I’m looking forward to seeing more projects from you!

1 Like
7

@ThatTyGuy You are amazing. Thank you so much for your notes and for your time.
I really appreciate it :pray:

1 Like
8

I have a question regarding the elements.
I have used it to create a hamburger menu and a blinking arrow on the banner.
I style each span with background and dimensions in CSS.
Is there a best practice? Or is it ok to use span in this case?

9

Normally you wrap things in a <span> tag with the intent of adding a class or ID to that span so you can further customize that specific area. Styling all spans equally limits what you can do with that niche tag (in my opinion)

1 Like