Submitted 5 months ago

Responsive recipe page using HTML and CSS

bem

Adesh Katiya•420

@adeysh

A solution to the Recipe page challenge

Preview Code

Solution retrospective

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

I am proud of making it as close to the design png as possible.
I learned how to style similar elements together and try to cover the broad styles with minimum css as well. I tried to modularize the code and used variables wherever possible.
I would actually try to follow a workflow for this type of challenge so that even when I learn new tools further I can relate to how I was doing it till now.

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

I encountered minimal challenges like giving structure to element semantically like whether I should be using a main tag inside the body or just create a parent element for the main container.
Also I did struggle with css bem approach for naming things in heirarchy.

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

I really had one major issue in importing the media query styles from another css file. I made a utils.css file where I was planning to put the media query styles for mobile design.
However even when I was importing the utils file at the top of my main.css file, I was not able to see any changes when I resized the window.Although I was able to see the styles but they were crossed out. I'm not sure what I was missing here or whether I was overriding any styles.
If you guys know how do we import them, please reply me with your hints.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Adesh Katiya's solution.

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