Hello ! This is my first attempt to a web challenge (and my first try on html ans css).
I tried to used good practice than I learned as a self-taught for responsive website, use of SCSS and the BEM naming convention.
What could I improve or modify? This would allow me to refine my understanding of the html and css concepts.
Thanks for your feedback,
Best,
Logan
Hi Logan!
If I got it right and this is your first attempt ever at building something with HTML and CSS, you've done a great job! I'd never have guessed it from the looks of it.
Here's some feedback:
You have some validation issues. Firstly, you're using section elements without headings. Semantically, the person's name would be a good fit for an h1 in this case (your box__title-element). That way, you wouldn't need to enclose it with b-tags either, since headings are bold by default. Secondly, you also have a redundant p-tag that generates an error. (See the full list here: https://validator.w3.org/nu/?doc=https%3A%2F%2Fprofile-card-component-one-lemon.vercel.app%2F)
On landscape mobile, there's no whitespace above and under the card, and the footer overlaps the bottom of it (I made the same mistake when I did this challenge).
The width of the card behaves a bit weird in breakpoints below 540px since it grows and gets wider than in larger screens. You might want to add a max-width here.
On a more general note, it's great that you dare trying out BEM and SCSS in your first attempt! But if you're new to HTML and CSS, my advice is to focus on getting comfortable with these basics first and foremost. Getting them right is so crucial for understanding both the "whys" and "hows" of more advanced concepts. Knowing when to not add on more complexity is a big part of this in my opinion. Technically, things like BEM and SCSS aren't needed for small projects like this one. You'd get by just fine (IMO even better) with the refreshing simplicity of pure HTML and CSS. I think the biggest reason why you're often seeing concepts like these being used in challenges like this here is that people who are ready to take them on see it as an opportunity to practice, not because they're needed.
All-in-all, I think you're doing great! If you keep at it and practice more basics you'll be able to call yourself a frontend developer in no time.
Constructive feedback is always appreciated! :)
Hi Nocks! Thank you, and thanks for your feedback!
I'll look into the responsiveness and try out the tool you recommended. Do you prefer it to using the dev tools in FireFox or Chrome?
