Submitted 7 months ago

Responsive omelette recipe page

Solo Incrementing•40

@Solo-Incrementing

Preview site View code

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?

The design is perfectly replicated and is responsive. Next time I would use the BEM class naming convention for maintainability.

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

I didn't know how to add the line between table row elements so I researched that and found a solution online.

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

How do I improve my workflow? At the moment I feel I am spending too long writing styles for a relatively simple webpage.

Community feedback

Giacomo Scampini•120
@scamgiPosted 7 months ago
I didn't know the BEM convention thanks.

I think that to speed up your workflow you could use sass. To use it follow these steps:

Install sass globally

npm i -g sass

Then you run this commend:

sass --watch style.scss style.css

So the terminal will compile sass every time you make a change. It's very useful especially if you declare the variables for the colors.

Another way to write code faster is to learn snippets with VSCODE like this: p0 => padding: 0; m3 => margin:3px; jcc => justify-content: center;
Marked as helpful
0

Please log in to post a comment

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