NW6 |Sabella-Fisseha | HTML-CSS | bike-for-refugee | week1 #474
Conversation
✅ Deploy Preview for cyf-bfr ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Sabella-8
changed the title
|
This looks great Sabella! You've completed all of the tasks and the stretch goal as well 🌟 I've left a few comments on the code changes to help your HTML be even more semantic 😄 |
| @@ -20,160 +20,165 @@ | |||
| </head> | |||
|
|
|||
| <body> | |||
| <div class="header"> | |||
| <section class="header"> | |||
There was a problem hiding this comment.
There's a dedicated HTML element called <header> that is great to use here. This would help to reduce the number of CSS classes you need to use as well, as you could directly reference your header element
| /> | ||
| </a> | ||
|
|
||
| <section> |
There was a problem hiding this comment.
Like the <header>, we also have a dedicated element for navigation called <nav>
| <section> | ||
| <h2 class="heading-underline">Learn more</h2> | ||
|
|
||
| <section id="art"> |
There was a problem hiding this comment.
This would be a great place to use the <article> element
|
|
||
| <div class="footer"> | ||
| <div class="footer__content"> | ||
| <section class="footer"> |
There was a problem hiding this comment.
We have <footer> available to use here
| </section> | ||
|
|
||
| <section class="content"> | ||
| <section class="main"> |
There was a problem hiding this comment.
As a rule of thumb, try to keep <section> elements only for blocking out sections of your web page. The MDN Web Docs page suggest only using a section where you can use a heading element (<h1>, <h2>, etc.), with a few exceptions for grouping together content.
For example, on this page you could use a <section> for "Learn more" and "Upcoming events". And you might also use a <section> to separate out the 'hero' area of the page - even if that doesn't have a dedicated heading.
Elsewhere, you can use <div> sections to add styles to the page
NW6/Sabella Goytom Fisseha