https://github.com/Papi84/four-card-feature-section-Master/blob/main/s

Community feedback

• 

  P

  ownedbyanonymous•190

  @ownedbyanonymousPosted 3 months ago

  Hey Papi 👋🏾,
  Well done on completing the challenge. Your spacing almost matches the spacing shown in the designs which is impressive 🔥🔥. I also noticed you made use of semantic tags throughout your codebase which is a step in the right direction to improving your webpage's accessibility as screen readers and other assistive technologies rely on semantic structure of a webpage to understand and navigate its content.

  I have a few pointers on how you can make your solution match the designs and I hope you find the feedback useful.

  1. In the header section l think we could make use of the h2 element instead of the span element as we want the "Powered by technology" text to be below our h1 heading both on mobile and desktop. Wrapping the "Powered by technology" text inside a span and nesting it inside the h1 element will put the text side by side.

  <header>
   <h1>Reliable, efficient delivery</h1>
   <h2>Powered by technology</h2>
   <p>
   Our Artificial Intelligence powered tools use millions of project data points to ensure that 
   your project is successful
   </p>
  </header>
  

  2. To make our paragraph span through 2 lines as shown in the designs we could give the paragraph element a width in CSS. Below is an example of how we could achieve that

  header p{
   width: 13rem;
  }
  

  The code above targets all paragraph elements, which are descendants of the header element, and gives them a width of 36rem (which translates to 540px assuming you are using the root font size of 15px as specified in the style guide document found in the project files)

  html{
   font-size: 15px;
  }
  

  3. Noticed only the Supervisor card has a teal border color at the top and the rest of the cards have a gray border color at the top which is different from what is shown in the designs. You have the classes specified in HTML already, all you need to do is to declare them in your CSS. Here is a code suggestion of how your CSS should look like, in order to get the different border colors at the top of each card:

  .border-red {
      border-color: hsl(0, 78%, 62%);
  }
  
  .border-yellow{
      border-color: hsl(34, 97%, 64%);
  }
  
  .border-blue{
      border-color: hsl(212, 86%, 64%);
  }
  

  4. You will need to correct the typos on the h2 tags as they might affect styling. You typed hc2 instead of h2 in a couple of places.

  5. The solution you provided is not responsive. On smaller screens, the cards are supposed to show in a single column with 4 rows. You could make use of the implicit grid layout which requires you to only have a grid container defined and under the hood 1 column is created and each grid item occupies it's own row.

  .grid-container{
   display: grid;
  }
  

  Then on bigger screens (tablets, laptops, and desktops) is where you are supposed to have your current layout you have, so you can also make use of media-queries.

  Hope you find this feedback useful and if you do please mark it useful. If you have any questions and/or need assistance you are more than welcome to reach out.

  Marked as helpful

  0
• 

  Papi•260

  @Papi84Posted 3 months ago

  @ownedbyAnanimous Thank you so much for the corrections and suggestions; they were incredibly helpful. I will definitely use your tips to make my work look even better.

  0