Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

testimonials-grid-section-main

Lyna 60

@djelidlyna

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

all feedbacks are welcomed

Community feedback

Lyna 60

@djelidlyna

Posted

I appréciate all these notes and feedbacks , i thank you also for your time and the advices . Have à great day

0
Lance 1,580

@IzykGit

Posted

The biggest way for you to improve right now is to practice your HTML semantics and your CSS!

The major thing that I see when reviewing your code is that you wrap everything in divs and you also don't use proper indentation. Doing this can make coding far more challenging.

Going from this:


 <div class="white-left-box box">
 <div class="header">
  <div class="header-right">
    <p class="header-right-top">  Jeanette Harmon </p>
    <p class="header-right-bottom">    Verified Graduate  </p>
  </div>
  <div class="header-left">
<img src="images/image-jeanette.jpg" alt="">
  </div>
 </div>
 <h2> An overall wonderful <br> and rewarding <br> experience</h2>

  <p>“ Thank you for the wonderful <br> experience! I now have a job I really <br> enjoy, and make a good living 
    while <br> doing something I love. ”
  </p>
 </div>

To this


 <div class="white-left-box box">
      <div class="header">
           <div class="header-right">
                <p class="header-right-top">  Jeanette Harmon </p>
                <p class="header-right-bottom"> Verified Graduate  </p>
           </div>

           <div class="header-left">
                <img src="images/image-jeanette.jpg" alt="">
           </div>
       </div>
       <h2> An overall wonderful and rewarding experience</h2>
       <p> “ Thank you for the wonderful experience! I now have a job I really 
        enjoy, and make a good living while doing something I love. ”
       </p>
 </div>

will have a huge impact on how easily you can code. Also remember to use proper semantics such as <main>, <section>, <ul>, etc. Div elements do not have any semantic value so therefore the browser will not know what content is which, hurting SEO and user experience.

Also practice working with changes sizes of things and working with containers. I noticed in your code you left a lot of things their default size. While this is okay sometimes, in this case the fonts and images are too big for their parent containers.

Working on these will really help you improve your code greatly.

Keep up the good work!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord