Any feedback welcome, as always!
Any help and/or feedback is much appreciated!
I would appreciate anyone letting me know when to use utilities of styling components.
I am proud that I was able to complete this task.
What challenges did you encounter, and how did you overcome them?css : gap
What specific areas of your project would you like help with?BEM, the order of the code is probably
You very nearly got the BEM naming conventions right.
What I would suggest is having the card itself its own component.
So you would have something like this:
<article class="social-card"> <div class="social-card__top"> <img class="social-card__profile-pic" alt=""/> <h1 class="social-card__name"> etc... (I have not included closing tags)
In other words you want your components (in this case the profile card) to be independent from everything else on the page.
I hope that helps.
For reading more about BEM and how to use it properly see this video: Learn CSS BEM (and avoid these common mistakes) (by Dmitry Mayorov)
This guy explains it beautifully
I am proud that I was able to do this task easily.
What challenges did you encounter, and how did you overcome them?no difficulties
What specific areas of your project would you like help with?I don`t know
If I'm being picky, you need to add some line height to the fonts i believe?
Otherwise, looks pretty much identical!
I'm proud that I was able to put this together quickly.
What specific areas of your project would you like help with?I noticed there is a 5px height difference between the Figma design file and my finished project. Did this project need to be pixel perfect? And, did I use the correct semantic HTML tags? I appreciate any and all feedback since this is my first time having anyone review my code.
Hi,
I would highly recommend that you learn about CSS properties (sometimes called CSS variables).
Kevin Powell on YoutTube is an excellent tutor for CSS. Just do a search for "CSS Custom Properties Kevin Powell".
Learning this will take your CSS skills to the next level and once you realise their benefits, you will love using them!
EDIT: Just wanted to say that it may seem pointless using CSS variables for a simple challenge like this. However, when you start to build larger sites that are scalable, you will NEED to use CSS custom properties for scalability and readability.
I'm proud that I took the time to review all the documents and not jump into developing the code; I usually find it boring and avoid it. Next time, I'd like to first define the methodology I'll use for the CSS, implement the basic configuration (define style variables, clear predefined browser styles, initialize box-sizing).
What challenges did you encounter, and how did you overcome them?The main challenge I encountered was that the element sizes didn't match. This was because I hadn't defined the box model to make my work easier. I also didn't perform a prior analysis of the element structure for the design, which wasted my time.
What specific areas of your project would you like help with?I'd like feedback on my HTML semantics, and I think my CSS could also use some improvement. All feedback is welcome.
Hi Heber,
Here is some feedback regarding semantics as you requested. I hope this helps. Happy to answer any more questions if needed.
<body> <main role="main" class="card"> <img class="card__image" src="..." alt="..." /> <div class="card__content"> <h1 class="card__content-title">...</h1> <p class="card__content-description">...</p> </div> </main> </body>
##1. No need for role="main" on the <main> element
The <main> tag is already semantic in HTML5. Browsers and screen readers automatically understand that it represents the main content of the page. So, adding role="main" is unnecessary.
⸻
##2. Use <main> to wrap the page’s main content — not individual components
The <main> tag should wrap all the central content of a page, typically excluding things like headers, footers, or sidebars. In your code, you’ve used <main class="card">, which semantically implies the entire page is one card — this is incorrect. Instead, wrap the card(s) inside the <main> tag.
⸻
##3. Use <article> for cards
The <article> element is ideal for content blocks like cards because cards are usually self-contained and make sense on their own. Examples include blog previews, product cards, testimonials, or service blocks. Each of these could be extracted and still retain meaning, which makes them a good candidate for <article>.
⸻
##4. Wrap image and content sections in their own containers
Wrapping the image and content areas separately inside <div> elements improves:
Here is the suggested HTML structure:
<body> <main> <article class="card"> <div class="card__image-wrapper"> <img class="card__image" src="..." alt="..." /> </div> <div class="card__content"> <h1 class="card__title">...</h1> <p class="card__description">...</p> </div> </article> </main> </body>
I hope that helps!
