Skip to content
OverviewSolutions
8
Comments
10

Manuel Stolze

@manuelstolzeGermany180 points

Software Developer specializing in Typescript and Node.js, now expanding into Java and Spring. Outside work, I enjoy hiking and playing video games.

Latest solutions

  • Submitted about 1 month ago

    testimonials-grid-section

    • HTML
    • CSS
    1
  • Submitted about 1 month ago

    four-card-feature with grid & flex

    • HTML
    • CSS
    1

    How can I improve my structure? Are there some areas where I can improve?

  • Submitted about 1 month ago

    product preview card

    • HTML
    • CSS
    1

    I need some help with the font-weight. I'm very confused about why I do not get the size of the style-guide.

  • Submitted about 1 month ago

    product-preview-card without figma

    • HTML
    • CSS
    1

    I need some help with the font-weight. I'm very confused about why I do not get the size of the style-guide.

  • Submitted about 1 month ago

    recipe-page-with-all-previous-learning

    • HTML
    • CSS
    1

    I would receive some feedback about my HTML-Structure and the CSS classes used by them. Some more CSS-Tips would also be helpful!

  • Submitted about 1 month ago

    social-links-profile with focus on grid layout

    • HTML
    • CSS
    2

    I would like to receive feedback if there where better solutions about the grid structure. Also maybe some tipps how to start without a figma design, because it was very hard to find out what spaces are between the components.

View more solutions

Latest 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
View more comments