@correlucas
Posted
👾Hello Shiva, congratulations for your solution!
I've inspected your code and everything is good, you component is really flexible and responsive. I liked a lots that you've used a single class to manage all the cards together, isn't everyone that pay attention to that. I think you can do only some work around the code cleaning it and improving the semantics.
Here's my tips:
Remove the <section> wrapping all the cards and use the <main> to wrap all cards (in the end you remove one block level and the result is the same) and for each card you can replace the divs with <section>. Note that div is just a block element without semantic meaning, so for important blocks you should ever use tags like section, article, picture, figure and etc.
Hope it helps and happy coding!
Marked as helpful
@shivaprakash-sudo
Posted
Hello Lucas, thank you.
I understand, I'll improve them.
I actually wanted to do that way at first, but since the cards are all attached, I thought to myself that having one section would be better. Maybe I'll have cards as articles and then wrap all of them inside a section, how does that sound?🤔
@correlucas
Posted
@shivaprakash-sudo Articles seems a good idea too. My advice was more about cleaning the code, but note that your solution is already working was only a little little detail if was a big landing page could be more problematic but in this case you can let the way it is.
@shivaprakash-sudo
Posted
@correlucas
I understand. If you don't mind me asking, what parts of the code can be optimized?
@correlucas
Posted
@shivaprakash-sudo You can transfer the class cards-container to the <main> and delete the section holding the cards for example, the main will hold all the card elements, and instead to use section for the cards in general you can use section for each single card to get rid of divs.
Since you'll be using main to manage all the cards, there's no need to use a class to manage it, you can just use the main to select it in the css without a class, this way you write less code and manage the css.
@shivaprakash-sudo
Posted
@correlucas
I understand, but making each a section doesn't make sense to me, as they're connected and look like one section, because sections are usually stacked in columns, rather than rows.🤔
@correlucas
Posted
@shivaprakash-sudo now that you SAID I'll do a research about the section tag, I never thought the you're can be that I'm wrong Shiva, sorry. I'll search it to see what's correct, because I've used a lots of time section this way 😂
@shivaprakash-sudo
Posted
@correlucas
Haha, it's okay, let me know what you find.👀
