Skip to content
OverviewSolutions
16
Comments
118
Ediongsenyene Joseph I.
@IEdiong

All comments

  • Ediongsenyene Joseph I.β€’1,675
    @IEdiongPosted 4 months ago

    Nice one Rahul, keep it up.

    0
  • Eli Silkβ€’660
    @elisilkSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of taking on the challenge of the "Ideas to test yourself" about noticing that the font sizes in this project are slightly smaller in the mobile layout and finding a way to reduce font size for smaller screens without using media queries. I was able to learn about how to use calc and clamp and vw units to implement what I think is a nice solution for this.

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

    I feel like my text sizes, letter spacing, and line heights never quite match the solution. Not sure what the issue is there. I had access to the Figma file for this challenge, and so tried to design based around the given units in that design file rather than the jpg screenshots. So not really sure the best way to think about approaching that. Or maybe I made a mistake in reading the Figma file or in implementing the typography in some way.

    Responsive blog preview card utilizing fluid typography

    1
    Ediongsenyene Joseph I.β€’1,675
    @IEdiongPosted 4 months ago

    Nice work! Well executed πŸ‘

    0
  • Ediongsenyene Joseph I.β€’1,675
    @IEdiongPosted 4 months ago

    Hello Yashi πŸ‘‹, great job in completing this challenge. I noticed your card's (".frame" class) box-shadow doesn't match that of the given Figma design along with some minor spacing values.

    The' box-shadow' value is 0px 25px 25px rgba(0, 0, 0, 0.05). Here is a link to a picture showing how to get CSS values and more from a Figma design (assuming you don't have the Figma dev mode).

    Also, Frontend mentor have a great article on how to work with a design file, I recommend you check it out to learn more about this topic.

    I hope this was helpful to you, Shalom!

    Marked as helpful
    0
  • Ediongsenyene Joseph I.β€’1,675
    @IEdiongPosted 10 months ago

    Hello Roksana πŸ‘‹, great job in completing this challenge. Some suggestions:

    • the div with the .social-media class can be converted into an unordered list (ul). The ul tag conveys semantic meaning.
    • the button tag used for the social links can be converted to anchor tags (a) as they are meant to be "links to social sites" after allπŸ€·β€β™‚οΈ

    Just picture your site without the styles, when someone visits it they should see a picture of the lady, her name, location and what she does, then a list of links to her social media profile. This is just to help you with the HTML semantic tag.πŸ˜‰

    Lastly, I love the way you brought out the design with pixel precision, how did you achieve this? You mentioned that you used a "Pixel Perfect Extension", can you share the link to the extension download page?

    I hope this was helpful, Shalom!

    Marked as helpful
    1
  • Ediongsenyene Joseph I.β€’1,675
    @IEdiongPosted almost 3 years ago

    Hello Kelvinho πŸ‘‹, great job in completing this challenge. Here are some suggestions:

    • the .nft-title should contain a heading tag enclosed by the <a>. eg <a class='nft-title'><h1></h1></a>. This should help fix one of the accessibility issues raised here.

    • you could fix the responsiveness issue by using media queries. If you're not familiar with media queries check out this post on responsive design.

    • Also, look into the accessibility and HTML issues raised here.

    I hope this was helpful to you, Shalom!

    Marked as helpful
    1
  • Erikβ€’190
    @emmcgillSubmitted almost 3 years ago

    My second submission. Potential improvements include putting a transition on the hover effects and centering the icon a little better.

    NFT Preview Card Component

    1
    Ediongsenyene Joseph I.β€’1,675
    @IEdiongPosted almost 3 years ago

    Hello Erik πŸ‘‹, great job in completing this challenge. Some suggestions:

    • the image of the eye doesn't show when I hover over the image. You should fix this.

    • the image should be wrapped inside an <a> tag, since it's a clickable element.

    • Look into the accessibility issues raised here. Click on the read more to gain more insight into the problem.

    I hope this was helpful, Shalom!

    Marked as helpful
    1
  • Ediongsenyene Joseph I.β€’1,675
    @IEdiongPosted almost 3 years ago

    Hi Asif,

    The stats could be an unordered list rather than a div. This is for semantics. Picture someone going through this your page without their CSS enabled, how will they consume the content. Think about this.

    I hope this was helpful to you, Shalom!

    Marked as helpful
    1
  • Ediongsenyene Joseph I.β€’1,675
    @IEdiongPosted almost 3 years ago

    Hi @halamh πŸ‘‹, some suggestions here:

    • Set a max-width in px on the <main> tag in order to make the content look consistent even as the screen sizes increase beyond 1440px.

    • Look into the accessibility issue raised here. It's quite easy to fix all you have to do is just click on the learn more and read through. You would be glad that you did.

    I hope this was helpful to you, Shalom!

    Marked as helpful
    1
  • Ediongsenyene Joseph I.β€’1,675
    @IEdiongPosted almost 3 years ago

    Hello Vidottizz πŸ‘‹, nice solution. Some suggestion:

    I hope this was helpful, Shalom!

    Marked as helpful
    0
  • Ediongsenyene Joseph I.β€’1,675
    @IEdiongPosted almost 3 years ago

    Hello Khaled πŸ‘‹, this is a well built component. Some suggestions:

    • The images are meant to have a colored border around it, refer to the design.

    • This is a personal suggestion: I feel you could play around with the layout at different screen sizes even though it wasn't given in the design. You could refer to my solution for this challenge to see how the layout changes at different screen sizes.

    • Also look into the accessibility issues raised here.

    I hope this was helpful, Shalom!

    Marked as helpful
    0
  • Ediongsenyene Joseph I.β€’1,675
    @IEdiongPosted almost 3 years ago

    Hello Khaled πŸ‘‹,

    • The content of the .box-two p should be an unordered list of items and not a paragraph that is formatted to look like a list of items

    • The sign up button should have a box-shadow as shown in the design

    • The border-radius should be set on the parent component of the whole component rather than being set on each section of the component.

    • Also, look into the accessibility issues raised here.

    I hope this was helpful, Shalom!

    Marked as helpful
    0
  • Ediongsenyene Joseph I.β€’1,675
    @IEdiongPosted almost 3 years ago

    Hello Vikrant πŸ‘‹, this is a well built component. Some suggestions:

    • The image in the .cardImg should be wrapped in an <a> tag, along with the content of the <h1> and the content of the .cardCreator span. This is because those items seem to be clickable (links).

    • Set the hover state of the <h1> and .cardCreator span. The color should change on hover according to the design spec.

    I hope this was helpful, Shalom!

    0