P
@kuba-guzynski
Latest solutions
Meet Landing Page
PSubmitted 28 days agoI would like help with:
- Opportunities for refactoring
- Feedback on my solution to creating the responsive hero design.
- Replicating the overflowing hero image on desktop
- Mixing methods. Sometimes I have used flexbox (where spacing between elements is even), and at other times I have used margin-bottom (where spacing differs between elements)
- To get the right layout for the desktop cta section, I used max-width on the text-containers, but this does not feel like the most effective way.
Testimonial Grids Section
PSubmitted about 1 month agoAny feedback is welcome, but I would specifically appreciate comments on:
- Possible refactoring opportunities
- Industry best practices (as in, are there methods I haven't utilised that are considered to me industry best practice)
Four Card Feature Section
PSubmitted about 1 month agoI would like help with:
- Refactoring of code to make it as clean as possible.
- Naming of some of those slightly unique or uncommon classes.
- Other methods to achieve this layout.
Product Preview Card
PSubmitted about 1 month ago-
I would like help around best practices for handling images and how to manipulate them in the layout. This is generally something I don't feel as comfortable in.
-
Refactoring code
-
Recipe Page (w/ media query, clamp function, and grid)
PSubmitted about 1 month ago- Alignment and styling of list markers.
- Table layouts
- Anything else you might notice in my code!
Social Profile
PSubmitted about 2 months ago-
The correct way to write link styling in CSS. I think I did ok here, but had some doubts on how to write clean CSS for the different states.
-
Class naming. I will go back and study BEM naming convention again. I feel like I might have half done it well, and half not in this project.
-
Latest comments
- P@smartinuk88
Everything is very good on the design. You got the number part right and the layout and spacing looks good. Just some small attention to detail on font sizing, and the main issue to look at is the hero section layout on desktop. It uses the image for smaller sizes instead of the hero-left and hero-right images.
On this, it is a very interesting solution using JS, which I would like to study more, but you can achieve the layout with simple media queries toggling the display between none and inline-block at the right break-points.
I hope that helps. I enjoyed looking at your solution.
- @rahfflesiaWhat specific areas of your project would you like help with?
writing less media queries but any constructive advice would be great.
P@smartinuk88The design works and looks as expected, almost perfectly, so well done. It is a successful project.
Good semantic HTML with main, section, and article tags. Class names all make sense, but maybe look into the BEM naming convention or other naming methods to take this up a level.
The CSS is set up well with custom properties etc. It works fine for this project, but just something to keep in mind is using a class for your overall testimonial, instead of using element selectors like article, as on larger projects this could become a problem.
The only thing about the layout is a moment where it goes from 1 column to 2 columns but not in the prescribed layout, I am not sure if this was intended or not.
Your media queries are good. I don't think you need to reduce them. I like your use of grid areas, however, there is no need to define them in both media queries. Just define them in your original CSS once.
Very good job. I hope some of this helps. Keep going!
Marked as helpful - @7aresWhat are you most proud of, and what would you do differently next time?
Responsive layout using CSS Grid
- Utility-based CSS with custom properties (
:root) - Adaptive font sizing using
clamp() - Clean mobile-friendly design
- Optimized
box-shadow, spacing, and structure - Semantic HTML and accessible markup
P@smartinuk88First of all, good job on managing the layout and switching from the mobile layout to the desktop layout.
The shadow looks good and you have used CSS custom properties well.
Using clamp is a very good way to fluidly make font-sizes and widths responsive, so well done.
There are a few issues with the font, and spacing. The width of the title is too narrow and so wraps onto too many lines.
The spacing within the features and between the features also needs closer attention.
I am sorry I don't have time to go into your code properly to give more structured feedback, but I will come back to it later.
But until then, I hope this helps to have a closer look into improving in some areas.
- Utility-based CSS with custom properties (
- @MarkGamboaaWhat are you most proud of, and what would you do differently next time?
I'm most proud of how closely I was able to match the final design to the provided desktop mockup, especially in terms of layout, spacing, and responsiveness
What challenges did you encounter, and how did you overcome them?One of the main challenges was getting the spacing and alignment to match the design exactly, especially the vertical centering and padding on the right side of the card
What specific areas of your project would you like help with?How to make my CSS more maintainable and scalable for larger projects.
P@smartinuk88You have gotten it very close indeed to the design, so very well done. If you weren't using a Figma file (which it sounds like from your comments), even more well done!
It looks as though the image doesn't immediately change to the mobile image when it hits the break point as I make the screen smaller, so you may want to look at that.
Looking at your code, I will start with the HTML:
Well-structured and you use class names that make sense. There is no need to wrap every element inside its own div. For example, instead of wrapping the h1 in a div, you can just style the h1 itself. For semantic reasons, It is also good practice to wrap your content in a main tag. But you are 99% there. Very good use of the picture and source elements as well!
Now, the CSS. To make it a bit more scalable and sustainable, try to set CSS custom properties for reusable styles such as colors etc. That way, in a real-life situation, if any of those colors would change, you would only need to change it in one place, instead of everywhere you use that color. The only other main thing to look at is that I think you could simplify your margins and padding a bit. You could use custom properties for values that you are repeating a lot, and you could maybe use flex with gap to simplify the layout instead of a margin-bottom on a lot of elements.
But all of your code is well structured, makes sense, and like I said, you have clearly put in a lot of effort to get it as close to the design as possible. Good job.
- @Moiz-002P@smartinuk88
Really good job. Pretty much nailed the design.
I particularly liked your use of nth child selectors in various places, especially for styling the row dividers in the table. It was a much more efficient solution than my own.
Good semantic HTML as well, using strong tags for bold sections for example.
The only thing is to pay closer attention to spacing. Some of the padding is a little off the intended design. There should be more space between list items in the instructions section for example, and in general around the entire recipe page content.
I enjoyed looking at your solution and I learned some things to help me improve, so thank you, and keep going!
- @icabduqaadir12What are you most proud of, and what would you do differently next time?
I’m proud of how clean and organized my code turned out. The component is responsive and visually close to the design. Next time, I’d like to experiment with utility classes or even build the same component using a framework like React or a CSS preprocessor like SCSS for scalability.
What challenges did you encounter, and how did you overcome them?The main challenge was aligning and spacing content consistently across screen sizes. I solved this by using Flexbox and applying mobile-first styling with fluid widths and proper margins. Getting the shadow and font sizing just right also took a few iterations.
What specific areas of your project would you like help with?I’d love feedback on:
My use of Flexbox for layout
Visual spacing and typography choices
Suggestions to make the component more accessible (aria labels, better contrast, etc.)
P@smartinuk88Great job. You have gotten the design almost identical, so really well done on that.
I will give some feedback on some of the areas you asked for, and then I have a few extra points.
Flex
- You have used flex well to centre the card in the page. This is a good, easy way to centre something like this.
- As the card is the only child element, there is no need for flex-direction: column, though you have probably done this because of the footer, which makes sense.
- You could use flexbox for the layout of the card itself. That way, you wouldn't have a need for so much margin-bottom. You would just need to set the gap property.
Other points
- Well-structured HTML and CSS. I found it easy to read and understand.
- You haven't set any sizing or fit properties on the image. Therefore, it overflows on small screens. For this image, width: 100%, height: auto, and object-fit: cover would work well (someone correct me if i'm wrong!)
- I like your idea of using an a tag for the title (which is also a link), but I would put it inside a h1 tag, so it is more semantic.
- I am not sure the category is supposed to act as a button. I think it is just a tag.
- By adding a border to this button, it pushes everything else down on hover, which is a little jarring.
I hope all that helps. Again, you nailed the design. You nailed that shadow! Keep going. I look forward to seeing more of your solutions.
