Single Page Design Portfolio

Community feedback

• 

  BrunoMoleta•700

  @brunomoletaPosted 5 months ago

  Hello Jrey,

  Overall, the first thing I did was to split the code into smaller chunks so it's easier to read. You will see multiple CSS and JS files.

  I also installed the Prettier dependency so that when you run npm format it will format the whole project.

  There's a few HTML tags that you may adjust such as the project's list using

      <div>
          <img/>
      </div>
  

  You can make it more semantic with an unordered list <ul>[...]</ul>

  Also, it's better to use different heading levels such as <h3>, not only one <h1> and multiple <h2> tags as happened in the services file. You could make the section headings h2 and the highlighted items inside it h3.

  In the CSS code, you hard-coded the values inside the grid.

  You may define the height and width only for the parent element. The children will have the space defined at the grid-template-areas, I made a few tweaks, so please check the services.css file. Also, this reference around CSS Grid is sound.

  Also, the media query should use rem not px. For one, I use a font size twice as big compared to the default user, and it often happens that the layout does not fit properly on my screen even on websites like Linkedin. To learn more about the topic, please check Josh Comeau's blog.

  If you find this review useful, please give it a "helpful" vote.

  Keep up the hustle, Joseph :)

  Best regards from 🇧🇷

  0