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

  • Pickle• 60

    @Augurk66

    Posted

    Great job on completing this assignment!

    • It is handy to have a fallback font in your CSS in case that the Google font doesn't work. You can just add a second font. Such as:

    font-family: "Figtree", sans-serif;

    • Accessibility is very important , especially for those how are using screen readers. Your page needs a <main> element which wraps your page content. As is says, it is the main content of the page. Wrap your .container in a <main> tag.
    • There is a date on the card, HTML has also a special element for time. This is also very important for those who are not able to visually see the page. Wrap the date in a <time> element and give it the correct date. I used a <div> to wrap the content and it should look like this:

    <div class="date">Published <time datetime="2023-12-21">21 Dec 2023</time></div>

    • Give your .container a box-shadow. I used 10px on right and on the bottom.
    • Your label needs some rounded corners.
    • I also made a mistake by not giving the .container a hover. Add .container:hover and change the colour of the heading.

    I strongly recommend to add the improvements to your project after feedback of others. There are very professional members on here which can provide good feedback. For me this is the best way learn and to improve my skills.

    Good luck with your next projects!

    0
  • Pickle• 60

    @Augurk66

    Posted

    Good job Adib! I love the simplicity of your code and I like your comments in your CSS code. This makes the code very readable for everyone.

    • I see that you use both px and rem for your font-size. Using rem for all the font sizes improves the accessibility . I also used 15px for the text. Simple trick is to divide px by 16. In this case the paragraph would we approximately 0.9 rem.

    • You don't need to use font-weight of 400 for your paragraph, as 400 is set by default.

    • In the HTML you are missing the <main> element which is wrapping your content. Wrap the <div> in a main tag. I also made this mistake and now I am spreading this wisdom.

    Marked as helpful

    1
  • Sulaimon Abdulrahman• 10

    @Abdulrahmanololade

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm proud of the fact that i was able to get the css styling in one go.

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

    The challenge i encountered was when i had to add the background color. I had to check meny times just before i can get the something close to the one in the image given.

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

    I'm not really sure if there is any where in the code where it need to be improved and if there is one, then i'm definitely willing to learn more.

    QR-code solution using css grid, box shadow and flexbox

    1

    Pickle• 60

    @Augurk66

    Posted

    Nice work Sulaimon! You can find the background colour in the style-guide.md file. Which is in the package you have downloaded to start this project. I used the "body" tag to give the background the desired colour. The colour for this background is hsl(212, 45%, 89%).

    body { background-color: hsl(212, 45%, 89%); }

    In the style-guide you can also find the specific font of this component. This component uses Google Fonts. You can add those by using the @import url('https://fonts.googleapis.com/thisisanexamplelink') tag in your css.

    However using CSS within your HTML file is handy, I strongly recommend you to use a separate .CSS style file. With this method you separate your languages and it makes the code more readable.

    Keep it up!

    Marked as helpful

    1