Skip to content
OverviewSolutions
4
Comments
5
Redened
@Redened

All comments

  • Redened•40
    @RedenedPosted 7 months ago

    If you don't mind, could you give me a detailed explanation or step-by-step of how you take the final screenshot for the solution ?

    Thank you in advance.

    Cheers.

    0
  • NAHammell•10
    @NAHammellSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am pleased with the accuracy of the replication, in the future I would like to use more responsive typography.

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

    The vanilla CSS became difficult to read when tweaking small things, I mitigated these difficulties by separating out a few styles but I need to learn a better way to organize my CSS in the future.

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

    Are the semantics and organization of my HTML acceptable? If not, what could I do to improve it?

    How could I organize my CSS better to prevent it turning into an unreadable mess?

    HTML + Vanilla CSS Recipe Page

    1
    Redened•40
    @RedenedPosted 7 months ago

    Your HTML looks very acceptable both in semantics and organization.

    Cant really think of anything other than putting all of your sections inside <main></main>

    So it would be like:

    <header>
    content
</header>

<main>
    <section>
        content
    </section>
</main>

    Your CSS is a "bit" harder to read, though there are multiple ways to make it not so.

    First of all, consider moving your reset styles to a separate CSS file and then importing it into the main CSS file or linking separately into the HTML.

    With at least that you can no longer need to look at this when trying to focus.

    html {
    box-sizing: border-box;
    font-size: 16px;
}
  
*, *:before, *:after {
    box-sizing: border-box;
}
  
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
  
ol, ul {
    list-style: none;
}
  
img {
    max-width: 100%;
    height: auto;
}

    As for the rest of the code, I'm sure this is not the answer you want and it's probably not the best advice, but have you considered using SCSS or SASS instead of plain CSS ?

    They are pretty easy to learn and even if you use .scss/.sass files you can still write plain css into them and it works perfectly fine.

    Though using the special syntax they provide could probably make your code more readable.

    I'll provide an example here to give you an idea.

    This

    #nutrition-section table {
    width: 100%;
}

#nutrition-section caption {
    margin-bottom: 12px;
}

#nutrition-section table th {
    text-align: start;
}

#nutrition-section table th,
#nutrition-section table td {
    width: 50%;
    padding: 12px;
    padding-left: 32px;
    border-bottom: 1px solid hsl(30, 18%, 87%);
}

#nutrition-section table tr:last-child th,
#nutrition-section table tr:last-child td {
    border-bottom: none;
}

#nutrition-section table caption {
    text-align: start;
}

    Could look like this

    #nutrition-section {
    table {
        width: 100%;

        caption {
            margin-bottom: 12px;
            text-align: start;
        }

        th {
            text-align: start;
        }

        th,
        td {
            width: 50%;
            padding: 12px;
            padding-left: 32px;
            border-bottom: 1px solid hsl(30, 18%, 87%);
        }

        tr:last-child th,
        tr:last-child td {
            border-bottom: none;
        }
    }
}

    Though it does take some getting used to, there are a few benefits to using SCSS as you might see, such as, not repeating yourself 20 times over (#nutrition-section table - biggest offender).

    If we were to remove the properties and only leave selectors around.

    This

    #nutrition-section table { }

#nutrition-section caption { }

#nutrition-section table th { }

#nutrition-section table th,
#nutrition-section table td { }

#nutrition-section table tr:last-child th,
#nutrition-section table tr:last-child td { }

#nutrition-section table caption { }

    Basically turns into this.

    #nutrition-section {
    table {
        caption { }

        th { }

        th,
        td { }

        tr:last-child th,
        tr:last-child td {}
    }
}

    Reply to this comment if you'd like to know more.

    Cheers.

    0
  • Redened•40
    @RedenedPosted 7 months ago

    There are a lot of things to cover to give feedback on this, so I'll try to start from the beginning.

    You can reply to this comment if you'd like to hear all of it.

    First of all, are you using Visual Studio Code ?

    0
  • Redened•40
    @RedenedPosted 7 months ago

    Hello, exquisite solution, very well done.

    May i ask how did you get the design and solution screenshots to be identical?

    I've tried to do what you have done (I tried to copy the design screenshot pixel by pixel), but for some reason my solution looks smaller than the design in the comparison with the design when i uploaded it.

    Cheers.

    0
  • tooStrongMinds•40
    @tooStrongMindsSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    proud of using css flexbox to tackle some layouts

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

    I encountered some difficulties in handling the svg image and the box-shadow css property, but overcame them by using google and chatgpt

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

    no comment

    Blog Preview Card

    1
    Redened•40
    @RedenedPosted 7 months ago

    <svg xmlns="http://www.w3.org/2000/svg" width="336" height="201" fill="none" viewBox="0 0 336 201">

    The width and height attribute on the main SVG was making the padding look strange.

    Removing them alltogether fixes the issue.

    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 336 201">

    Should look like this.

    Cheers.

    0