I'm feeling better now as compared to my first challenge.
What challenges did you encounter, and how did you overcome them?Challenges i faced in knowing about the font size, border-radius, width, height at finally knew it from figma design.
I'm feeling better now as compared to my first challenge.
What challenges did you encounter, and how did you overcome them?Challenges i faced in knowing about the font size, border-radius, width, height at finally knew it from figma design.
GOOD Job! your code is functional and clean but here are a few recommendations to make it more professional and maintainable:
1. Use Semantic Tags: Replace generic div
elements with semantic tags where appropriate. For example use <time>
for the publication date.
<time class="card__date">Published 21 Dec 2023</time>
2.BEM Naming: use BEM (Block-Element-Modifier) methodology for class naming to improve purity and understandable code, example:
<article class="card"> <img class="card__image" src="..." alt="..."> <div class="card__tag">Learning</div> <time class="card__date" datetime="2023-12-21">Published 21 Dec 2023</time> <h2 class="card__title">HTML & CSS foundations</h2> <p class="card__description">...</p> <div class="card__author"> <img class="card__avatar" src="..." alt="..."> <span class="card__author-name">Greg Hooper</span> </div> </article>
3. Mobile Responsiveness: Add media queries for mobile devices (max-width: 375px).
@media (max-width: 375px) { .container { width: 327px; height: auto; padding: 20px; } .card__tag, .card__date { font-size: 12px; } .card__title { font-size: 20px; } .card__description { font-size: 14px; } }
4. In Author Section, use flexbox instead of float: Use Modern CSS layout standards: Flexbox/Grid.
.card__author { display: flex; align-items: center; gap: 12px; margin-top: 24px;
With these improvements, the code will be more robust and professional.
The main thing to remember is that you are amazing!
nj,n
What challenges did you encounter, and how did you overcome them?,jnk,n
What specific areas of your project would you like help with?jb,jb
Great job! but everything needs to be changed from html to css, good luck!