Responsive landing page using CSS grid.

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Good Job you made it look nearly perfect to the preview

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body like it should be your container

  -> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

  -> But use header tag only once in main heading element.

  ->

  Keep up the good work!

  Marked as helpful

  1

  ---

  

  Thabsheer•40

  @MThabsheer7Posted almost 3 years ago

  @Crazimonk Thanks Naveen. Yeah I should work on the accesibility part, your suggestions are to-the-point. Cheers.

  1
• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Awesome job with this one. Impressive as your first project with CSS grid. Viewing your solution, I would suggest the following for you...

  • increase the breakpoint of the media queries into 852px
  • Wrap the whole content container with specific tag like main and attribution with footer tag for readability
  • Adjust the background property in the timecard individually, like inside the work rule set...add it like this...

  .work {
    background-image: url("images/icon-work.svg");
    background-color: var(--clr-work);
    background-repeat: no-repeat;
    background-position: right -0.5rem;
  }
  

  Overall you did very well and Keep it up! Cheers!

  Marked as helpful

  1

  ---

  

  Thabsheer•40

  @MThabsheer7Posted almost 3 years ago

  @RioCantre Thank you very much for the feedback. I was confused if the background in the challenge was repeat or no-repeat, so I left it on repeat. I will try to implement your suggestions. Cheers.

  1
• 

  Aadvik•1,250

  @Aadv1kPosted almost 3 years ago

  Hey! Here are some fixes I would suggest you apply on your project.

  • Centering; To perfectly center your container over the body you can use positon absolute -- like so

  .container {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%)
  }
  

  • Background; You can set your background-repeat to no-repeat to prevent repetition of accent images on the card.

  Rest you have done a great job on the JavaScript part.

  Marked as helpful

  1

  ---

  

  Thabsheer•40

  @MThabsheer7Posted almost 3 years ago

  @Aadv1k Hey, thanks for your feedback. Those are some great suggestions, I will surely try to implement them. Cheers.

  0