Don't forget about translating the content into meaningful html. Think it through carefully. For example
- are each of these really suitable as articles? Are they each encapsulated content that could be re-used / syndicated across other pages or sites?
- why would sign up be a button and not an anchor?
- the why us section isn't a load of paragraphs, it's a list.
Note it's unnecessary to split out the reset styles into a whole other stylesheet that needs to be downloaded. That's an extra server call for no benefit.
Beware using grid and place-content to center a component on a screen like this. If someone was to enlarge their default text size, it can cause components to become unreachable as they can overflow on the left as well as right. This doesn't happen with the flex column method to center components though, so that's usually preferable.
Don't set border to 0 on buttons as that will make them disappear in High Contrast mode. Instead, just make it transparent.
Consider using :focus-visible for custom focus outlines instead of focus.
Using overflow hidden and border radius on the grid component instead of its children would be much simpler.
I recommend sticking to single class selectors as much as possible instead of using nested or element selectors. It's lower specificity and usually easier to maintain. It also separates concerns - the styles wouldn't break if html elements had to change.
Marked as helpful
@thisisadityarao
Posted
@grace-snow Thank you, I learned a lot. I did not think this through at all!
Why us section being a list, instead of a bunch of paragraphs is so obvious, and yet I used paragraph. I was just trying to get through this challenge as fast as I could. I was thinking CSS first, as in how would I implement this with flex/grid..and such, instead of putting html/content first.
My mistake. I'll redo this challenge again before moving ahead.
UPDATE (14 June, 2024 - 10:36 UTC)
I followed through all the corrections mentioned above by @grace-snow and updated the source code.
- Replaced
<article>tags with<section> - Change Sign up to anchor tag, as it will navigate to a new page for sign up.
- Replaced the
<p>tag within why us section to unordered list items, <li> - Include reset styles within styles.css before any custom styles.
- Use flexbox instead for grid and place-content to center component on screen.
- Use
:focus-visiblefor custom focus outlines - Make use of single class selectors for lower specificity.
