Is it best practice to use <strong> to make text bold? Or should it always be styled with CSS? Thanks for any feedback.
P
Adrian Trandafir ๐ฎ
@XenoMee
All comments
- PAdrian Trandafir ๐ฎโข 330
@XenoMee
Posted
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
articletags 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
h1and first paragraph and visually change its placement usingorderproperty fromflexboxorgrid. 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
h3tags 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-widthinstead 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 - You can wrap your whole recipe component by using
- dungnopeโข 170
@Dungnope
Submitted
I have struggle when I change color for the picture, i can't make it like the design, if you have any feedbacks or contributions, you can comment, welcome!
PAdrian Trandafir ๐ฎโข 330@XenoMee
Posted
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
::afterpseudo-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-widthinstead 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
gridfor the desktop layout since grid is often used for layout purposes whileflexboxis 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-modeproperty with a value ofmultiply.
Hope this information helped you! ๐
Happy coding!
0 - Filip Szkarลatโข 180
@FilipSzkarlat
Submitted
I feel quite confident with the code I wrote, but I suspect that I could have written something better or in a different way, if you find something like that, please comment :)
PAdrian Trandafir ๐ฎโข 330@XenoMee
Posted
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-heightproperty instead ofmain. - 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
::afterpseudo-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
gridfor the desktop layout since grid is often used for layout purposes whileflexboxis used more for individual components.
Hope this information helped you ๐
Happy coding!
Marked as helpful
0 - You can set a 100svh size for the body's
- DayaAโข 100
@Aishaakin
Submitted
- 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.
- Any suggestions or corrections please comment it.
PAdrian Trandafir ๐ฎโข 330@XenoMee
Posted
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%anddisplay:blockrules 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 usealign-items: centerand add agapof 1rem.
Hope this information helped you ๐
Happy coding!
1
