Skip to content
OverviewSolutions
11
Comments
11

uptown_girl

@uptowngirl757Lagos, Nigeria210 points

Mathematics Major | Christian | Aspiring Frontend Web developer & Python Programmer | Acoustic Guitarist | Singer | Hamilton Enthusiast 💓

I’m currently learning...

CSS | Python

Latest solutions

View more solutions

Latest comments

  • uptown_girl•210
    @uptowngirl757

    Instead of using separate media queries for both min-width and max-width, you can simplify things by just using one media query for min-width and writing the max-width styles outside of any media query. This approach can help keep your code cleaner and more efficient

    Also, you should consider using semantic HTML tags like section, main, and stuff instead of divs for the whole page. It’s an excellent practice for accessibility and SEO. Overall, keep up the good work.

  • Akash Naik•40
    @cakesandcarrots
    What are you most proud of, and what would you do differently next time?

    This one a level above the previous projects in difficulty. Going mobile first was a great choice and tailwind as always is a lifesaver. Learnt a lot about how to maintain responsive in a better manner.

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

    The last tabular thing (the proteins,carbs etc part) was tricky. The bullet points were also cheeky but I learnt something new cause of them.

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

    Nothing as of now but if anyone wishes to provide any feedback then I whole-heartedly welcome it.

    Responsive Recipe Page

    #tailwind-css#vite
    1
    uptown_girl•210
    @uptowngirl757

    Hi, nice solution! The only thing I think you need to fix is the excessive use of <div> elements. In future projects, consider using semantic HTML tags like <main>, <section>, and others for better structure. Other than that, great solution!

  • uptown_girl•210
    @uptowngirl757

    Great job on your solution! I have a few suggestions that might make it even better:

    You could consider using the <section> tag to wrap different parts of the page, like the header, footer, nutrition table, and cooking steps. This would improve accessibility and make styling easier in different scenarios.

    Other than that, you’re doing an awesome job—keep it up!

  • uptown_girl•210
    @uptowngirl757

    Hey! Nice design—you've done a great job replicating the target look. It’s already really close, but with a few tweaks, it can be even better:

    1. Use semantic HTML – Instead of relying on <div>s for everything, try using <article>, <main>, and other semantic tags. This improves SEO and accessibility, making your code more structured and meaningful.

    2. Improve hover visibility – Right now, the text remains white on hover, which affects readability. A darker background on hover would improve visibility. Try this:

    .list-card li a:hover {
    background-color: #0006;
}

    This ensures a subtle but effective contrast shift.

    Making these small adjustments will refine your design even more! Keep up the great work

  • Sachira Dilshan•70
    @MLASS-Dilshan
    What specific areas of your project would you like help with?

    I would like to know how min and max values works like min height, min width etc.

    blog-preview-card

    1
    uptown_girl•210
    @uptowngirl757

    Alright, let’s talk min-height and min-width—these are absolute lifesavers when it comes to responsiveness. Setting min-height: 100vh; means your element will always be at least 100vh tall, but if the content inside needs more space, it expands instead of causing an overflow. Compare that to just height: 100vh;, which would force an overflow when the content gets taller. So yeah, min-height is basically your best friend. You wanna use it almost all the time.

    Now, about your code—I checked it out, and it's already solid, but with a few tweaks, it’ll be even better:

    1. Use semantic HTML – Instead of wrapping everything in <div>s, try using <main>, <section>, and <article>. It helps with SEO, accessibility, and just makes your code cleaner.

    2. The .card is missing a border – There’s supposed to be a 1px black border around it. Easy fix, but it makes a difference.

    3. Image cuts off on shorter screens – Right now, you’re using height: 100vh;, which is causing the image to get clipped at the top. Switching to min-height: 100vh; should keep everything looking right.

    4. There's a border-radius set on the img. You can use border-radius: inherit if you already have one set on the .container

    Make these tweaks, and your code will go from great to perfect.

    Marked as helpful
  • P
    Vitaly•60
    @V0000DY
    What are you most proud of, and what would you do differently next time?

    I'm most proud of achieving a clean and semantically correct HTML structure. Successfully using semantic elements like <main>, <article>, <time>, and <span> significantly improved the document's organization and accessibility.

    Next time, I would focus more on the initial planning phase. By sketching out the design and structure beforehand, I could minimize the amount of refactoring needed later on, leading to a more efficient development process. Specifically, better initial planning of CSS classes would help avoid unnecessary class names and styling conflicts.

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

    One significant challenge was getting the layout to be perfectly responsive across different screen sizes. Initially, the card looked great on desktop but needed adjustments for mobile devices.

    I overcame this by adopting a mobile-first approach and using CSS media queries. I started by styling the card for smaller screens and then progressively enhanced the styles for larger screens. This approach ensured a consistent and pleasing user experience, regardless of the device. I also spent extra time testing the layout on various devices and browsers to identify and fix any inconsistencies.

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

    I would appreciate feedback on my CSS architecture and naming conventions. While I successfully refactored the CSS to reduce redundancy, I'm always looking for ways to improve the organization and maintainability of my stylesheets. Specifically, I'm interested in best practices for structuring CSS files in larger projects and effective naming strategies for CSS classes to ensure they are both descriptive and scalable. Any insights on these aspects would be highly valuable.

    Flex, transition css-property

    #accessibility
    1
    uptown_girl•210
    @uptowngirl757

    Your CSS is well-structured and demonstrates good use of variables, BEM-like class naming, and a clean, organized approach. Here’s some suggestions for improvement:

    -The border-radius: 10px; appears multiple times. Consider defining it in .card and inheriting it where necessary.

    .card {
  border-radius: 10px;
}

.card__image, .card__content {
  border-radius: inherit;
}

    -The .card__image definition appears twice in your CSS. Remove the duplicate.

    Your BEM naming is good, but:

    .card__content Consider renaming it to .card__body (common convention)

    .card__author-name Could be card__author-text (more general)

    These changes make class names clearer and more reusable.

    You wrote:

    .card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;  /* Invalid */
}

    align-items: left; is not valid CSS (should be flex-start)

    You might also want to add a little margin to the card on the top and bottom so that there's spacing on shorter screens

    Marked as helpful
View more comments