Skip to content
OverviewSolutions
14
Comments
20
Reuben👾
@Rubylenshy

All comments

  • Reuben👾•560
    @RubylenshyPosted about 2 years ago

    Hi, @Exiluert 👋. Congratulations on completing this challenge, you did a nice job. You could got one suggestion:

    • The <div class="card"></div> should be wrapped in a <main></main> tag, for easy recognition by any web browser, it stands out as the main content of the web page or just rename the div to main.

    Great Job once again @Exiluert

    Happy Coding

    0
  • Reuben👾•560
    @RubylenshyPosted about 2 years ago

    Hi @Valeryio 👋. You've done quite well on this one, good job. Maybe this few suggestions might be of help:

    • With responsiveness in view, that .card won't survive much with the kinda width property applied to it, you should check out how to make use of these max-width and min-width from this resource https://www.freecodecamp.org/news/css-properties-examples/
    • You should try to use a display: flex; property, it saves you some more lines of code and excess margins
    .plan{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

    While you make the html markup work like this:

    <div class="plan">
       <img src="" alt="">
    <div>
        <h2>Annual Plan</h2>
        <span class="price">$59.99/year</span>
   </div>
       <span class="change" >Change</span>
</div>

    Check out this resource for more on flex display. https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

    Hope this helps

    Keep Coding @Valeryio

    0
  • Reuben👾•560
    @RubylenshyPosted about 2 years ago

    Hi @Zilvis0 👋. You might wanna go over the deployment of your page,

    • <link rel="stylesheet" href="./index.scss"> should be a <link rel="stylesheet" href="index.scss"> as the former format will try to get out of the current directory and wouldn't find the scss file.
    • <div class="product-wrapper"> should be wrapped in a <main></main> tag or rather rename that to a main

    I hope this helps

    Keep Coding @Zilvis0

    Marked as helpful
    1
  • Reuben👾•560
    @RubylenshyPosted about 2 years ago

    Hi @uchethecreator 👋, a very nice job you've done here. However, here are some suggestions on how your build-up should look exactly like the design:

    • Change <div class="container"></div> to <main></main> tag as this will show that it is the main content of the webpage, do a similar thing to the <div class="attribution"></div>, change that to a <footer></footer> tag.
    • You might wanna add an alt attribute to your img tag & check the HTML validation errors on the reports to enhance your code.
    • You could check out my solution on this same challenge if you wish to make it responsive.
    • An easy way to center your container:
    .container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    • You could center a div--with flexbox--just like this:
    div{
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

    I hope this helps 👍

    Keep Coding @uchethecreator

    Marked as helpful
    0
  • Reuben👾•560
    @RubylenshyPosted about 2 years ago

    Hi @1991facundo 👋, a very nice job you've done here. However, here are some suggestions on how your build-up should look exactly like the design:

    • I see that @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap'); is not placed in the first line of your stylesheet code. Move that code up to the first line if you may.
    • Change <div class="container"></div> to <main></main> tag as this will show that it is the main content of the webpage, do a similar thing to the <div class="attribution"></div>, change that to a <footer></footer> tag.

    I hope this helps 👍

    Keep Coding @1991facundo

    Marked as helpful
    0
  • Reuben👾•560
    @RubylenshyPosted about 2 years ago

    Hi, @Ariyoola45 👋. Congratulations on completing this challenge, here are some suggestions to improve your code:

    • The stylesheet and img references should be this:
    <link rel="stylesheet" href="css/styles.css">
<img src="img/image-qr-code.png" alt="qr code">

    respectively.

    • Your <section class="step1"></section> should be a <main></main> tag according to markup rules, hence it shows that its child elements are the main contents of the page.
    • And you can center that same card by adding this to your code:
    .step1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    I hope this helps

    Happy Coding @Ariyoola45

    0
  • Reuben👾•560
    @RubylenshyPosted about 2 years ago

    Hi, @LautaroMendez86 👋. Congratulations on completing this challenge, you did a nice job. You could try these few suggestions out on the accessibility:

    • How about you make <div class="attribution"></div> a <footer></footer> instead, seems cool and more structural.
    • You also need a JS file to make the Mark all as read perform its functionality. deberías ver la solución en mi perfil si no te importa.

    espero que esto ayude :)

    Keep Coding @LautaroMendez86

    Marked as helpful
    1
  • jihadsamad•10
    @jihadsamadSubmitted about 2 years ago

    A ll feedback is welcome Thank you in advance

    QR code

    1
    Reuben👾•560
    @RubylenshyPosted about 2 years ago

    Hi, @jihadsamad 👋. Congratulations on completing this challenge, you did a nice job. You could try these few suggestions out:

    • The <div class="first-div"></div> should be wrapped in a <main></main> tag, for easy recognition by any web browser, it stands out as the main content of the web page or just rename the 'div' to 'main'.
    • And an easy way to position your card at the center of the page without any margin is:
    .first-div {
     position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%)
}

    I hope this helps :)

    Keep Coding @jihadsamad

    0
  • Reuben👾•560
    @RubylenshyPosted about 2 years ago

    Hi, @alexisshy 👋. Congratulations on completing this challenge, you did a nice job. You could try these few suggestions out on the accessibility:

    • The <div class="card"></div> should be wrapped in a <main></main> tag, for easy recognition by any web browser, it stands out as the main content of the web page or just rename the 'div' to 'main'
    • Thank you for adding an alt text to the <img> tag, we sometimes think it's unnecessary but the browser appreciates it

    I hope this helps :)

    Keep Coding @alexisshy

    Marked as helpful
    0
  • Ineke•80
    @Ineke84Submitted about 2 years ago
    What are you most proud of, and what would you do differently next time?

    In the first version I didn't use semantic html (hadn't heard about it yet). So next time I would use that inmediately.

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

    Did not really encounter problems.

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

    I completed this challenge quite some time before learningpaths, I already got some feedback.

    QR component using html and css

    1
    Reuben👾•560
    @RubylenshyPosted about 2 years ago

    Hi, @Ineke84 👋. Congratulations on completing this challenge, you did a nice job. You could try these few suggestions out on the accessibility--the best practice like you said:

    • The <div class="container-main"></div> should be wrapped in a <main></main> tag, for easy recognition by any web browser, it stands out as the main content of the web page or just rename the 'div' to 'main'
    • How about you make <div class="attribution"></div> a footer instead, seems cool and more structural.
    • You could also add an 'alt' attribute to the image. Kudos 👌.
    • And an easy way to position your card at the center of the page is: .conatainer-main {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)

    I hope this helps :)

    Keep Coding @Ineke84

    Marked as helpful
    0
  • Vi•10
    @vivo1310Submitted about 2 years ago

    I'm welcome any comment and if anyone could suggest any useful resource for implementing Grid and Flexbox for this challenge, that would be really helpful. What approach do you use to solve this? Mobile-first or do desktop first then use media query? Thank you all!

    Responsive Product Preview Card using Flexbox

    2
    Reuben👾•560
    @RubylenshyPosted about 2 years ago

    Hi @vivo1310, congratulations on completing this challenge, you did a very nice job on this. It's about 80% pixel perfect, which is very nice. Here are a few suggestions on the accessibility of your code:

    • Your <div class="container"></div> should be wrapped in a <main></main> tag for easy recognition by the any web browser, it stands out as the main content of the webpage according to markup rules. Or rename the div to main.
    • And there seems to be an error in the link:font-googleapi, this could be because the format or link text was altered. How about you adopt the @import style of fonts, that seems easy and less wordy, you should try it out. Copy and paste to the first line of your stylesheet and you're good to go.

    Great Work @vivo1310, Keep Coding

    Marked as helpful
    1
  • threshold•50
    @thresholdtechSubmitted about 2 years ago

    Hi guys, this is my 3rd challenge. I'm getting really excited and curious about the other challenge, but I need to really understand each step.

    This one is pretty simple, yet I'm still struggling. Any feedback is really appreciated, pals. TIA. HAPPY CODING! 😊

    HTML, CSS

    2
    Reuben👾•560
    @RubylenshyPosted about 2 years ago

    Hi @thresholdtech, congratulations on completing this challenge, nice work you have done here. Here are a few suggestions on the accessibility of your code:

    • Your <div class="main-page"></div> should be wrapped in a <main></main> tag for easy recognition by the any web browser, it stands out as the main content of the webpage according to markup rules or rather rename the div to main.
    • And you could center your "main-page" by writing this: {position: absolute; top: 50%, left: 50%, transform: translate(-50%, -50%)}

    Great Work @thresholdtech, Keep Coding

    0