huddle landing page with alternating feature blocks
Design comparison
Solution retrospective
if you have any comments please leave them alone especially when it comes to accessibility
Community feedback
- @BilalSalmiPosted almost 2 years ago
another trick is you can validate your html code before you submit it here just type in google search "html validator".
we are still considred juniors , and we have each other to get ourselves to the next level
good luck!
Marked as helpful0 - @BilalSalmiPosted almost 2 years ago
Hi mohamed your design is good , but it needs to be optimized, here some notes that hopfully will help you bro:
- Accessbility errors in footer:
Your social media buttons need to be removed, becuase if the users click on them they expect to go and see your facebook, instagram or twitter page.
So in this case, you have to replce them with [html links] (https://www.w3schools.com/tags/tag_a.asp).
<a href="#" title="facebook link" target="_blank">
.- Html Validation
- You should consider using h1 once per page.
- you should read more about differences between h1 - h6 heading here because each one has an important rate.
For example:
-
h1 : consider to use it for your main page heading .
-
h2 : for your <section> or <article> heading
-
h3 : for your <article> sub-paragraphes's heading.
and so on...
Keep it up! bro :)
Marked as helpful0@mohamedyasser27Posted almost 2 years ago@BilalSalmi thanks i will change them to links, i don't know but i always use button and just handle it with js which is bad
as for the headings i used h1 only once in the page and tried to go down once per level
0@BilalSalmiPosted almost 2 years agoyou're welcome!
I have checked your html code again .
You're right.
I forget this : "Consider using the
h1
element as a top-level heading only" that the report has said.your code stucture is looks like this;
<article> <div> <section> <h1>Build The Community Your Fans Will Love </h1> </sectionYou put h1 in third level namly in the <section>
when it should be in first level namely in <article>.
another note I have seen, is you have put <section> as child of <div> which is an error <div> should allways be inside a child of <section> <article> <main> <footer> <header> <aside>.
Here you can read more about html semantic elements here
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