Skip to content
OverviewSolutions
6
Comments
6
P

Younes Iddahamou Idrissi

@iddahadevParis, France60 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • P
    Younes Iddahamou Idrissi•60
    @iddahadev

    Hello fellow developer!

    Nice work here! I noticed you used rem in most rules for padding and font sizes, but in other places, you used px. What methodology did you follow to choose between rem and px?

    Some colors are different from the design

    The card background's color is white, and the body is gray (#FAFAFA). The calculator card's border is blue (#549EF2).

    Don't hesitate to check others' solutions for this challenge. I just posted mine, and I'd like your feedback!

  • matthewohreluy•105
    @matthewohreluy
    What are you most proud of, and what would you do differently next time?

    i didn't exactly follow the sizing, I just want use tailwind for this

    FM tailwind 1

    1
    P
    Younes Iddahamou Idrissi•60
    @iddahadev

    I am not familiar with Tailwind, so I'll review the HTML.

    You can improve your markup by removing unnecessary divs and replacing headings (h6 and h3) with paragraphs.

    Good job!

  • P
    Younes Iddahamou Idrissi•60
    @iddahadev

    Does the solution include semantic HTML?

    Overral it does, but a few things need to be fixed:

    • There are h2 and h4 but no h1 and h3.
    • The main title should be h1.
    • The preparation title should be h2.
    • The span to make the text bold should be a strong or b.

    Is it accessible, and what improvements could be made?

    • The alt for the image should be human readable.
    • The table row does not have a table header, it should have one with scope="row"

    Does the layout look good on a range of screen sizes?

    • It looks a bit small on desktop.
    • The layout for the mobile is the same as the one on desktop.

    Is the code well-structured, readable, and reusable?

    • The HTML is readable.
    • The CSS could use a bit of structure with variables and better named classes.

    Does the solution differ considerably from the design?

    There are differences with the design such as colors, font weights and spacing, but the structure follows the design.

  • P
    Younes Iddahamou Idrissi•60
    @iddahadev

    Does the solution include semantic HTML?

    Yes, you could improve it by wrapping the list of links in an ul element.

    Is it accessible, and what improvements could be made?

    Yes, maybe you could add a target for the links.

    Does the layout look good on a range of screen sizes? Is the code well-structured, readable, and reusable?

    Yes, the only downside I see is the use of html { font-size: 62.5%; }, this hack is not readable for other devs.

    Does the solution differ considerably from the design?

    Not really except some font-size and font-weight.

  • P
    Younes Iddahamou Idrissi•60
    @iddahadev

    Does the solution include semantic HTML?

    You can improve the markup by deleting most of the div elements. The main div could be an article and the rest of them could just be h1, p, figure...

    Is it accessible, and what improvements could be made?

    You can improve accessibility by providing aria-label when needed and use good semantic HTML for elements like time (published date).

    Does the layout look good on a range of screen sizes?

    The layout has fixed size.

    Is the code well-structured, readable, and reusable?

    You can use CSS Variables to reuse some common styles like colors, font size and spacing.

    Does the solution differ considerably from the design?

    There are some elements that differ from the design like the font size of the tag, the color of the description. Good job for getting this close from the design !

  • P
    Younes Iddahamou Idrissi•60
    @iddahadev
    • Does the solution include semantic HTML?

    The semantic could be improved, for example the div could be an article element. The h3 could be a p element. The use of br is not necessary if the padding and text-alignment is correctly set.

    • Does the solution differ considerably from the design?

    The sizing is not correct but it is close to the design, tweaking the width of the card and the image should get you closer to the design.