Testimonial-Grid-Section using HTML5 and CSS3

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 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

  2

  ---

  

  seyide hundeyin•440

  @SeyideHundeyinPosted almost 4 years ago

  @SzymonRojek I really liked your detailed response. what do you prefer to use, flexbox or grid?

  1

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @SeyideHundeyin

  Thank you so much. I like both of them :) it is good to connect them => I still learn grid because it is difficult, lots of details we have to remember. I have read that flex is good for elements inside of the box etc but the grid is amazing for layouts. Of course, it all depends on a project. Sometimes we can use only flexbox which I did a few times :D

  Try to see them as a technologies - flexbox and grid => not flexbox / grid

  1

  

  Shreya Bera•55

  @shreya-beraPosted almost 4 years ago

  @SzymonRojek Thank you so much for this detailed feedback. I will surely look into this and update the code ! 💕💕💕💕

  0

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @shreya-bera

  I am glad you like it. Have a nice coding! :D

  1

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @SeyideHundeyin and @shreya-bera

  According to our conversation, Seyide it was a good question flex or grid. I have a read this article from the => MDN.

  I really like it.

  Cheers! :D

  1

  

  Shreya Bera•55

  @shreya-beraPosted almost 4 years ago

  @SzymonRojek Thanks! I will definitely go through this article!😊

  0

  

  seyide hundeyin•440

  @SeyideHundeyinPosted almost 4 years ago

  @SzymonRojek Thanks, I will check it now!

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 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)! 😁

  1

  ---

  

  Shreya Bera•55

  @shreya-beraPosted almost 4 years ago

  @ApplePieGiraffe Thank you for your feedback .....i will surely look into this!!❤❤😁😁

  0
• 

  seyide hundeyin•440

  @SeyideHundeyinPosted almost 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!!

  1

  ---

  

  Shreya Bera•55

  @shreya-beraPosted almost 4 years ago

  @SeyideHundeyin Thank You so much for Your feedback . I will surely look into this!!

  1