Latest solutions
- Submitted about 2 months ago
Product Preview Card Component
- HTML
- CSS
Any notes on the responsiveness would be great!
- Submitted about 2 months ago
Recipe Page
- HTML
- CSS
I think my CSS nesting is ok as it's now supported natively in most browsers but if it's bad practice or anything let me know!
- Submitted about 2 months ago
Social Links Profile
- HTML
- CSS
I think I achieved the hover and focus states well and the site is responsive for smaller screens but if there is anything you notice can be improved then let me know!
- Submitted 2 months ago
Blog preview card
- HTML
- CSS
- Feedback on how to simplify my CSS, I think there may be some redundant styles I think it looks a bit bloated but not sure how to identify when and where to cut back.
- Feedback on my use of clamp() function for font sizes.
- Submitted 2 months ago
QR code component
- HTML
- CSS
- Code structure: I'm not sure if the centering issue I mentioned above could be solved in a simpler way. I'm also curious if my HTML and CSS have room for improvement and can be refactored to better align with standard coding practices.
- Responsiveness: While I didn't see any issues with responsiveness, I'd appreciate feedback if there are things I might've missed. At the moment I test my projects on a 14-inch laptop screen and a 25-inch monitor, and adjust for mobile devices using Chrome's developer tools.
Latest comments
- @LetterToSabSubmitted 3 months ago@user2830581Posted about 2 months ago
Hey it looks great I don't have much to add really just the desktop version is a lot bigger than it should be but that's an easy fix so not a big deal :)
1 - @xandar6Submitted about 2 months ago
- P@YeatisNeatSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I tried my hardest to make this look as close to the design as possible!
What challenges did you encounter, and how did you overcome them?I encountered a bunch of challenges I don't specifically remember what exactly but they led me to learn about CSS media queries and pseudo selectors which is how I was able to get the desired responsiveness and made sure the element sizes were matching up correctly.
@user2830581Posted about 2 months agoHey your solution looks great and is close to the design! Just a note on your HTML - you wrapped a lot of elements in
<div>
tags. Although it technically works, it's not semantic HTML and can make it harder for others to read and understand your code.There are specific tags you could've used here like a
<nav>
tag to group the navigation links, and instead of wrapping each link in a<div>
and a<p>
tag you could instead use<ul>
and<li>
tags. As I said it helps people read and understand your code but also helps with accessibility and screen readers. Try not to overuse<div>
tags in the future other than that it looks good :)Marked as helpful1 - P@Iamnotn3rdSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I tried to use that project with using Figma design. I know about how to use figma in basic level.
What challenges did you encounter, and how did you overcome them?mostly how to use Figma.
@user2830581Posted 2 months agoHey your solution is great! Good use of semantic HTML and it follows the Figma design file well. However, I noticed a couple of things mainly in the CSS that could maybe improve your solution:
- Responsiveness: Your solution isn't responsive for smaller screen sizes. Your blog card width is hard-coded to 384px which does follow the Figma design for large screens, but doesn't account for the mobile design also in the Figma file. You could add a media query breakpoint to fix this and test things using browser developer tools. Part of the brief also mentioned adjusting font sizes based on the screen size so they're smaller on the mobile version. This can also be done with media queries but I think it said to implement it without using them. I used
clamp()
to achieve this but there are other ways if you wanted to research that. - Redundant Variables and Classes: In
:root
you create a variable to--body-fs
but don't use it. In your HTML thearticle-img
class is never referenced in your CSS instead you use.blog-card > img
. Removing these can help clean up your code and make it more readable and easy to maintain. - Heading Tag Usage: You've used a
h3
tag without first having ah1
andh2
tag. These headings create a hierarchy and make code more readable. They also help assistive technology figure out where the most important information is on your page. It is best practice to change this to ah1
tag and adjust any potential styles afterwards.
1 - Responsiveness: Your solution isn't responsive for smaller screen sizes. Your blog card width is hard-coded to 384px which does follow the Figma design for large screens, but doesn't account for the mobile design also in the Figma file. You could add a media query breakpoint to fix this and test things using browser developer tools. Part of the brief also mentioned adjusting font sizes based on the screen size so they're smaller on the mobile version. This can also be done with media queries but I think it said to implement it without using them. I used
- @HossamElrawySubmitted 2 months ago@user2830581Posted 2 months ago
Your solution is good but here are some things that could be improved
- your HTML doesn't contain a
main
tag. It's not entirely necessary but it helps with accessibility and it is generally good practice to include it. - instead of having two
p
tags, the content in the class 'main-text' could be wrapped in a heading tag for better readability and accessibility. - it looks like the font family in your CSS overrides the ones correctly added in the HTML. It should be
font-family: "Outfit", sans-serif;
instead offont-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
. - your component is centered horizontally but not vertically, you could add
height: 100vh; justify-content: center;
to your body styles to change this. - there are quite a few design differences compared to the solution. Most of these are minor but can add up and affect the overall look and responsiveness. There are a lot of hard-coded margins which is generally poor practice. This can be improved by using something like Flexbox or CSS Grid as they help to space elements in a container. If you have access to the Figma file and can go into dev mode to further inspect the padding, border shadow, and general spacing then you can better adjust your CSS to fit the solution.
Overall you're on the right these are just some improvements that might help to expand your skills!
Marked as helpful1 - your HTML doesn't contain a