Skip to content
OverviewSolutions
11
Comments
4
Musaddique Ali
@MusaddiqueAli

All comments

  • Aaron Li•90
    @aaronli722Submitted 9 months ago

    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 :(

    Recipe page solution using HTML and CSS

    1
    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
  • egolam•430
    @egolamSubmitted about 1 year ago

    Feedbacks are welcomed especially the ones which tell me how to implement leap year checking when calculating the age. I couldn't code that implementation. Calculation is off by 1 day.

    Age Calculator

    1
    Musaddique Ali•140
    @MusaddiqueAliPosted about 1 year ago

    I don't understand why implementing that can be a problem. In my case, I didn't specifically care about that, but still to check the correctness of my code, I used this other website called timeanddate (dot) com. In the homepage, there is a section called "Calculators & Timers", with the option "Date to Date Calculator", I get the same results. By the way, to code the JS, I took a lot of help from ChatGPT. It helped me a lot.

    Marked as helpful
    0
  • Musaddique Ali•140
    @MusaddiqueAliPosted about 1 year ago

    Nothing major to improve, but you can remove the arrows within the input fields, called spinners by adding the following lines in your main CSS:

    /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    0
  • Musaddique Ali•140
    @MusaddiqueAliPosted about 1 year ago

    I think you should check after you post your solution.

    0