Design comparison
Solution retrospective
I'm sometimes unsure of what should be a section and what should be a div. I know div is used everytime we only need to do some styling on a certain group of elements, and that the section tag is for "thematic grouping". Does this mean the QR image should be inside a section, and the h1 and the paragraph tags in their own "info" section, as I've done?
Also, am I using the container correctly? I see in my submission's accessibility report I have a warning related to it. What should I have used instead? A section? The warning details was a little hard to understand.
Is it okay to use a mono repository on GitHub for all my frontend mentor solutions? It helps decluttering my GitHub profile as there (incredibly) isn't a way to group repos together yet.
This is my first submission, and it's great finding a page like this with many projects to explore. Thank you to all of you who take your time to help beginners like me! It's much appreciated!
Community feedback
- @kabir-afkPosted about 1 year ago
Hey, good job on completing the challenge, you soln is quite a replica of the design . . .
Regarding Mono Repo
- It is absolutely ok to use a mono repo , since if you'll be making a lot of other projects in the future ,then it'll be easier to handle FEM challenges if they are inside a single repo . . . you are on the right path
Regarding
<Section>and<Div><Section>is used for dividing content into different parts . It helps improve document structure, accessibility, and SEO.- Use
<section>when you want to indicate that a group of content is related and represents a distinct section of the page. <Div>, as you said , doesn' t have its own meaning in terms of semanticity , rather it is used for styling and scripting purposes.
Regarding accessibility report
It'll be easier to help if you share what the warning was related to. . . what else , keep the grind!!!!💪💪
Marked as helpful1@LarsiParsiiPosted about 1 year ago@kabir-afk Thank you very much! I appreciate the feedback! 😄
I thought the reports were for all to see. 😅 Below is text copy-pasted from the report:
WARNING Document should have one main landmark
<html lang="en">WARNING All page content should be contained by landmarks
<div class="container">0@kabir-afkPosted about 1 year ago@LarsiParsii Ok so , when talking about semantic HTML , landmarks mean elements that define a meaningful section of web page that go beyond other HTML elements like h1, p, etc . . .for example when you make a nav bar , you wrap it inside a
<nav>tag for better accessibility and navigational hierarchy.Here you have also tried making it accessible by using the
<section>tag , but it still shows error for<div class="container">because you have made things accessible inside your wrapper "container" class , but it itself is not much accessible and not acting as a landmark . . .To solve this , you can try wrapping your entire "container" class inside a
<main>tag, this will resolve the error . Maybe you can also do the same and use<section>tag instead , but not sure whether it'll help and even if it does , I don't think it is the best practice . . .Always try avoiding such issues by providing the site with various landmarks like
<header>,<main>,<footer>,<nav>, etc . . .Hope it helps!!! 🥂🥂Marked as helpful1@LarsiParsiiPosted about 1 year agoOkay, thank you once again, @kabir-afk! I think going for "main" would make a lot of sense as the container does represent the whole screen (since there's no navbar). 😊
0@kabir-afkPosted about 1 year ago@LarsiParsii Ummm . . . . why gay though 😅😅., hope you meant kay . . . btw happy to have been of help!!
1@LarsiParsiiPosted about 1 year ago@kabir-afk Omg, yes! I was using my phone to respond so that was a typo 😂
0
Please log in to post a comment
Log in with GitHub
Join 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