Skip to content
OverviewSolutions
8
Comments
9

Edifierx8

@Edifierx880 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

View more solutions

Latest comments

  • Edifierx8•80
    @Edifierx8

    Nice! but you have to see the design and see your web and you will know about difference.

  • P
    Erik S. Carlsten•290
    @ecarlste
    What are you most proud of, and what would you do differently next time?

    When I initially looked at solving this it initially occurred to me to use a grid, although I wanted to see if I could get it right with flex box. It ended up being pretty simple to set up breakpoints to change only a few properties in order to get the layout to work in all 3 screen sizes.

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

    I was hard time realizing that the tailwind classes for adjusting position in a container, switch the direction they work with depending on the main axis of the flex box. Some of them work with the main axis and some with the perpendicular axis.

    I ended up finding some helpful info in the tailwind docs.

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

    I'd like recommendations on how to improve the semantic html elements used throughout the page and components.

    Four Card Feature in React, Next.js, tailwindcss, and TypeScript.

    2
    Edifierx8•80
    @Edifierx8

    Nice job!, Everything is perfectly done.

  • Edifierx8•80
    @Edifierx8

    Thanks!

  • SunnyFGC•130
    @njmoon21
    What are you most proud of, and what would you do differently next time?

    I am proud of how close/similar I made my page to the target. There was a lot of classes I had to create in order to style several elements differently, and I managed to style all of them successfully despite feeling slightly overwhelmed.

    This was also my first time using the '@media' property and relative measurements such as 'rem' and 'em'. As much as I used them in this challenge, I wish I instead took more time to understand what they actually did before I started implementing it.

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

    I struggled with styling the table and using the tag, because I haven't really used them at all until now. As for overcoming, I ended up having to look at outside resources on how to style tables.

    More specifically, when I added lines in between table rows, I was having trouble with excluding the border line for the very last row of the table, as that was not meant to be shown like in the target-design images.

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

    I would like to get more help and polish more on how to use relative measurements and how to use the '@media' property. Quite a few comments mentioned that I needed to have more semantics in my code, so I tried implementing more, however I'm not sure whether I am doing it correctly.

    Recipe Page with HTML/CSS

    1
    Edifierx8•80
    @Edifierx8

    Thank Frontend Mentor for practise!

  • Edifierx8•80
    @Edifierx8

    Thanks for feedBack. I will look at it.

  • Edifierx8•80
    @Edifierx8

    I should do more better.

View more comments