Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Reuben👾• 560

    @Rubylenshy

    Posted

    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

    @Rubylenshy

    Posted

    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

    @Rubylenshy

    Posted

    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

    @Rubylenshy

    Posted

    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

    @Rubylenshy

    Posted

    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

    @Rubylenshy

    Posted

    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

    @Rubylenshy

    Posted

    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

    @jihadsamad

    Submitted

    A ll feedback is welcome Thank you in advance

    QR code

    1

    Reuben👾• 560

    @Rubylenshy

    Posted

    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

    @Rubylenshy

    Posted

    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• 20

    @Ineke84

    Submitted

    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

    @Rubylenshy

    Posted

    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

    @vivo1310

    Submitted

    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

    @Rubylenshy

    Posted

    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

    @thresholdtech

    Submitted

    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

    @Rubylenshy

    Posted

    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
  • Reuben👾• 560

    @Rubylenshy

    Posted

    Hi, @mohamedshawgi 👋 Congratulations on completing this challenge. Here are a few tips to improve:

    • On this declaration .sedan,.suvs,.luxury{height: 80%;}, that height would give you an offset height which I think would get too big at some point. You could just add padding to the cards .sedans, .suvs, .luxury{ padding: 40px; } Hence you won't need this { height:auto; max-height: 650px; }
    • And your .container could be position centered just like .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } Hence, the {width: 55%;} wouldn't matter

    Note: This might not be a perfect correction but it could guide you

    Great Work @mohamedshawgi, Keep Coding

    Marked as helpful

    0
  • Reuben👾• 560

    @Rubylenshy

    Posted

    Hi @Girishbanua, 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-card"></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.
    • How about using an external stylesheet, how cool and neat could that be? You should try it out.
    • And you could make your class="attribution" a footer tag instead of a div if you wish.

    Great Work @Girishbanua, Keep Coding

    Marked as helpful

    0
  • Joseph Fola• 590

    @Fola-Joe

    Submitted

    How could I have coded the footer better? How could I color the icons when I hover? Thanks in advance!

    Clipboard landing page

    1

    Reuben👾• 560

    @Rubylenshy

    Posted

    Hi, @Fola-Joe congratulations on completing this challenge,

    • Concerning the hover state on the footer icons, making a fill property will not change the icon's color unless you add the svg/path to the markup. This resource adds a filter of your desired color, check it out https://codepen.io/sosuke/pen/Pjoqqp.
    • And you can also make your <section></section> a <div></div> if you do not have a heading, it's a markup rule to always have headings -- h1- h6 -- in a section tag for best practise.

    Great Work - Happy Coding @Fola-Joe

    I hope this helps

    0
  • Reuben👾• 560

    @Rubylenshy

    Posted

    Hi @chegx 👋, congratulations on completing this challenge. You did a great work 💯

    • You do not need a better way to make those stars. I did the same thing as well but I needed some animation on those stars, so I had to add the 15 img tags.
    • And to avoid the html markup validation error on the report just make that <section id="bottom-section" > a div 'cos you need headings in section tags

    Great Job @chegx

    Marked as helpful

    1
  • Reuben👾• 560

    @Rubylenshy

    Posted

    Hi @Sxnty 👋, congratulations on completing this challenge, you did a nice job

    I have some suggestions to improve your html validations:

    • Wrap your <section class='hero'></section> in a <main></main> tag to avoid the landmark validation error on the report, it actually helps the browser identify it's content as the main contents of the page
    • Add a title attribute to your class="footer-socials", like this <a href="" title="Facebook">...</a>
    • And in your markup, according to html markup rules a section tag must start with the first level of heading - h1, and if you don't want that simply use a div - it won't hurt nobody, and it's help improve the cleanliness on your code.

    Great Work @Sxnty

    Marked as helpful

    1
  • Reuben👾• 560

    @Rubylenshy

    Posted

    Hi @dadi-frontEnd 👋, congratulations on completing this challenge , you have done a good job.

    • It is quite responsive on mobile screen but the <div class="chat"> should have a background color of white to make the texts readable.
    • Wrap the class="container" in a <main></main> tag to avoid landmark validation errors on the report

    Great Job @dadi-frontEnd and Happy Coding

    Marked as helpful

    0
  • Reuben👾• 560

    @Rubylenshy

    Posted

    Hi @Ruben 👋, good job for completing this challenge!

    Here are some suggestions to improve your code:

    • I think you left out the Qr code image while uploading your project.
    • Add an alt attribute to your img tag
    <img href="" alt="QR Code"> - And to your <div class="container">, wrap it in a main tag just like <main> </main> since it shows the main content of the web page

    Great Job and happy coding @Ruben

    Marked as helpful

    0
  • Reuben👾• 560

    @Rubylenshy

    Posted

    Hi @Fola-Joe this is actually nice enough, I myself still didn't get some things right but you did.

    • You could add an 'alt' attribute to the image. Kudos 👌.

    Please mark it as helpful. 👍

    Marked as helpful

    1