Testimonial-Grid-Section using HTML5 and CSS3

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojek

  Posted over 4 years ago

  Hi Shreya,

  Well done :D

  I have checked your HTML structure, CSS, a few tips for me:

  • every testimonial you can treat as a article with header;
  • I think status (graduate) doesn't have to be the heading;
  • this component we can see as a single page component so also we can add the h1 tag, for example for screen readers => sr-only class with hidden;
  • possibly the blockquote can be also added;
  • I would suggest to use readable classes (descriptive) => If you didn't learn BEM I'd recommend to start learn it;
  • remove styles from CSS and transfer them to the CSS file;
  • in this project it will be better do not leave an empty alt;
  • reset the styles by adding selector * { margin/padding 0 and box-seizing: border-box };
  • don't add height and width to the card (that's a reason why you have to learn flexbox or grid => sometimes we have to add height or width but depends on the project);
  • in this project don't use position relative or absolute;
  • it will be better to start building project from mobile first with one column, then for tablets: create two rows with two boxes each and below the 5th box for the entire length of the container and finally: desktop design pattern;
  • check your HTML issue report (try to six it).

  In the end, @sayide mentioned already about it, but I'd recommend firstly start to learn flexbox and when you will be confident with it start to learn grid (don't rush, it will take some time and it is better to learn slowly but effectively) => then you will be able to create good RWD for mobiles, tablets, desktops. Also, about headings: when you want to start your HTML5 structural elements with a h2 (if h1 has been used on the page of course) and then you have to move down the levels gradually if there are other subheadings.

  Two courses providing by Wes Bos for free:

  • flexBox;
  • grid.

  Greetings :D

  27
• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 4 years ago

  Hey, Shreya Bera! 👋

  Nice effort on this challenge! 👏 The desktop layout of your solution looks pretty good! 👍

  Like SeyideHundeyin helpfully suggested, looking into and using CSS grid to create layouts like this will make things much easier for you when creating the layout itself and making it responsive! 😉

  I also suggest taking a look at your solution report and trying to clear up some of the errors that are there (it seems that you used some backslashes instead of forward slashes in your file paths).

  Keep coding (and happy coding, too)! 😁

  11
• 

  seyide hundeyin•440

  @SeyideHundeyin

  Posted over 4 years ago

  Hi Shreya,

  I would recommend using CSS grid for this challenge and also stick with using h1-h6 without jumping from h1 to h3.

  Also on mobile, it doesn't sit in the middle you can use "margin: 0 auto;" to centralize your container.

  You can learn more about CSS grid here: https://www.youtube.com/watch?v=jV8B24rSN5o&ab_channel=TraversyMedia

  Hope this helps!!

  Keep coding and happy coding!!

  11