Skip to content
OverviewSolutions
8
Comments
10
Manuel Stolze
@manuelstolze

All comments

  • Manuel Stolze•180
    @manuelstolzePosted about 1 month ago

    Great work, dude!

    Just some small details:

    • Check again the border of the avatar images, they should be different
    • Use a greater font-size on your desktop breakpoints. This improves the readability a lot.
    • Add more line-height to the paragraphs to improve the readability much further

    I hope I could help you with my tips. See you on your future projects! ;)

    0
  • Manuel Stolze•180
    @manuelstolzePosted about 1 month ago

    Hey pal!

    Looks very good. To improve maintainability you can use global css variables, just like this:

    :root {
    --red: hsl(0, 78%, 62%);
    ...
}

    After that, you can use the global variable like this:

    .item2 {
    border-top: 4px solid var(--red);
    ...
}

    Hope this will help you in future projects!

    Marked as helpful
    0
  • Manuel Stolze•180
    @manuelstolzePosted about 1 month ago

    Looks good!

    Maybe you can improve your solution by adjusting the spacing of your elements on the desktop breakpoint

    0
  • P
    Antônio Alves Cataldo•120
    @TonyzCataldoSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I put a lot of effort into making the site truly responsive, not only on the screen sizes that the challenge requested, but I tried to make the component responsive on intermediate sizes. I believe that over time I will learn good practices for responsiveness, especially some features and functions of the Flex-box.

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

    I had difficulty getting the texts to line up correctly with the image inside the component.

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

    Good practices in responsiveness, Flex and how to deal with sizes and measurements correctly. If you can read the code and see what needs to change I would appreciate it.

    Responsive Card Component

    1
    Manuel Stolze•180
    @manuelstolzePosted about 1 month ago

    Wow you freaking nailed it!!! I'm really impressed!

    One advice I can give you is that you should avoid naming your classes with numbers like you did with .img1. Use more meainingfull names like product-image.

    Marked as helpful
    0
  • Manuel Stolze•180
    @manuelstolzePosted about 1 month ago

    Awesome and simple solution!

    Maybe try to adjust the spacing between the "Preparation Time" and "Ingredients" to match the design more.

    1
  • Manuel Stolze•180
    @manuelstolzePosted about 1 month ago

    Hei Mate,You are one the right way!

    Here are some tips:

    You can import new fonts in html like this

    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,500;1,500&amp;display=swap" rel="stylesheet">

    Than you can use it in the body tag:

    body {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--white);
    font-weight: 500;
}

    Also try to playing around with some spacing to match more the design which is provided to you. Begin with the mobile and than use a media query to adjust the parts wich are different to desktop.

    Feel free to reach me out if you need more help!

    0
  • id-nynt•80
    @id-nyntSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I finished this challenge much quicker than the last one, which made me feel so happy

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

    The review page kept showing some margin additional space and scroll bar. I tried to find a solution online and then I change the position of the footer from absolute to fixed. If there is any recommendation, please help me. Thank you!

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

    I have some concerns in my code:

    1. About the cover image which was cropped in the design, I use a fixed height and object-fit: cover to crop it. Is there any other way to specify height according to width?
    2. As the challenge above, is there a way to keep the footer position: absolute but the scroll bar will not appear? Or is there another way to layout the footer at bottom?

    Blog review Solution using hover

    1
    Manuel Stolze•180
    @manuelstolzePosted about 2 months ago

    Very nice solution! I like it.

    First, you submitted the style.css twice. One in the top-level and one in style/style.css

    About your questions:

    1. Your approach is the best way to handle this. If you want to match 100% of the image you need to cut the image in the right size and use it. So you don't have to handle the matching of the visable part.

    2. I cannot reproduce the issue. Tried it on Chrome and Safari. Both did'nt show any scroll bar.

    Marked as helpful
    0
  • Manuel Stolze•180
    @manuelstolzePosted about 2 months ago

    Great solution! I like your structure of your css. I think I'll adapt the one-file-only import from your code.

    In your responsive.css you are using max-width for mobile. I would avoid using max-with if you want to scale more in the future.

    My solution for this would be:

    // desktop
@media (min-width: 481px) {
    .card {
        width: 320px;
    }
}

// fallback for all undefiend sizes
.card {
    width: 80%;
}
    Marked as helpful
    0
  • Neknauq•10
    @NeknauqSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    happy with how im overcome the stuff part which is style same as the preview

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

    style part, overcome by try and searching

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

    code distribution

    QR code component with css and html

    #pure-css
    2
    Manuel Stolze•180
    @manuelstolzePosted about 2 months ago

    Great solution so far!

    Because you use your own css-definition of .attribution you can remove the default one at the top. In bigger projects this can lead to some tricky side-effects.

    0
  • Manuel Stolze•180
    @manuelstolzePosted about 2 months ago

    Hi, i like your solution.

    Here are some tips from my side:

    • You can import the font with the following in a css file instead via link in html.

      @import url('https://fonts.googleapis.com/css2? 
family=Outfit:wght@100..900&display=swap');

    • You can define global values in CSS:

      :root {
  --white: #FFFFFF;
}

      The global variables can then be used as

      .white {
  background-color: var(--white);
}

    I hope this will help you for your next challanges! :)

    Marked as helpful
    0