@AGutierrezR
Posted
Hello there 👋. Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML:
-
You could change the structure to something like this:
<body> <header> ... </header> <main> ... </main> <footer> ... </footer> </body>This will solve the Accessibility report issues.
-
Use the
.containerclass inside the<header>and the<main>. -
Instead of trying to put everything in one grid container, use two grid containers
<main> <div> grid container 3 columns for the image, big title, and NEW.. </div> <div> grid container 3 columns for the 3 articles </div> </main>If you use the same
gapfor the two, they will align perfectly.
CSS:
-
Try not to set a
max-heightfor the.containerclass -
If you decided to create two grid containers, you will be able to remove the
grid-template-rows -
You could create
grid-template-areaslike this for the first grid container:.container { grid-template-areas: "thumbnail thumbnail sidebar" "title content sidebar" }The names is up to you or you could set everything by tracks and lines.
Marked as helpful
@apy1412
Posted
thanks. it was helpful @AGutierrezR
