Hi I'm David! I'm basically completely new to frontend development outside of some html for myspace 20 years ago. But it's great to be here and hope to learn a lot along the way!
I’m currently learning...Frontend development, hopefully transitioning into JS and other interactive languages.
Any help with cutting down on the amount of css would be appreciated. Or just how to clean the code up in general.
Things I would like help with:
Any tips on shortening code
Better ways to implement the grid or if there are things I'm missing.
Overall how to make it more reactive when switching from mobile to desktop and make it look cleaner.
Tips
Better understanding of CSS Grid and if there are things I could do differently to make it easier.
Wasted code in my media query. I know it's there but it seems like every time I start to remove something it changes the layout completely.
Things I think I could use help with.
-What kind of position is more helpful in a mobile base ie (relative, absolute, fixed) or if they're even necessary in that regard?
-I'm still a little wonky on figuring out positioning when it comes to mobile as it seems I always have less space on the right side of an element versus the left. And although this can be worked around with margins I feel there might be a better way that I can't find.
Areas I could definitely use more help with: -Finding better ways to space and style a table
-It feels like I have a lot of wasted code for the lists that could probably be wrapped in a couple less selectors but I'm not 100% sure on how to do that.
Things I think I could use more feedback and help with.
-Cleaning up the code
-Finding simpler ways to create easy to read code
-Whether there are easier ways to make the elements do what I need them to do when it comes to positioning and size.
Instead of names in my testimonials I would use the :nth-child(") to select every section specific.
What challenges did you encounter, and how did you overcome them?I didn't nest a position: relative in my parent container and that's why my child with position: absolute didn't work (quotation img).
What specific areas of your project would you like help with?Just some tips or feedback on my code.
So still new to all of this so take it with a grain of salt!
First thing I noticed is when I full screened the page it seemed to stretch the grid. I'm not 100% certain if it's the proper fix but I used a max-width to make sure the grid didn't stretch along the page.
Also not certain if this is actually helpful. But I so far haven't been a huge fan of using. ```position`` on these early projects. For most of them I opt to try to use padding and margins to place things where I want them.
But the styling overall looks good. I do see some wasted space inside of the testimonial sections below the text which I think is also part of each elements width issue.
Overall it looks really good especially on mobile. Keep up the good work!
So not 100% certain on how to word this feedback but I'll try my best.
I noticed inside of your small screen CSS you had .container already set to grid and I think that was being overridden by the flexbox and that might have caused some of the issues when moving to desktop. I would definitely in your .container set justify-content and align-items to center and that might square away why it's so far up on the page. Otherwise the colors and fonts all look great. Good job and keep at it!
This is a responsive product preview card built using HTML and CSS. The design includes a product image, title, description, pricing with discount, and an "Add to Cart" button featuring a Font Awesome cart icon added via CSS pseudo-element. The layout adapts smoothly for both desktop and mobile screens, switching the product image accordingly using the <picture> element for better responsiveness.
What challenges did you encounter, and how did you overcome them?Challenges and How I Overcame Them: One challenge I faced was adding the cart icon inside the "Add to Cart" button using only CSS, specifically with the ::before pseudo-element and Font Awesome icons. Initially, I struggled with the correct syntax to display the icon properly and position it nicely. To overcome this, I carefully studied Font Awesome’s documentation and experimented with content, font-family, and positioning properties until it looked right.
What specific areas of your project would you like help with?I would appreciate feedback on the following areas:
Responsiveness: I used media queries and the <picture> element to make the design responsive. I'd love to know if there are better or more efficient ways to handle image switching for mobile screens.
Button Design with Icons: I used a ::before pseudo-element to add the cart icon inside the button using Font Awesome. Does this approach follow best practices for accessibility and maintainability?
Code Structure & Readability: I'd like suggestions on how I can improve my CSS organization or if there are better naming conventions I could use.
So overall looks really good. I'm still very new to this so take my feedback with a grain of salt.
Things that could help a lot as they've helped me just in responsiveness:
Switching to relative units(em, rem) for widths and font sizes they just change better in my opinion.
I used the flex in the body display as well and that allowed me to vertically align it center using align-items.
I did find I had more control if I put the cart image inside of the button so I could use margins to put it where I want inside of the button. example -<button><img>Text</button>
So overall it seems like you got a lot of stuff right so good job!
You are missing the image for the Omelette but other than that the page looks good.
I really liked the use of strong over using font weight. I didn't think about that in my attempt so I will hopefully remember that in the future. Keep up the good work and good luck on future challenges!
Really good looking code, although I'm fairly new to the whole deal it was easy to read and understand.
From what I can tell when it comes to overall responsiveness give switching to relative units a try (rem, em) instead of absolute (px). Either way looks good and good work!!
Code is clean and easy to read. I only recently started switching from absolute units (px) To relative units and it's definitely helped when it comes to how the content resizes on different browsers and sizes.
Good Job!
