Skip to content
OverviewSolutions
4
Comments
4

Austin Wheeler

@awheelrNorth Carolina40 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Austin Wheeler•40
    @awheelrPosted 3 days ago

    Hey there Abudullah, you did a great job and it looks well done! I can only offer some minor critiques about styling. I think the section that holds all of the recipe information below the image could've gone without padding around it, that way you use all available space for the content. Also, the Nutrition section looks great as is, but I would consider using a table as it's likely the "proper" way of handling that section of content. Other than that I'll tell you the same thing I keep telling myself which is to work on using semantic elements within your html when it makes sense. For example all of the content on this page is basically divided into sections which makes it the perfect place to use the <section> element. Hope that helps in some way and good luck on your future projects!

    0
  • Austin Wheeler•40
    @awheelrPosted 8 days ago

    Looks great, spot on with the original's scale! Also, you did a great job using the correct HTML elements sometimes I forget there are specific elements for things like an address. It made me realize I need to go back and fix a few things.

    0
  • Austin Wheeler•40
    @awheelrPosted 11 days ago

    Looks great! Only piece of advice I can give you is to design mobile first in Tailwind as it becomes a lot easier later. The documentation does a better job explaining than I can so I'll link that here. I will say to keep in mind that by default Tailwind adopts this mobile first design, so something like w-4 md:w-6 is going to apply the default width of w-4 to a screen that's smaller than whatever is specified. Which in this case is md meaning anything smaller than 48rem (768px). I had originally though it was that opposite so figured I would clarify just in case you made the same mistake.

    0
  • Rupa135•10
    @Rupa135Submitted 18 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud as I have used CSS variables for very first time

    What challenges did you encounter, and how did you overcome them?

    none

    What specific areas of your project would you like help with?

    I would like to check on my styling part

    QR code using HTML5 and CSS

    3
    Austin Wheeler•40
    @awheelrPosted 18 days ago

    I would just like to say that it looks beautiful as is and the use of css variables are definitely the way to go! However, since we're critiquing based on similarity between our solution and original design two things stood out to me:

    First off since we're wanting to create some sort of gap between the image and the header below it would be a lot easier to do so if you wrapped both the <h1> and <p> elements within a <div>. After doing so you can easily create this gap by changing your container class display property to Flexbox and adding a gap.

    Also instead of relying on margins to create spacing between the two text elements you can use the same method!

    You can read more about how to use Flexbox here!

    <div role="main" class="container">
    <img src="./images/image-qr-code.png" alt="qr code">
    <div class="text-content">
        <h1>Improve your front-end skills by building projects</h1>
        <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
</div>

    .contanier {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

    The second thing that stood out to me is similar to the first which is how you centered the content by using top and bottom margins. I'm definitely not the right person to ask about the right way to be doing this so I'll leave you with this link to read up more on it here.

    All I'm able to give you for now is the solution I used which was to once again use Flexbox. I did this by creating a wrapper element called <main> in this instance and then changed it's display property to flex. I then made sure it was centering both horizontally and vertically by using justify-content and align-items. And finally you need to make sure to set a height because whatever the height is your content will be centered within that area. For instance if the height was set to 0 nothing would happen but if it's set to 100vh which is approximately the size of the entire viewport it will center in accordance to that which would be the center of the our screen.

    <main>
  <div class="container">
    <img src="images\image-qr-code.png" alt="image-qr-code">
    <div class="text-content">
      <h1>Improve your front-end skills by building projects</h1>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
  </div>
</main>

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

    Hopefully this helped to some degree and good luck on the other challenges!

    0