Recipe-Page-Challenge

What are you most proud of, and what would you do differently next time?

I am most proud of building my first project entirely on my own using HTML and CSS. Through this project, I learned how to:

• Style ordered lists (<ol>) with custom colors and spacing.
• Design tables with a clean and customized look.
• Use list markers effectively and apply CSS to enhance readability.
• Implement a basic responsive layout using media queries.

What I would do differently next time:

• Plan my HTML structure more carefully before styling, to ensure better semantic organization and accessibility.
• Organize my CSS better, using reusable classes or CSS variables to reduce repetition and improve maintainability.
• Test responsiveness on more devices to ensure the layout works smoothly on different screen sizes.
• Optimize images and fonts to improve page load performance.

Overall, this project helped me transition from following tutorials to building something independently, and I am excited to continue improving my skills.

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

• How to style tables with custom designs.
• How to use ::marker for customizing list bullets.

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

I am looking for feedback on improving the quality, readability, and maintainability of my code. Specifically:

1. HTML Structure & Semantics

• I want to ensure that my use of semantic HTML elements (<main>, <section>, <ol>, <ul>, <table>) is correct and follows best practices.
• I am unsure if my headings (<h1>, <h2>) hierarchy is perfectly accessible.

2. CSS Styling & Organization

• I want advice on how to make my CSS more DRY (Don’t Repeat Yourself) and organized, possibly using reusable classes or CSS variables.
• Feedback on responsive design: while I added a media query for mobile, I am unsure if my layout scales perfectly across different devices.
• Suggestions for improving list styling, custom markers, and table design in a cleaner way.

3. Performance & Best Practices

• Are there areas where my HTML or CSS could be simplified without losing design fidelity?
• Could I improve load times or maintainability of my project, e.g., optimizing images, using external fonts efficiently, etc.?

4. Accessibility & UX

• I’d like feedback on color contrast, font sizes, and readability for better user experience.
• Any suggestions to make the page more accessible for screen readers or keyboard navigation.