@dearestalexander
Posted
Hi Thomas,
I'm not an expert, but a few comments:
- You may consider putting some comments in your html to explain your approach
- I'm not sure you need so many <div> and <sections>. When I look at <section> guidance, that generally applies to a larger peice of content. And you should only use when something more specific doesn't fit. I chose to put the whole recipe component into an <article> as it feels like an <article>, fits well with the examples in W3C guidance. Within that <article> I only felt I needed one styling <div> for the differently formatted 'preparation' section. All other content could be style partically with by using 'main'. And it's easy to space it all out with flex, padding and margins as needed.
CSS
- I recommend reading up on block element method , it's a good way to structure class names to make it easy to follow the logic of what is used where.
- For accessibility and re-usability it seems one good practice to get into the habbit of following is to apply specific styles mostly on classes. When you get to more complex designs avoiding styling on html tags mean there's less likely for specific adjustments to have unintended consequences. Of course I think base styling to body and main is normal, but styling on h1, p, ul etc. seems might be better to use classes.
- It's possible to make this responsive without using any @media queries at all. You can use width: min() and specific a size in ch for desktop and a size in & for mobile.
- I think you can re-work to reduce the number of CSS entries you have if you want to simplify.
Feel free to take a look at my solution to compare. I spent quite a bit of time trying to build it in line with feedback the community gave me on my previous solution. They gave a lot of good tips on responsiveness, readability, accessibility etc.
Marked as helpful
@TomSif
Posted
@dearestalexander
Hello Alexander,
First of all, thank you so much for taking the time to look at my project in detail and especially for providing such detailed feedback. It's really kind of you ! :)
Using appropriate "landmarks" is definitely something I need to study a bit more. Thanks, your comments make sense.
Regarding the "block element method," it's the first time I've heard about it, but I checked your code, and indeed, it's very clear and probably helps keep the code stable. It's a good habit to adopt, and I’ll look into it.
As for the responsive aspect, I noticed that your site is fully responsive without using media queries. I'm not sure if I went overboard, but in the design we were provided, the mobile version doesn’t have margins around it, and the image is stuck to the top of the container. That’s what I tried to reproduce exactly...
I started with the mobile version and then adjusted the breakpoints to the final design, but since I’m self-taught, I have no idea if that was the right method to follow.
Nevertheless, thanks again for all this valuable informations. It's thanks to feedback like this that I can improve and stay motivated to dive deeper into the subject.
@dearestalexander
Posted
@TomSif
Hi Thomas,
Thanks for replying back. Yes, I adjustment my design a bit to my taste :) Based on previous feedback I picked up the idea that it's not necessarily the point to 100% copy the design, but rather to get everything necessary working.
Just like you said, based on feedback here I had to go away and read up and learn some additional stuff, it takes a while, but over time it's very useful.
I'm newish too, hopefully you will also get feedback from some of the experienced people here !
Alexander
