HTML CSS jQuery

Community feedback

• 

  luwa•325

  @luwa-starPosted almost 4 years ago

  Great job Marvelous! This is a great attempt at making a landing page. However I have a few observations:

  • The font-size you used for your 'quote' section is very large as opposed to that of the nav-items, there's no balance. It just keeps staring at me, lol. you might want to wrap it in <h1> tag then style it from there.

  • you need to use semantic elements like<main>, <article>,<nav> and so on in your page layout to make your a bit more readable and accessible. You can read it up.

  • Your class names are not descriptive. It makes your code quite unreadable.

  • I noticed your <a> tags don't have attributes. It makes your code inaccessible. It's bad practice not to add attribute to anchor tags at least href attributes should be there so browers can recognise it as a link.

  • Your landing page is not responsive. Use absolute units like px when you don't want the width/ height to change. The use of relative units like rem, em, % are better that way when you resize the screen it will adjust. Also, the use of media queries are very important because you can't design your pages for all screen sizes all at once. remember to start from mobile first that way you can scale up easily. The use of Devtools also helps.

  • The use of Grid. In my opinion, you overused grid. There are sections where you could have used display:flex or display:inline-block and the reposition the other elements. For example, in your home section for the navbar you could have used both display:flex and display:inline-block to position the logo and nav items. Then used position:absolute to position the the quote on the image. The same thing goes for the footer, you could have wrapped the logo and nav links in a <div> tag and social media links and footer-note in a <div> tag. Then used display:inline-block to space out. Thus avoiding using the grid layout.

  • Finally, your images for the creations Items are zoomed out when the screen size is reduced. You can fix that by using the background-size: cover or background-position:center and if there's an overflow ,you can set it to overflow:hidden. that should fix any glitch.

  Overall, this is a good attempt at making a landing page. I feel you should read up more on HTML so you can get better at making great layouts and have a better understanding of how the elements work together to achieve a particular purpose, it helps with good practices and accessibility and SEO. My two cents!! Keep coding Marvelous.

  2

  ---

  

  luwa•325

  @luwa-starPosted almost 4 years ago

  @luwa-star Actually, I had issues wrapping the code block so I have to paste it seperately. Pardon me, I tried so many times

  • There is negative space in your creations and about sections. You need to centralize them. You can do that using:

      align-items: center;
      justify-content: center;
  or
  display: grid;
      align-content: center;
      justify-content: center;
  

  1

  

  nika-sergeeva•150

  @nika-sergeevaPosted almost 4 years ago

  Thanks for your feedback! =)

  0