Latest solutions
- Submitted 27 days ago
Four Card Feature Section
#bem- HTML
- CSS
I would like to know of alternate ways of aligning the cards for the desktop page.
- Submitted about 2 months ago
Product Preview Card Component
#bem#accessibility- HTML
- CSS
There are multiple areas I would like help with:
- BEM (block-element-modifier)
- Accessibility
- CSS organization
- Submitted 2 months ago
Recipe Page
#bem- HTML
- CSS
I would be grateful for any advice or tips on how to organize my CSS using BEM and what I could do differently.
- Submitted 2 months ago
Social Links Profile
- HTML
- CSS
I would like help with the organization of my CSS file. Any ideas on how I could rewrite it to make it easier to understand to other devs is greatly appreciated!
- Submitted 2 months ago
Blog Preview Card
- HTML
- CSS
Any tips on organizing my CSS file is greatly appreciated! I'm always second guessing myself on whether my CSS is readable enough.
- Submitted 2 months ago
QR Code Component
- HTML
- CSS
The organization of my CSS file is what I need the most help with. I feel like I can accurately create CSS solutions but maintaining these style sheets seem difficult.
Latest comments
- P@himatthewwSubmitted 30 days agoP@DasaruPosted 27 days ago
I like your CSS Grid solution to the desktop page. That's a good way to align the cards.
One small problem I found is that you put the header inside of the main tag. Both header and footer tags should be outside of main. Other than that, you did a great job.
Marked as helpful0 - @shakirbakareSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of the fact that I used Sass @mixin, @media query and @content directives to make the solution responsive
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
Responsive product preview card using Sass, @content, @mixin, and more
#accessibility#bem#pure-css#sass/scssP@DasaruPosted about 2 months agoExcellent solution. Nice use of mixins. I have not used Sass but I can see how useful it is to have your responsive styles next to the element in question.
1 - @shakirbakareSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of the number of problems I solved in this challenge:
-
I coded a border for all the table cells but the last one
-
I aligned the cells to match the design provided
-
I coded spacings for the table cells.
-
I styled the lists. Especially the bulleted lists. I controlled their size and color.
And I did all these using the :not(:last-child) and :mark selectors, and the Sass nesting and mixin functionalities.
I'm so proud of myself and skills!
What challenges did you encounter, and how did you overcome them?No challenges. I know my onions about styling in CSS
What specific areas of your project would you like help with?None. But any feedback on my code structure, organization, and semantic elements choices would be appreciated
Recipe Page using semantic elements, custom CSS properties, Sass, BEM
#accessibility#bem#sass/scss#pure-cssP@DasaruPosted 2 months agoNice solution. One thing I would suggest using is CSS At-Rules such as @font-face and @media. Font-face is an alternative way to link fonts directly into your project as opposed to linking via CDN. Media queries are also a great way of making your page responsive for different sized devices such as mobile, tablet, and desktop.
It's also worth noting to be careful of overusing the :not pseudo-class as it can increase the specificity of the CSS rule.
1 -
- @Davilucca22Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Do que você mais se orgulha?: consegui fazer o exercício de forma mais rápida, adaptei a imagem de acordo com o site
o que faria diferente da próxima vez?: incluiria javaScript
P@DasaruPosted 2 months agoNice solution. I like how you customized this by adding in your own personal information. It's a nice touch. Here are some pointers for you:
-
I would recommend learning flexbox. That will allow you to align and center elements inside of containers.
-
For your HTML, you should use an unsorted list and have each anchor be inside a list element. Section tags should be used for larger parts of a webpage:
<ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul>
Marked as helpful0 -
- @msharjeelaliSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
This time I managed to complete challenge quickly than before.
P@DasaruPosted 2 months agoGreat solution.
I would recommend using flexbox to center the card on the screen rather than using the transform/translate method. You can make the body tag a flex object and center the card with justify-content and align-items.
You can also use the flexbox gap property to align items inside of the card itself rather than using padding/margin on each item. It can help simplify the spacing logic to avoid future confusion.
0 - @TathianiLimaSubmitted 2 months agoP@DasaruPosted 2 months ago
Your solution seems pretty solid.
I noticed you used Arial for your font. For implementing custom fonts, you can use the @font-face at-rule to import it (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).
You can download many free fonts from google fonts including the Outfit font used in the challenge (https://fonts.google.com/).
0