Skip to content
OverviewSolutions
5
Comments
5
Patrícia Silva
@patriciarrs

All comments

  • Patrícia Silva•105
    @patriciarrsPosted about 1 month ago

    Greetings, Ajinkya! 👋

    Good effort on this challenge! 👍 The layout looks good on a range of screen sizes 🙂

    I want to suggest taking another look at using semantic HTML on your site as it will also improve accessibility. Currently, you are using div tags to wrap other elements, but other tags (for example, main and section) are more suitable.

    If you’d like to learn more about using semantic HTML on your site, check out this course from web.dev.

    Regarding the heading elements (h1–h6), you can use multiple same-level elements (except for h1) as long as it makes sense. For example, instead of  h2, h3, and h4 for the various section titles, they can all be h2.

    If you’d like to learn more about using the heading elements on your site, check out this article from MDN.

    "Separation of concerns" is a good practice regarding HTML and CSS. Considering this, you could use HTML only for markup and have all the styles in the CSS file, instead of having inline styles in the HTML. This makes it easier to maintain and debug your page, as well as avoid CSS specificity-related issues.

    The solution has some differences from the design. One of the most noticeable is the font color. In the given style-guide.md file, there are various font colors used. Try out some of them to see what matches better (or if you have the Figma file, check there directly).

    I hope you find this helpful.

    Happy coding!

    0
  • Patrícia Silva•105
    @patriciarrsPosted 3 months ago

    Greetings, musaabuu! 👋

    Good effort on this challenge! 👍 The layout looks good on a range of screen sizes 🙂

    I want to suggest taking another look at using semantic HTML on your site as it will also improve accessibility. Currently, you are using div tags to wrap other elements, but other tags (for example, main and nav) are more suitable.

    If you’d like to learn more about how to use semantic HTML on your site, check out this course from web.dev.

    You may also consider using the :focus pseudo-class so that, when a user navigates the page with the keyboard, he gets the same experience as if he were hovering the links.

    I hope you find this helpful.

    Happy coding!

    Marked as helpful
    1
  • Patrícia Silva•105
    @patriciarrsPosted 4 months ago

    Greetings, Arunstev! 👋

    Good effort on this challenge! 👍 The layout looks good on a range of screen sizes 🙂

    I want to suggest taking another look at using semantic HTML on your site as it will also improve accessibility. Currently, you are using div tags to wrap other elements, but other tags (for example, main and article) are more suitable.

    If you’d like to learn more about how to use semantic HTML on your site, check out this course from web.dev.

    The solution has differences from the design. The most noticeable is the font family.

    To correctly import the specified font family, you can go to the link you have in your @import in the CSS file and then click "Get font" -> "Get embed code".

    I hope you find this helpful.

    Happy coding!

    Marked as helpful
    0
  • Patrícia Silva•105
    @patriciarrsPosted 4 months ago

    Greetings, Mutsah! 👋

    Good effort on this challenge! 👍 The layout looks good on a range of screen sizes 🙂

    I want to suggest taking another look at using semantic HTML on your site as it will also improve accessibility. Currently, you are using div tags to wrap other elements, but other tags (for example, main and footer) are more suitable.

    If you’d like to learn more about how to use semantic HTML on your site, check out this course from web.dev.

    The solution has differences from the design. The two most noticeable are the font family and the card height.

    • To correctly import the specified font family, add the following to the head tag:
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@700&display=swap" rel="stylesheet">

    To get the above, you can go to the link you have in your head tag and then click "Get font" -> "Get embed code".

    • To fix the card height you can add the height property to the card element to match the design.

    Edit: A better practice than adding a fixed height to the card, is to have the correct spacing between elements by using the margin and padding properties as needed. To check the spacing between elements, in the Figma files select an element, press Alt, and hover another element.

    I hope you find this helpful.

    Happy coding!

    0
  • SlothyPete•20
    @slothPete7773Submitted over 3 years ago

    How do I make mask color on the image? Also, in desktop view, when I add more padding, it takes up space in the left image, how should I solve that?

    Simple card component

    2
    Patrícia Silva•105
    @patriciarrsPosted over 3 years ago

    Hello there, I'm not sure if this is the best option but I used the CSS filter property to change the image color (https://developer.mozilla.org/en-US/docs/Web/CSS/filter). When I open the page it only shows the mobile design.

    1