Responsive Mobile First Landing Page, Flexbox, Vanilla CSS

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

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

  • This entire component should have been built using CSS Grid as the challenge name implies. If you are not comfortable using CSS Grid or do not know how use it, here is a link that is all about how to use CSS Grid:

  https://css-tricks.com/snippets/css/complete-guide-grid/

  • Header Element is not needed in this challenge.

  • The “30-day, hassle-free money back guarantee” is not a heading. It should instead be wrapped in a Paragraph Element.

  • The “Why Us” list needs to be created using an Unordered List Element along with the List Items Element.

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

  Happy Coding! 👻🎃

  Marked as helpful

  1

  ---

  

  Faris Thibani•220

  @Faris-ThibaniPosted about 2 years ago

  @vcarames Thank you for noticing that... CSS grid did not appear to be necessary to build this project.. but I can still use some practice with CSS Grid Thank you.

  0

  

  Faris Thibani•220

  @Faris-ThibaniPosted about 2 years ago

  @vcarames Tnx for recommending those tips the codes were executed. :)

  0
• 

  Marc•70

  @chocolateflightPosted about 2 years ago

  Nicely done! You did a good job copying the design. It is responsive, it is clear. That's very good.

  Just one or two suggestions to maybe improve it a little bit:

  1. Add a :hover effect to the .cta button, so that when I hover over the button I can see a change which indicated that it's an interactive element. You could even add an :active class that changes the button during my click

  2. Maybe this is a browser thing, but in my Chrome-based browser, I see an arrow cursor when hovering over the CTA button. Maybe add a declaration to the CSS that changes the cursor to a pointer

  3. In the design suggestion from FrontEnd Mentor, the corners of the container are rounded a bit. All it takes to do that is one simple CSS declaration to make this happen. Maybe you can make this work if you'd prefer the rounded design as well.

  Overall, nicely done!

  Marked as helpful

  1

  ---

  

  Faris Thibani•220

  @Faris-ThibaniPosted about 2 years ago

  @chocolateflight Thank you, Marc the code was implemented :) Happy that you noticed these minor bugs.

  0