Skip to content
OverviewSolutions
2
Comments
2
Gillian Oliveira
@lia-oliveira

All comments

  • gitere001•60
    @gitere001Submitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I learnt how to use tabindex to make a non-Interactive elements like h1 to use pseudo class focus. this is by use tabindex="".

    I also learnt about box-shadows

    Implimented blog preview card with html and css

    1
    Gillian Oliveira•20
    @lia-oliveiraPosted about 23 hours ago

    Excellent work! Your solution is very close to the original. You’re using advanced CSS techniques for selecting elements, variables for reusable properties like colors, and responsive units—great job! What suggestions could I offer for improvement?

    Perhaps:

    Adding a hover state to the link so it changes color when the mouse hovers over the title. This feature was mentioned in the project description on the Frontend Mentor site (though not included in the downloaded files). Currently, the color change happens only when users use the Tab key to access links.

    Paying attention to small details, such as the card’s border-radius, which should be double that of the image (20px vs. 10px). In your solution, both are set to the same value (10px). The line-height (150%) also wasn't applied.

    Overall, outstanding work!

    0
  • rafly24•10
    @rafly24Submitted 6 days ago
    What are you most proud of, and what would you do differently next time?

    i know the structure the styling with css

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

    first i confuse how to make the background the qr use the div selector or body selector

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

    i think the layouting use css

    i use color picker

    1
    Gillian Oliveira•20
    @lia-oliveiraPosted 5 days ago

    You did a great job! It looks very close to the original—congratulations! Suggestions for making it look even closer to the original:

    1. Consider downloading the font indicated in the style guide and placing it in a folder within your project, then linking to it in your CSS. The font is available for free on Google Fonts.
    2. In your CSS, apply the font, font size, and line height specified in the style guide to the main heading you wrapped in <h1> tags and to the <p> text. 3.Try not to break up the text manually. Instead, adjust the line breaks according to the box widths in Figma.
    3. To move the footer lower on the page, try using display: flex on the body as you did, and add flex-direction: column;.
    4. For your GitHub repo, consider uploading only the files that are part of your project, without extra references. Alternatively, you could create a separate folder to store references."
    0