Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • T
    Gwenaël Magnenat• 1,210

    @gmagnenat

    Submitted

    What are you most proud of, and what would you do differently next time?

    Quite happy about the hero section and the overflowing images.

    Next time

    Really stick to a mobile first implementation. I lost track because I wanted to fix something on the desktop version and then it was endless back and forth between breakpoints.

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

    It was challenging to stay organised and I often lost track of what I was doing. I found myself fighting a lot with responsive values. It is very important as the project get bigger to keep a consistent workflow and it saves a lot of time to stick to a mobile first implementation.

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

    I feel there's a lot of micro styling on elements for fonts and spacing. There must be a way to make this more consistent. I will keep refactoring and pushing update to this solution.

    Meet landing page (SCSS, BEM, Grid, Flexbox)

    1

    P
    Eli Silk• 240

    @elisilk

    Posted

    Hi 👋 @gmagnenat,

    Congrats again on a great solution. 👏 I love your use of Sass, and your overall implementation of the hero section and the overflowing images was great.

    I did notice a slight issue with how you implemented the centering of your hero image that you might want to consider a little further. Specifically, when you are in the mobile or tablet view and using the single hero image, you have the following styles set:

    .hero {
    &__illustration__image {
        max-width: calc(100% + 4rem);
        margin-left: -2rem;
        @media screen and (min-width: 62em) {
            max-width: 100%;
            margin-left: 0;
        }
    }
}

    This works well when the viewport/container width is less than the width of the image (minus that extra margin), but then is off-center when the viewport/container width gets larger than that (and then before you switch 62em or 992px). In my solution to this challenge, I used absolute positioning, but I like your solution much better since the hero image resizes fluidly at different viewport sizes. So, I thought about a possible adaptation to your solution, and came up with this clamp function that utilizes your -2rem as the max value for the left margin, 0 as the min value, and then dynamically calculates a more appropriate value that will center the image when the viewport is in those awkward middle viewport sizes. Here it is:

    margin-left: clamp(-2rem, calc((820px - 100vw) / -2), 0px);

    I'm interested to know what you think of this idea 🤔, and if it works for what you're trying to do in this case.

    Happy coding. 💻

    Eli

    0
  • P
    Dan Marius• 625

    @danmlarsen

    Submitted

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

    I really get an appreciation of how difficult it can be to get the correct spacing, colors etc without the design file.

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

    I always appreciate any feedback.

    Mobile first Flexbox & CSS Grid

    1

    P
    Eli Silk• 240

    @elisilk

    Posted

    Hi 👋 Dan,

    Great solution. Like your product preview card component solution, this one matches the design super well, despite not having access to the design file. 👏

    I thought the use of the nth-child selectors to have the different testimonials span different parts of the grid was a very elegant solution. 👍

    Like I suggested for the product preview card solution, one method that helps to compare you solution with the design is to install a plugin like PixelParallel or PerfectPixel so you can overlay the design screenshots on to your solution and compare them directly to each other 🔎, and then make adjustments as needed.

    I also think you might consider implementing the quotation marks for the violet testimonial as a background image rather than part of the HTML markup. I see the image in this design as purely decorative and not part of the content of the webpage. Something to consider 🤔.

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#css_background_images

    Happy coding. 💻

    Eli

    Marked as helpful

    1
  • P
    Eli Silk• 240

    @elisilk

    Posted

    Hi 👋 Jude,

    Congrats again on another great solution. 👏 I think there are a number of different ways to implement the positioning of the cards, but I thought your solution using grid and grid-area was an excellent one.

    For some alternatives to consider, check out Kevin Powell's "Responsive layout practice for beginners" YouTube video where he walks through his solution to this same challenge. He first implements an alternative solution to yours using a wrapper and col div and flexbox. But then later in the video he has a solution very similar to yours with some slight modifications that might be worth looking at.

    Like with your Recipe Page solution, I also suggest installing a plugin like PixelParallel or PerfectPixel so you can overlay the design screenshots on to your solution and compare them directly to each other. There were some differences between the design and your solution that might be easier to notice with those tools.

    For example, your font size of your heading class is specified as 2rem (32px). But the actual design has a font size of 1.5rem (24px) for the mobile view and 2.25rem (36px) for the desktop view. You can either add the change in font size to your media query. Or better yet, implement a fluid typography solution with just one line of CSS code that automatically adjusts the font size based on the width of the viewport. I think this fluid typography calculator is a super useful tool, but there are others out there. Here is a solution that would work by adjusting the font size between the min viewport size of 30rem (480px) and the max viewport size of 80rem (1280px), but those parameters are easily adjusted too:

    font-size: 1.5rem;
font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.25rem);

    Happy coding. 💻

    Eli

    Marked as helpful

    0
  • P
    Dan Marius• 625

    @danmlarsen

    Submitted

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

    I really get an appreciation of how difficult it can be to get the correct spacing, colors etc without the design file.

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

    I always appreciate any form of feedback.

    Mobile first HTML, CSS with Flexbox

    2

    P
    Eli Silk• 240

    @elisilk

    Posted

    Hi 👋 @danmlarsen,

    Great solution. It matches the design very well, despite not having access to the design file. 👏

    Even without the design file, one method that helps is to install a plugin like PixelParallel or PerfectPixel so you can overlay the design screenshots on to your solution and compare them directly to each other 🔎, and then make adjustments as needed.

    For example, in the desktop view, you have the product-card currently set with a min-height: 46rem; (equivalent to 460px in the root font size you set). But using the PixelParallel extension alongside the Chrome inspection tools, I was able to just that min-height value up and down and watch it change until it matched the design. The design height is probably more like 450px (equivalent to 45rem in your system) and so your design is a little bit too tall. Something to consider 🤔.

    Happy coding. 💻

    Eli

    Marked as helpful

    1
  • P
    Eli Silk• 240

    @elisilk

    Posted

    Hi 👋 @MistahJude,

    Great solution. I really appreciate how simple and elegant your code is. 👏

    Something to think about 🤔, when comparing your solution to the design, yours is much wider. Maybe consider setting the max-width property of your container class from max-width: 1080px; to max-width: 736px; to better match the solution.

    I also suggest installing a plugin like PixelParallel or PerfectPixel so you can overlay the design screenshots on to your solution and compare them directly to each other.

    Happy coding. 💻

    Eli

    0
  • P
    Danilo Cardoso• 20

    @Daan-Cardoso

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm trying to improve the use of semantic tags, this project was to practice this

    Social Links Profile

    1

    P
    Eli Silk• 240

    @elisilk

    Posted

    Hi @Daan-Cardoso,

    Congrats on finishing the challenge! 🎉

    I like how you customized the content with your personal information. Nice job. 👍

    I wasn't able to access your live site or code, so maybe you've taken them down?

    And a detail I noticed is that the vertical spacing between the links is larger in your solution compared to the design, so that might be worth adjusting a bit.

    I hope you find my feedback helpful! 🌟

    Happy coding! 😎

    0
  • P
    Eli Silk• 240

    @elisilk

    Posted

    Hi again @Godskitchen!

    Congrats on another successful solution to another design challenge! ✅ Your solution seems to match the design perfectly.

    Things I think you did amazingly well in your solution 🎉:

    • The use of clear and well structured semantic HTML
    • The use of SASS for your CSS
    • The inclusion of a hidden h1 tag for accessibility

    Here's something to consider thinking about 🤔, similar to my comment on your solution to the QR code component design challenge:

    In your CSS file (lines 19-27):

    html {
  font-size: 1.1111111111vw;
  height: 100%;
}
@media (max-width: 768px) {
  html {
    font-size: 4.2666666667vw;
  }
}

    This effectively resets the rem (root em) value and makes a big jump as you go from a 768px screen width up to a 769px screen width:

    • 769px * .011111111111 = 8.54px
    • 768px * .042666666667 = 32.768px

    The result is that your solution ends up in a place that matches the design when you get either to 1440px (the desktop design) or 375px (the mobile design). However, when the screen size is different than those key sizes (especially right around 768px), the solution can do some funny things that I'm not sure you intended.

    You might consider taking out the media query all together. Instead, you can obtain fluid typography at different screen sizes by taking advantage of the vw units inside of a clamp function. The clamp function ensures that the font sizes never get too small or too large by setting the lower and upper boundaries with a fluid size in between. Here is a great resource for learning more about this approach:

    https://web.dev/learn/design/typography

    I hope you find my feedback helpful! 🌟

    Happy coding! 😎

    Marked as helpful

    0
  • P
    Eli Silk• 240

    @elisilk

    Posted

    Hi @Godskitchen, Congrats on finishing the challenge! ✅ Your project looks awesome and matches the design very well.

    Things I like about your solution 🎉:

    • The use of SASS for your CSS
    • The inclusion of a hidden h1 tag for accessibility

    Things you could improve ✍️:

    • Your solution seems to work perfectly at 375px and 1440px. However, for all the screen widths in between the frame gets bigger and smaller and has a big jump at 768px. It looks like you are adaptively sizing the font-size using vw units, which can have its benefits in some cases. But in this design, it feels like the intention was to keep the QR code frame width at 320px at all viewport sizes, and the font size consistent as well. So you might consider testing your solution at the full range of screen sizes from 320px to large screens to make sure it looks readable in all those cases.

    I hope you find my feedback helpful! 🌟

    Happy coding! 😎

    Marked as helpful

    0