Skip to content
OverviewSolutions
25
Comments
4
P
Adrian Trandafir ๐ŸŽฎ
@XenoMee

All comments

  • Gabโ€ข170
    @gab-holikSubmitted 10 months ago

    Is it best practice to use <strong> to make text bold? Or should it always be styled with CSS? Thanks for any feedback.

    Recipe Page Challenge

    3
    Adrian Trandafir ๐ŸŽฎโ€ข330
    @XenoMeePosted 10 months ago

    Hello Gabriella ๐Ÿ‘‹! Your solution looks great and like the design.

    Congrats for completing this challenge! ๐Ÿ‘

    I have a few suggestions to improve your solution :

    1.HTML ๐Ÿ“„

    • You can wrap your whole recipe component by using article tags since its content have enough context to stand on its own and doesn't rely on any other information.
    • You can place the recipe image below the h1 and first paragraph and visually change its placement using order property from flexbox or grid. Doing this will enhance your page accessibility so that people who use a screen reader know that this is a recipe website and get their interest.
    • For the Preparation time text, you can use h3 tags and also place the container below the Ingredients container while visually changing its order so that it's above. This keeps the markup semantic and also follows the heading rules.

    2.CSS

    • Try to build the website using the Mobile First approach and scale to desktop version.
    • For your article container, you can set a max-width instead of a % width. That way, you allow it to shrink for small devices and cannot grow more than the max-width value you set.

    Hope this information helped you! ๐Ÿ˜Š

    Happy coding!

    Marked as helpful
    1
  • Adrian Trandafir ๐ŸŽฎโ€ข330
    @XenoMeePosted 10 months ago

    Hello! ๐Ÿ‘‹

    Your solution looks great and matches the design. Great job! ๐Ÿ‘

    I might have a few suggestions for you to improve it:

    • You can add the website's image as part of the markup instead of using it as background image since it can provide context for people who use screen readers.
    • You can use the ::after pseudo-element for the purple effect on the image instead of an empty div. It is a good practice to not have empty divs in our websites.
    • Try to build the website using the Mobile First approach since nowadays websites need to also work for small screen devices.
    • For your card, you can set a max-width instead of a normal width. That way, you allow it to shrink for small devices and cannot grow more than the max-width value you set.
    • You can use grid for the desktop layout since grid is often used for layout purposes while flexbox is used more for individual components.
    • For the Stats section, you can use an unordered list with 3 list items having 2 paragraphs inside. That way your markup is more semantic.
    • Try to avoid nesting and use only inline elements inside headings.
    • To make the picture color look like the design, you can use the mix-blend-mode property with a value of multiply.

    Hope this information helped you! ๐Ÿ˜Š

    Happy coding!

    0
  • Adrian Trandafir ๐ŸŽฎโ€ข330
    @XenoMeePosted 10 months ago

    Hello Filip! Your solution looks great and like the design. Great job ๐Ÿ‘

    I might have a few suggestions for you to improve it:

    • You can set a 100svh size for the body's min-height property instead of main.
    • Try to avoid using id selectors for styling as it raises specificity. Use classes as much as you can, even if you use them one time. This makes everything stay at the same level.
    • It's not ideal to set a width on texts (your h1 and p) since it affects the responsiveness of the website.
    • I personally would use a container for all your content inside main, then one more for the intro text and one more for all the cards. This makes your website be more component based and structured.
    • For the images inside each card, you can use the ::after pseudo-element since their purpose is to be decorative and does not present any context or meaning for the people who use screen readers.
    • You can use grid for the desktop layout since grid is often used for layout purposes while flexbox is used more for individual components.

    Hope this information helped you ๐Ÿ˜Š

    Happy coding!

    Marked as helpful
    0
  • DayaAโ€ข100
    @AishaakinSubmitted 10 months ago
    1. I still can't put the name and it image together like the one in the challenge although I have used display flex but it's still not working out.
    2. Any suggestions or corrections please comment it.

    A Blog Preview Using CSS FlexBox

    2
    Adrian Trandafir ๐ŸŽฎโ€ข330
    @XenoMeePosted 10 months ago

    Hello Aisha! Your solution looks great and almost like the design. Great job ๐Ÿ‘

    I might have a few suggestions for you to improve it:

    • Set a 100svh size for the body's min-height property so that it covers the whole screen and help you center your card in the middle of it.
    • You can use Grid for the body to center your card since you can do it with only 2 lines of code.
    • You don't need to set a display of flex and a flex direction of column on the card's container since the content is stacking by default on top of each other.
    • You can use max-width: 100% and display:block rules for all the image elements whenever you start a website from scratch. This makes the images be more responsive on different screen sizes.
    • For your div container, you can set a max-width instead of a normal width. That way, you allow your image to shrink for small devices and cannot grow more than the max-width value you set.
    • For your problem, to put the profile picture image and the name together, remove the justify-content:space-between. This will put your flex items at the far edges of the card. Just use align-items: center and add a gap of 1rem.

    Hope this information helped you ๐Ÿ˜Š

    Happy coding!

    1