Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive omelette recipe page

@Solo-Incrementing

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@scamgi

Posted

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:

  1. Install sass globally
npm i -g sass
  1. 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

Log in with GitHub
Discord logo

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