Desktop and mobile solution using CSS Grid

Community feedback

• 

  P

  Brice THIBAULT•100

  @DarkjuliusPosted about 2 years ago

  Hello, I made a big update to the solution I had proposed.

  I studied a little more in detail CSS Grid. I still have to work on the subject through practical cases. This is not what is missing.

  I reviewed the units of measurement so that the responsive mode corresponds to what was requested.

  I followed the advice to start the challenge in mobile first directly.

  I am satisfied with the result. I updated my GitHub repository.

  Thanks for your advice and have a nice day.

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • To center you content to your page, add the following to your Body Element:

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  • Add a max-width to the component’s container to prevent it from warping on larger screens.

  • Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout and give you full control of it.

  Here is how it looks like fully implemented: EXAMPLE

  • To enhance the semantics of your component, you want to wrap each individual testimonial component in a Figure Element, the individuals information should be wrapped in a Figcaption Element and lastly, the testimonial itself should be wrapped in a Blockquote Element.

  Code:

  <figure>
     <figcaption></figcaption>
     <blockquote></blockquote>
  </figure>
  

  More Info:

  ARTICLE

  • Implement a Mobile First approach 📱 > 🖥

  With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  0

  ---

  

  P

  Brice THIBAULT•100

  @DarkjuliusPosted about 2 years ago

  @vcarames Thank you for all this information which I will use. I will take the time to review the model in addition to the elements that you have brought me.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Darkjulius, congratulations on your new solution!

  Great code and great solution! I did this challenge too and know how hard it is to set up this grid layout. I think you've done a really good job building everything! Here are some tips for you:

  1.Fix the alignment and the container size adding max-width: 1110px and add flexbox

  body {
      display: flex;
      background-color: hsl(0, 0%, 81%);
      font-family: 'Barlow Semi Condensed', sans-serif;
      font-size: 13px;
      height: 100vh;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  2.You've missed the color for the background, in this case is background-color: #EDF2F8 and add it to the body.

  3.The html structure you’ve used here works, but if you want to make this even better, you can replace the <div> you’ve used to keep the blocks and replace with some better html markup and semantic, for example, the main block can be wrapped with <main> and each testimonial card with <article>, then you can use a tag that not everyone knows, for the paragraph containing the quote you can replace the <p> with <blockquote> that is tag the describe exactly its content.

  This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

  ✌️ I hope this helps you and happy coding!

  0

  ---

  

  P

  Brice THIBAULT•100

  @DarkjuliusPosted about 2 years ago

  @correlucas Thank you for your feedback and all the information. I will stop myself on the project in order to improve it.

  0