Skip to content
Submitted 10 days ago

Recipe page using CSS and HTML

P
Angie P•120
@angie-create
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I’m really proud of how I structured my HTML and kept my CSS clean and organized. I focused on using semantic elements to improve accessibility and readability. Also, I feel good about how closely I matched the design to the original challenge.

Next time, I’d like to focus more on making my code more reusable by using CSS variables or utility classes. I’d also spend more time on responsiveness to ensure a smoother experience on all screen sizes.

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

One challenge was getting the layout to match the design, especially with spacing and alignment. I overcame this by using Flexbox and experimenting with margin and padding until it looked right.

Another challenge was making sure the typography looked consistent across different devices. I solved this by using relative units like em and rem instead of fixed px values.

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

I’d love feedback on how I can improve responsiveness, especially with media queries. Also, any suggestions on how to make my CSS more efficient and scalable would be super helpful!

Community feedback

  • Dangelo•370
    @DangelobastPosted 10 days ago

    Hope you are doing great, found some mistakes and that's good because it's part of this journey, your page looks nice great work.

    Your problem starts when you set elements to fixed widths or heights using px, for example, your class= "card" is set to width 736px and it will maintain its size no matter what, that's why when your viewport becomes smaller your margin won't have any effect as well as card won't shrink.

    I will give you a very basic idea and solution so you have a better idea by using your developer tools in your browser:

    1. Click your div with your class= "card" and simply uncheck width=736px to deactivate it, this will stop your content from being strictly 736px, now if you try to shrink your page it will try to adapt but at some point stop and overflow again.

    2. Remember fixed heights? your hr element that you are using for your line is set to 656px so, when your line fills all the space it will no longer shrink and it won't let your content become smaller either, so if you go to your hr element and uncheck that width it will finally work as expected since there is no fixed heights.

    I would recommend you start using responsive units and search information about it and avoid setting fixed heights and if you do always keep in mind that if you find this problem again, it's because you have a fixed unit.

    Once you have this in mind you will start to avoid fixed heights unless necessary and your designs will start becoming more responsive avoiding a lot of media queries.

    You could technically set fixed heights and then change it with media queries, but it's not the best way and it will give you a lot of headaches and problems, like what you are having right now with your card margin, imagine having to readjust every time than just letting the content adapt.

    Hope this helps ! Keep going

    Marked as helpful
    0
    P
    Angie P•120
    @angie-createPosted 10 days ago

    @Dangelobast Thank you! :)

    0
  • P
    tasosbeast•80
    @tasosbeastPosted 10 days ago

    It looks like you've put a little more gaps in general, but generally very good work.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord