Ruby: Ariel, Carolyn, & Sam #24
Conversation
| <!-- <nav> | ||
| <ul> | ||
| <li><a href="facts.html"><button class="btn" type="button"> | ||
| Facts | ||
| </button></a></li> | ||
| <li><a href="gallery.html"><button class="btn" type="button"> | ||
| Gallery | ||
| </button></a></li> | ||
| </ul> | ||
| </nav> --> |
There was a problem hiding this comment.
Be sure to remove unused code, print tests, and any comments that shouldn't be published before finalizing a project. This helps with the readability and maintainability of a project. 🧹😌
| </nav> --> | ||
| <main> | ||
| <section class="center-img"> | ||
| <h3> |
There was a problem hiding this comment.
Make sure you don't skip levels when using <h1>-<h6> tags for headings! Browsers use heading tags to construct a table of contents, so the different numbers on heading tags should be treated as different heading levels rather than as different style options. It's best practice to start headings at h1 and then move to h2 then h3 and so on as you need to nest sections. If all headers are at the top level, then all header tags should be h1. CSS should be used to resize and change the style as needed.
You can read more about heading tag best practices here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#usage_notes
| </nav> | ||
| </section> | ||
| <section class="content"> | ||
| <h5> |
There was a problem hiding this comment.
Make sure you're only using <h1>-<h6> tags for headings and not styling purposes! I'd recommend a <p> tag here.
You can read more about best practices here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#usage_notes
| <section> | ||
| <figure> |
There was a problem hiding this comment.
I'd recommend dropping the <section> tag since the figure tag already provides semantic organization. You should only use a tag like <section> if there isn't already another tag providing semantic meaning to a grouping of elements.
| <main> | ||
| <div> | ||
|
|
||
| <section class="Container1"> |
There was a problem hiding this comment.
Make sure you're being consistent with your class and id naming conventions. Best practice is lowercase with hyphens (-) separating words when needed (unless you're using the BEM convention).
| grid-template-columns: 33% 33% 33% ; | ||
| } | ||
|
|
||
| .Container1 { |
There was a problem hiding this comment.
I'd recommend using more descriptive class names. Looking through your CSS files, there's no way of knowing what's being styled without looking at the html files, which will ultimately slow down development and make it harder to manage CSS rules as your files grow larger.
No description provided.