Skip to content
OverviewSolutions
8
Comments
8

rainbowsurfer137

@rainbowsurfer13780 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    rainbowsurfer137•80
    @rainbowsurfer137Posted 19 days ago

    Great work using CSS Grid and semantic HTML!

    To make your solution look more like the design, you could add drop shadows to the testimonials and include the background image in larger screen sizes.

    0
  • P
    rainbowsurfer137•80
    @rainbowsurfer137Posted 22 days ago

    Nice job! The use of grid effectively organizes the cards.

    To make your design more closely resemble the original challenge design as screen sizes change, you can set fixed widths and heights for the card sections. This will prevent them from adjusting dynamically when the viewport changes.

    0
  • P
    rainbowsurfer137•80
    @rainbowsurfer137Posted 27 days ago

    You’ve made great use of Tailwind’s utility classes. The md: breakpoints are effectively used for the mobile-first approach. Using picture for responsive images is a good choice. This ensures that the right image is served based on the screen size, improving load time and performance.

    In the button class hover:hover:bg-[#243F32], there’s a duplication of the hover class. The hover pseudo-class doesn’t need to be repeated. Simply use:

    <button class="add-to-cart-btn w-full h-3 bg-[#235B49] mt-5 min-h-10 p-2 rounded-lg flex items-center md:flex md:flex-row hover:bg-[#243F32]">

    You’ve done a great job!

    0
  • Samira•120
    @gely25Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that it worked. It may not be the best result, but I managed to achieve something. Next time with feedback and practice I will do it better.

    What challenges did you encounter, and how did you overcome them?

    As a beginner in CSS, one of the challenges I encountered was different approaches, and after some trial and error, I was able to centering the container properly despite using Flexbox. I tried fix it by setting the height of the body to 100vh, so it occupies the full height of the window. I'm not sure if this was the best practice, but it worked for my case. Additionally, I find it challenging to calculate positions accurately, so I tend to rely heavily on padding and margin to adjust layouts. I'm not entirely confident that I'm doing it correctly, but it helps me achieve the desired results. Another challenge I faced was related to the mobile view for the recipe content. According to the model, the recipe content should occupy the full screen, but even after using height: 100%, it wasn't working as expected. I think this might be due to the fact that I used many nested containers in my HTML, for example, a parent container and then a card container that wraps the recipe content. I wonder if I'm overcomplicating things, but it was difficult to get it to work as intended

    What specific areas of your project would you like help with?

    As I'm still new to this, I'm finding the layout a bit challenging. I'm not sure if the way I structured my HTML is correct; I wonder if there are redundant containers or if I may be missing some necessary ones. I would appreciate feedback on this. Additionally, I'm uncertain about the CSS, especially regarding how I handled centering and the distribution of paddings. Any general feedback would be really helpful for me to improve."

    Responsive Recipe Page

    1
    P
    rainbowsurfer137•80
    @rainbowsurfer137Posted about 2 months ago

    You can use flexbox for alignment. Here is an example:

    .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    Keep up the good work!

    0
  • P
    rainbowsurfer137•80
    @rainbowsurfer137Posted about 2 months ago

    This looks great! My only suggestion is that the font size in your buttons seems a little big. A smaller size would probably help with the layout of the second button.

    1
  • P
    rainbowsurfer137•80
    @rainbowsurfer137Posted about 2 months ago

    This looks great! I like the way you styled the buttons.

    You could use <h1> and <h2> for the card title (Jessica Randall) and location instead of <p> for better SEO and structure. You could also add media queries for a more responsive design.

    0
View more comments