Design comparison
Solution retrospective
daily ~~genshin~~ frontend grind I did not notice you were supposed to practice semantic html until i finished everything :(
other things to improve:
- refactoring (didnt do any refactoring, and chatgpt's refactoring does not retain all css styling)
- a better way to handle images
- a better way to structure html (right now it looks kinda messy)
- a better way to center stuff and add padding/margin
Community feedback
- @petritnurediniPosted 9 months ago
Congratulations on completing your Recipe Page project! Your dedication and hard work are evident. Here are some best practices and improvements to consider:
-
Semantic HTML:
- Use semantic elements such as
<header>
,<section>
,<article>
, and<footer>
for better structure and readability. - For the recipe, consider using
<article>
for the main recipe and<section>
for sub-sections like ingredients and instructions. - Utilize
<figure>
and<figcaption>
for images with captions.
- Use semantic elements such as
-
Refactoring CSS:
- Group common styles to reduce repetition. For example, text styling that repeats can be assigned to a common class.
- Use CSS variables for colors and fonts to make future changes easier. Learn more about CSS variables here.
-
Handling Images:
- Use responsive images with
srcset
andsizes
attributes to ensure images look good on all devices. - Consider lazy-loading images for better performance.
- Use responsive images with
-
HTML Structure:
- Organize your HTML structure logically. Group related elements together and use indentation consistently.
- Avoid deep nesting where possible to keep the structure clean and readable.
-
Centering and Spacing:
- Use Flexbox or CSS Grid for more efficient and responsive layouts.
- For centering,
flexbox
withjustify-content
andalign-items
can be very effective.
-
Accessibility:
- Ensure all images have meaningful
alt
attributes. - Use proper heading levels (
<h1>
through<h6>
) for better accessibility.
- Ensure all images have meaningful
-
Responsive Design:
- Test your page at various viewport sizes and make necessary adjustments.
- Use media queries effectively to ensure a good user experience on all devices.
Keep up the great work and continue to refine your skills. Every project is a step forward in your development journey. Remember, practice and continuous learning are key to improvement. Keep coding and exploring new challenges!
For further learning and improvement, consider resources like MDN Web Docs and CSS-Tricks.
0 -
Please log in to post a comment
Log in with GitHubJoin 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