This is my solution to this challenge! I haven't really struggled with this challenge until I had to try and create the grid layout. I gave it a shot and this is as close as I can make it. If you have any tips on how to make it EXACTLY like the design then please comment it so I can improve on it. It's also responsive so I have the mobile and the desktop one so I hope you enjoy this solution and I'll see you later!
Hi CybarZoid! Your overall project looks good. However, there are some recommendations you might find useful.
@media all and (min-width: 650px) { .grid { display: grid; grid-template-rows: repeat(4, 1fr) grid-template-columns: repeat(3, 1fr); gap: 1rem; } ... }
If you're not familiar with this property I suggest you read the display grid documentation. If you open your developer tools you will see on the elements section that the specific one that has the grid class has a little tag on its right side called "grid". If you click on it the browser will highlight all the rows and columns generated with their specific ids for you to position elements using "grid-row" or "grid-column" on them. This way you can, for example, update your cards__team-builder class to be:
.cards__team-builder { grid-column: 2 / 3; grid-row: 2 / 4; }
I'll leave to you the implementation of the karma box so you can practice 😉.
Another recommendation related to your case is to specify where your grid elements are going to start and end adding on all your grid-column or grid-row both numbers of the property as in the example above where we tell the element to be positioned starting on row 2 and finish at row 4.
Last, but not least, try to add an h1 tag to your projects. If you're not clear about which element should be an h1 you can add a visually hidden one for screen readers only to improve accessibility. And in this same heading flow, ask yourself if the piece of text you're considering a heading represents one. To do this think about the content and if the text you're highlighting describes it (apply this to your h3 on line 25 of your HTML).
I hope you find this useful, Happy coding! 😁
Hello everyone! 🙋🏻♂️
I would like to express my gratitude in advance for taking the time to review my project. I would appreciate some feedback on the structure, particularly regarding the elements that display numbers, such as follower counts. Currently, I have used a simple <span> for this purpose. As for the <h1> element, I have assigned it to the name of the user. Do you think there is a more appropriate way to assign the <h1> in this case? Your insights and suggestions would be greatly appreciated.
Best regards,
David Ochoa. 🙏🏻
Hi David 😁! what an amazing project you have here! Some highlights I want to share are the clean your code is and the good use of semantics and accessibility properties!
Now I will pass through your questions and add some extra tips I think you might find useful for your future projects 😉.
Regarding to the numbers inside <span> tags. According to the documentation, these are inline-level tags that are mainly used for styling purposes or to group element who share attributes, and "should be used only when no other semantic element is appropriate". In your case I would recommend the use of <p> tags in order to follow good practices.
The <h1> tag describes the main subject of your page, in cases like this one where is not clear which element should be the main heading you can opt to have a visually hidden <h1> tag only for screen readers and use a <p> tag for the card's name. To do this I like to use this utility class:
.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
--- EXTRA ---
<picture> is not what it is intended for. According to MDN, the <picture> tag is a container element that allows the site to offer a set of images according to certain conditions specified with <source> tags inside of it. For this case where you need to contain media with just one source you can use the semantic tag <figure> that represents "self-contained content" just like images, illustrations, diagrams, etc.<span class="card__owner-location"> London </span>
It should be a <p> tag
<div class="card__social-stat"> <span>80K</span> Followers </div>
.card__owner-avatar { position: absolute; top: -55px; border: 5px solid #f0f0f0; border-radius: 50%; place-self: center; transition: .7s ease; width: 105px; height: 105px; }
Here is not clear what those -55px on the top property are for, try to assign them on a variable inside the block, also you can define a variable for the image size and if you want it to have the same width and height you can use the property "aspect-ratio", here is an updated version for your class:
.card__owner-avatar { --imageOffset: -55px; --imageSize: 105px; position: absolute; top: var(--imageOffset); border: 5px solid #f0f0f0; border-radius: 50%; place-self: center; transition: .7s ease; width: var(--imageSize); aspect-ratio: 1 / 1; }
This way is more clear what it is for, also, what aspect ratio does is to assign 1 px to height for every pixel is in width, if you use a different ratio like 1 / 2, the height (wich is linked to the second number of the ratio) will recieve doubled the amount of pixels than width.
I hope you find this useful! Happy coding 😁