Submitted 9 months ago

Recipe page solution using HTML and CSS

Aaron Li•90

@aaronli722

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I come up with 2 questions in the challenge:

How to get a better measurement of size, dimension of an image

I used the ruler tool in Firefox to measure margin, font size etc...but would like to see if there is a easier and better way to do it.

Have no idea how to style the number points of a <ol>

I studied the web and can change the font-size and color using li::marker, but I can't change the font-weight and also the font-family.

Also, for the table in the Nutritions section, I just adjusted the width of the first column to adjust of position of the text in the second column. It works but I am not sure if it is a good way to do it.

And I feel my code is redundant and can be cleaner :(

Community feedback

Musaddique Ali•140
@MusaddiqueAliPosted 9 months ago
For the first question: On Mac OS, I think you already have a screen ruler pre-installed. You can google search on how to toggle it. On Windows OS, nothing such is pre-installed but you can download and install something called "PowerToys" from the web, and after installation, toggle it using "Windows Key + Shift + M". But, make sure the PowerToys tool is working, or is showing in the Windows Task bar tray, otherwise, "Windows Key + Shift + M" won't work.

For the second question: To style the list marker font-weight and font-family, you should be able to use the same selectors like:

ol li::marker { font-weight: bold; font-family: ______; }

What I did with my code for this challenge is that I applied "Outfit" font to the whole page, as majority of the text (including the ordered list markers) in the page are to be styled using that font. And applied specific font-family: Young Serif; styling to only those which needed Young Serif font styling.

As you may have noticed, Outfit is a sans-serif type font, but still, for some unknown reason, the ordered list marker for list number "1" still has serif. And the other list markers "2" though "6" are sans-serif. This happened to me as well, and I left it that way.
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