Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I learned new semantic HTML tags (details and summary) to create accordion. I learned basics of Cube Css.
What challenges did you encounter, and how did you overcome them?I had trouble structuring new HTML tag, but I managed to overcome by reading MDN documentation.
What specific areas of your project would you like help with?Any feedbacks would be great! Happy coding!
Community feedback
- @0xabdulkhaliqPosted 6 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
UTILIZING FOOTER PROPERLY :
- Currently the
attribution
element is placed inside themain
element, but actually it's need to be placed outsidemain
element. And it needs to be converted into afooter
element instead of plaindiv
with no semantic meaning.
- The
<footer>
typically contains information about the author of the section, copyright data or links to related documents. By doing this we use to provide a more precise detail of the structure of our webpage to the browser or screen readers.
- Additionally the
footer
element needs to be placed on the bottom of screen, we can achieve this usingabsolute
positioning property.
- Luckily you already used
Flex
layout ofcss
to center the component, So you just want to addabsolute
position for<footer>
element to place it in bottom of the page
body { position: relative; } footer { position: absolute; bottom: 1em; }
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1@chrisvn1808Posted 6 months ago@0xabdulkhalid Thank you Khalid! Your feedback is great. I really appreciate it. Happy coding!
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