All comments

• 

  Spirit•220

  @git-riteshSubmitted over 1 year ago

  It's my first ever Challenge Project that I completed with Responsive Design. Responsiveness was the thing that took me a while as I've applied Media Queries in my project for the first time on my own. I watched tutorials and used Media Queries earlier but wasn't comfortable until I made my hands dirty with Media Queries on my own.

  

  Product preview card component using Flexbox (Responsive)

  2

  70
  

  andreimaier•180

  @andreimaierPosted over 1 year ago

  Congratulations on completing the challenge! You're right that you only learn by doing it yourself! Keep up the good work!

  Marked as helpful

  2

  This comment has received 1 replyShow
• 

  Pythonic•20

  @pyth0n1c0Submitted almost 2 years ago

  Guys, what are your best practices for HTML and CSS? It would be of great help to a newbie.

  

  My First HTML/CSS Exercise

  3

  80
  

  andreimaier•180

  @andreimaierPosted almost 2 years ago

  Hi there! 👋 First off, great job on implementing the design!

  Here are a few suggestions on how you can improve your code:

  • try setting display: flex to your body element

  Syntax

  body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  This will align your div.center vertically.

  • add an alt description to your img.qr-code

  For More info on when you should use alt attributes and when not to, check THIS 📚

  • try to use Semantic HTML as much as possible
    • for example by replacing your div.center with the main element
    • you can also add an h1 heading, give it a sr-only class and hide it using something like this

  .sr-only {
      position: absolute;
      width: 1rem;
      height: 1rem;
      padding: 0;
      margin: -1rem;
      overflow: hidden;
      white-space: nowrap;
      border: 0;
  }
  

  I'm also new, but I learned a lot from comments and looking at others' solutions.

  If you have any questions or need further clarification, feel free to reach out to me. I'll do my best to help!

  **Keep up the good work!!**🙌🏻

  3