Latest solutions
Recipe page main
Submitted 7 months agoI couldn't find a solution for the spacing between the bullet points and the text.
Social links profile main
Submitted 7 months agoEverything if possible. Any tips or guidance are more than welcome.
Blog preview card name
Submitted 7 months agoTips on how to write my CSS as responsible and maintenable as possible.
QR Code Component Challenge
Submitted over 2 years agoAny valid points are more than welcome. I'm not sure if I used the semantic HTML the right way, and I would appreciate some tips on how to improve my css
Latest comments
- @learnfullstack-carlos@sanchesaline6
- Pay more attention to font weight, size, and color.
- In the Nutrition section, instead of using div elements to copy the behavior of a table, you should properly use the table element and adjust as needed.
- Maybe try to use a combination of selectors to apply style in multiple elements instead of creating a lot of classes.
Marked as helpful - @Mse103454@sanchesaline6
Your design looks great! Congratulations! Some points you could improve:
- Instead of using div elements everywhere, learn about semantic HTML.
- Code indentation is important for readability, not just on HTML code but CSS as well.
- Try not to use a class attribute for just one element applicability, instead use the id attribute.
Marked as helpful - @code-techhbWhat are you most proud of, and what would you do differently next time?
Proud of the shadow effect on card 😁
Improvement: In the next iteration, I'm gonna use CSS grid and add a Readme file for the project
@sanchesaline6Your design looks great! Congratulations! A few tips:
- You could use the font @font-face rule on your CSS file so you would load from the .ttf file available in the project starter kit.
- Consider using classes only if there is more than one place where they would be utilized. There was no need to create a div for every class there. You could try using combinations of selectors or combinators instead.
Marked as helpful - @AravindM817What are you most proud of, and what would you do differently next time?
I was able to replicate the design as closely as possible.
What challenges did you encounter, and how did you overcome them?Positioning the container to the center of the screen even after using the flex properties. I used the margin-top to overcome this issue.
What specific areas of your project would you like help with?I would like to know about other methods using CSS which I can implement to complete this challenge. How can I improve my current CSS code and common practices I should follow while writing CSS code.
@sanchesaline6I used CSS variables to define properties like colors and spacing. You missed applying the h1 color, as shown in the Figma file. You should try to learn about using flexboxes; it would've helped you with the positioning issue you mentioned. Also on the Figma file you would find some tips about the size of the content and the qr-code image, spacing, gaps, etc.
Marked as helpful