I would really aprecciate some feedback on my CSS class naming using BEM, as I'm still new to it.
Latest solutions
Testimonials Grid Section
#sass/scssSubmitted 5 months agoI couldn't really mirror the design's wide margin around the grid, in the desktop view, because when I tried increasing the margin, the grid overflowed
Four card feature section
Submitted 6 months agoI really struggled with this one.
For the desktop card layout, I used grid and specified the position of each card, but this feels hacky, is there a better way?
It was also my first time using BEM and I'm not sure I did it right.
Product Preview Card Component
Submitted 6 months agoThis was my first responsive design ever, so any feedback on responsiveness is appreciated.
One thing regarding fluid typography: when using
clamp()
I'm just going through trial and error to figure out values that look good, is there a better approach?Recipe Page
Submitted 6 months agoI gave up at adhering to the mobile design because I had no idea how to make the padding of only the top image disappear on smaller screens. Any clue is highly appreciated.
Social Links Profile
Submitted 6 months agoThe challenge "Ideas to test yourself" section includes:
"Ensure visitors can navigate the links only using their keyboard."
I don't know how to do that
Blog Preview Card
Submitted 6 months agoThe challenge page includes this prompt:
"The font sizes in this project are slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries."
But I don't know how to do that.
Latest comments
- @Bruno514Submitted 5 months agoWhat specific areas of your project would you like help with?@nilmusPosted 5 months ago
Much better than my solution, I don't think I'm in the position to give feedback
1 - @CoolNight99Submitted 6 months agoWhat specific areas of your project would you like help with?
I'm not sure how to get the intro headings to fit the screen on the mobile design.
@nilmusPosted 6 months agoI would focus on writing semantic HTML, instead of over-relying on
div
. Also, don't forget thealt
attribute for images.1 - @YosefHayimSubmitted 6 months ago@nilmusPosted 6 months ago
I see that to switch from the mobile-image to the desktop-image, you used
display: none
inside your media query.This works, but note there is a better solution by using the
figure
element and giving it animg
and asource
, like so:<figure <source media="(min-width: 1024px)" srcset="images/image-product-desktop.jpg" /> <img class="product-image" src="images/image-product-mobile.jpg" alt="perfume image" /> />
Marked as helpful0 - @NalishSubmitted 6 months agoWhat challenges did you encounter, and how did you overcome them?
My main challenge was integrating the fonts that were provided.I ended up working with the default font .
What specific areas of your project would you like help with?I would really appreciate insight on working with fonts especially when the font folder is already provided. I would also love to learn how. to style the table.
- P@laxmikishore13Submitted 6 months agoWhat specific areas of your project would you like help with?
I need help with whether the structure i am following is good for css and html, and any code improvements should i do?
@nilmusPosted 6 months agoGreat job on the final result, it looks just like the design.
Some things you could improve are:
- you have not used
<a>
elements for the links - using a list element is preferred for a list of links, rather than the
button
elements you used - you could use semantic HTML instead of relying on
div
- in the CSS, instead of having a huge selector of
h1, h2, h3, h4, h5, h6, p
you could just apply those properties to thebody
selector
0 - you have not used
- @tr-KalyanSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
Used my experience from previous project.
What challenges did you encounter, and how did you overcome them?Alignment of author image which is svg file and the name
What specific areas of your project would you like help with?Any suggestion to improve the readability of the code.
@nilmusPosted 6 months agoYou could use a wider range of semantic tags, rather than only using
<section>
. For example:<header>
,<footer>
...0