Skip to content
OverviewSolutions
8
Comments
9
P
Kaczupinko
@Kaczupinko

All comments

  • Kaczupinko•170
    @KaczupinkoPosted 3 months ago

    Great job! 🌟 Just a couple of small things—don't forget to add the opacity in the footer section, and it looks like one image is missing from the content section. Other than that, everything else is spot on! 👍

    0
  • Larisa•130
    @LarisaKampeSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    My second tailwind project, but first tailwind grid exercise. Very fun!

    Testimonials grid

    1
    Kaczupinko•170
    @KaczupinkoPosted 3 months ago

    Keep it up! You're doing great!

    Marked as helpful
    0
  • Laura Nguyen•130
    @laura-nguyenSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I'm getting used to Tailwind CSS. It's my 2nd time using it. What I would do differently next time is revert back to using Sass for now. I feel like Tailwind CSS may be more advantageous to use for more significant projects such as a landing page. Since this task was simpler i.e. components, it would have been more time efficient to style with regular CSS or Sass

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

    For the desktop layout I wasn't sure how to get the two cards to be in the same column in the middle. A solution I did was to wrap the two middle cards in a div and then do a 3-column grid. I'm open to other solutions

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

    Any resources about flex would be great i.e. what is flex grow, flex shrink, etc

    Four card feature section with Tailwind CSS

    1
    Kaczupinko•170
    @KaczupinkoPosted 3 months ago

    You can add a custom box shadow to your Tailwind configuration like this:

    module. exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom-blue': '0px 15px 30px -11px rgba(131, 166, 210, 0.5)',
      }
    }
  }
}

    And make sure the background in your <div> is white. Other than that, the project looks very nice, and personally, I like it. You can find everything you need regarding Tailwind at tailwindcss.com.

    0
  • Vitor Lopes•20
    @vitordevlopesSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    It was a nice challenge, I got to learn more about how to use width, heights properties and I also used more flexbox in this project, which was really good. Next time would try to make a responsive layout but I still don't know much about it.

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

    I couldn't make my page fit some different screens widths, the content disappeared in small screens (like mobile), I asked chatGPT and it taught me about using "max-width", based on this I managed to solve the problem (it still isn't perfect). I also used discord to ask about it, I got a good reply that helped me a lot.

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

    Any tips about responsive layout are welcome! Also, I'm not sure if the active states are right, I didn't understand what was in Figma.

    Blog Preview Card using CSS Flexbox

    2
    Kaczupinko•170
    @KaczupinkoPosted 3 months ago

    It looks good overall. The 'Learning' button should have a black background with yellow text when hovered over. Additionally, the <div class="attribution"> shouldn't interfere with the main content of the page; it can be positioned at the bottom to avoid affecting the layout.

    0
  • Kaczupinko•170
    @KaczupinkoPosted 3 months ago

    Semantic HTML: Your code generally uses the right HTML elements, but you could improve it by wrapping the title and description in a <header> tag for better structure.

    Accessibility: It's pretty accessible, but adding some aria-label attributes to the button would make it even better for screen readers.

    Responsive Design: Your layout adjusts nicely across different screen sizes. The use of Tailwind's responsive classes makes it easy to manage.

    Code Structure: Your code is clean and easy to read, thanks to Tailwind. However, the inline SVG in the button might be better as a reusable component.

    Design Consistency: You did a great job sticking to the design. The spacing and alignment are spot on.

    Improvements:

    Use <header> and <section> tags to better structure your content. Add aria-label attributes for better accessibility. Consider moving the SVG icon into a reusable component. Overall, your code is solid, responsive, and well-organized. Just a few tweaks, and it’ll be even better!

    0
  • Danish•80
    @Danish030Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    main part i have learned here to destructure design into chunks and starting making structure in html, and i have used htm sematic tags wisely here

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

    it's challenging to figure out about structure, else part is not that much hard

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

    i have worked with html semantics and css grid

    Recipe page

    1
    Kaczupinko•170
    @KaczupinkoPosted 3 months ago

    The project looks good, but work on improving the padding and make sure to consistently use either px or rem throughout your styles. Additionally, I noticed that your font sizes vary between px and rem—it might be beneficial to stick to one unit for consistency and better scalability, especially for responsive design. Consistency in your CSS will make your code easier to maintain and read. Keep up the good work, and these adjustments will enhance the overall quality of your project!

    Marked as helpful
    0
  • Kaczupinko•170
    @KaczupinkoPosted 3 months ago

    Your project looks good, but keep in mind that the .attribution element is disrupting the overall layout. It should be fixed at the bottom of the page, similar to this:

    .attribution {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: var(--white);
}

    This will ensure it stays at the bottom, giving the page a more polished appearance.

    Marked as helpful
    0
  • Kaczupinko•170
    @KaczupinkoPosted 3 months ago

    Semantic HTML: The HTML structure is clear, but consider using more semantic elements like <article>, <header>, and <footer> to enhance accessibility and document structure.

    Accessibility: The solution appears accessible, but the image’s alt attribute should be more descriptive for better screen reader support.

    Responsive Design: The layout adapts well to different screen sizes. However, refining the media queries could ensure even better consistency across devices.

    Code Structure: The CSS is well-organized, and using custom properties (--variables) is a good practice for maintainability.

    Design Consistency: The solution closely matches the design, though minor adjustments in spacing and typography could enhance visual alignment.

    Overall, the code is clean and functional, with just a few areas for minor improvement.

    Marked as helpful
    0
  • Kaczupinko•170
    @KaczupinkoPosted 3 months ago

    Your solution is quite good and demonstrates a clear understanding of the task. Here’s some feedback:

    Semantic HTML: The use of semantic HTML could be improved. Consider using <main>, <header>, or <section> elements instead of generic <div> tags to improve the document structure and accessibility.

    Accessibility: The image lacks an alt attribute, which is essential for screen readers. Adding a descriptive alt text would enhance accessibility.

    Responsiveness: The layout seems fixed with the 350px width. Consider using responsive units like percentages or max-width for better adaptability across different screen sizes.

    Code Structure: The CSS could be moved to an external stylesheet for better code organization and reusability.

    Design Consistency: The solution aligns well with the expected design. However, pay attention to padding and margin to ensure everything is perfectly centered.

    Overall, your solution is well done, but making these adjustments will enhance its quality and usability.

    1