Single-page developer portfolio

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 6 months ago

  Hello Kaoutar, congratulations on completing your project, it looks very identical to the proposed design, well done.

  I have some tips that might be interesting for you. I'll start by saying that part of this tip, which is about JavaScript, I will discuss on your GitHub Issues, as it is easier for you to analyze it there.

  I'll start by talking about the structure of your project, focusing more on your CSS. It is extremely large, around 500 lines. This does not mean it is wrong, but it makes maintenance very difficult. So I would recommend breaking it into parts. You could create a folder called css and inside it place the following files:

  • responsive-mobile.css (Here would be the responsiveness for Mobile)
  • responsive-tablet.css (Here would be the responsiveness for Tablets)
  • style.css (Here would be the standard style)
  • reset.css (Here would be the reset)
  • font.css (Here would be the Font-face)

  This way, your project would be much more organized and easier to maintain. Also regarding CSS, I noticed that you don't have a "fonts" folder in your "assets" folder, so you are not able to import the "Space Grotesk" font. I will also talk about the structure in the Issues.

  In your HTML, I noticed that you repeated some IDs, and this is incorrect. IDs must always be unique. One example was id="logo", which could be removed since it was apparently not being used.

  In your <a> tags that did not have text, i.e., the icons, you should have an aria-label to help with accessibility. For example, it would look like this: <a href="#" aria-label="Github">

  I also noticed excessive use of the <svg> tag. This is not wrong, but it would be more correct to use these svgs inside an <img src="./mySvg.svg"/>, which would make your HTML cleaner. We only use the <svg> tag directly when we want to edit the svg. If we are not editing it and keeping it standard, it is more appropriate and correct to import it through the src of an <img/>.

  That's it, your project is very good. Again, congratulations. If you have any questions about what I said, please comment below and I will try to help as best as I can.

  Marked as helpful

  0

  ---

  

  P

  kaoutar ouadih•800

  @kaoutar-ouadihPosted 6 months ago

  @R3ygoski Hello Bernardo, I would like to thank you for your relevant comment.

  I will work on the tips you mentioned and keep your remarks in mind for future projects. I sincerely appreciate your help.

  1