Design comparison
Solution retrospective
In this project I was able to put some best practices into good use. This included using the html root and rem unit to control my page sizing easily.
What challenges did you encounter, and how did you overcome them?It was my first time using the BEM class naming technique. So it was confusing at first. But with concept on how Block, Element and Modifier works I was able to solve my problems.
What specific areas of your project would you like help with?I will love any insights on class naming system BEM.
Community feedback
- @danielmrz-devPosted 4 months ago
Hey there!
Congrats on finishing the challenge! ā
Your solution looks awesome!
š It's a good idea to use semantic HTML elements like
<ul>
and<li>
for lists. This makes your code more accessible, maintainable, and meaningful.Here's an example of how you can refactor your code:
After Refactoring
<ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul>
Using
<ul>
and<li>
makes your content structure clearer, which is better for screen readers and search engines. Plus, it follows best practices for HTML.Hope this helps!
Keep up the great work!
0 - @krushnasinnarkarPosted 4 months ago
Hi @HavillahAnya,
Congratulations on successfully completing the challenge! Your code is well-structured, and the website works perfectly across different screens.
Here is some information about BEM class naming that might be useful for you:
The BEM (Block Element Modifier) methodology is a popular CSS naming convention that aims to make your code more maintainable and scalable. Here's a brief overview of how BEM works and how you can apply it to your HTML structure:
BEM Methodology Overview
- Block: The main component or container.
- Element: A part of the block that performs a certain function.
- Modifier: A flag for a block or element that changes its appearance or behavior.
The naming convention follows this pattern:
- Block:
.block
- Element:
.block__element
- Modifier:
.block--modifier
or.block__element--modifier
Class names suggestion for your solution:
- Block:
.card
is the main component or container. - Elements:
.card__img-box
for the image container..card__img
for the image itself..card__header
for the header section..card__header-name
for the name within the header..card__header-location
for the location within the header..card__lead
for the lead paragraph..card__social-links
for the container of social link buttons..card__social-link
for each social link button.
I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.
Feel free to reach out if you have more questions or need further assistance.
Happy coding!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord