Skip to content
OverviewSolutions
24
Comments
46

Ctrl+FJ

@FlorianJourdeFrance810 points

Sorry I don't speak French except tié le sang mon gâté

I’m currently learning...

HTML • CSS • JS • PHP • SQL • UX • UI • A11Y

Latest solutions

View more solutions

Latest comments

  • Ctrl+FJ•810
    @FlorianJourde

    Hey man,

    Good job on this one !

    About the bento grid, I think you should have a better layout by using this approach :

    .container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template: repeat(2, minmax(0, 1fr)) / repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 50px);
}

    With this solution, you layout is already responsive-proof, you only have to alter the grid itself, not the entire layout. Avoiding relative width and height like vw, vh & % is generally a good practice (except for specific cases).

    I would also recommend you to switch you grid to flex and position: static placement. With justify-content and align-items and min-height: 100svh; directly on your body, you must be able to place you grid centered vertically without any issues 🙂

    Good luck for you next challenges ! ✌🏻

  • Ctrl+FJ•810
    @FlorianJourde

    Hey @evansanchez963 !

    You did it well !

    My main advice would be to be careful about responsiveness on small screens. When screen size is under 550px, your layout begin to break. This is because of images. To fix that bug, you could just add a width: 100% property on some images, like for example, the #article img.

    By this way, your images will never be bigger than their boxes (or divs).

    You did it well with the mobile menu, keep up the good work ! ✌️

    Marked as helpful
  • Ctrl+FJ•810
    @FlorianJourde

    Hey @ArmsAndArrows !

    Good job on this one !

    I react about your description : I think I would have preferred to use flex instead of grid property fro testimonials items. You could try something like that, instead :

    .testimonial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6.3rem;
}

    And yes, flex can handle gap property ! 🤯

    Also, do you know that you can set an anchor to hyperlink ? You can try it with your arrow element :

    <a href="#features" class="hero__arrow"><img src="images/icon-arrow-down.svg" alt="arrow icon"></a>

    Just set an ID to your .features section, maybe add a tiny html { scroll-behavior: smooth; } to allow smooth scroll, and your page is now more dynamic, without adding any line of JS ! Pretty cool, huh ?

    Keep up the good work !

    Marked as helpful
  • Ctrl+FJ•810
    @FlorianJourde

    Hey Eduardo !

    Nicely done, your dark theme is working well !

    Be careful, your responsive solution has some glitches : when screen size is very small (under 350px), your layout begin to break. This is because of using fixed width & height on your .primeiro an .box elements. Of course, nobody have this size layout nowadays, but still, I think it's a good point to think "flexible" ! I would recommend you to avoid these fixed properties when you can, and just play around with paddings & margins.

    As well, it's a tiny detail, but I think it's a better practice to name CSS classes with English language. I struggled too, because of my native language, which is French, haha ! But when coming into big projects, you'll see it's easier to find your way if everything is written in English. I think this advice is valid for every code language you'll meet ✌️

    Keep up the good job !

    Marked as helpful
  • Ctrl+FJ•810
    @FlorianJourde

    Hey @Aliha7ish ! That's a good solution !

    Be careful, your .main-heading goes behind your .main-header when screen size is under 700 px ! Maybe some padding-top could be added ?

    As well, do your know you can set a link with anchor on your arrow down ? Look at something like that :

    <a class="arrow" href="#features-section"><img src="img/arrow.png"></a>

    You'll be able to scroll down to the next section with this ID, just by clicking on the hyperlink element ! Just add a html { scroll-behavior: smooth; }, and you've got a nice scrolling effect really easily ! Pretty cool, huh ?

    One last thing : I think it's a better practice to put properties like font-size or overflow-x on the body tag, instead of html.

    But it's still pretty good, your responsive is also clean !

    Keep up coding !

    Marked as helpful
  • Ctrl+FJ•810
    @FlorianJourde

    Hey @VanelleD, good job with that one !

    However, the main mistake for me in this challenge is the use of <img>, instead of setting simple <div> with background-image property in CSS.

    With your solution, you need to fix images sizes, although they're more like "decoration", in the current case.

    For example, in your .gallery section, you could just use background images for each div, and set CSS property with something similar to that :

    .gallery .item {
    background-image: url('/image.jpg');
    background-size: cover;
    background-positon: center;
}

    Maybe a small padding can be added, to set a kind of "minimal height/width".

    With this option, your images are less "important" in term of HTML content, it will be easier to get a cleaner responsive, for example in your .about-img img, when screen size is ≈ 800 px, your .grid will display more naturally !

    But your solution stays good ! Keep coding man !

    Marked as helpful
View more comments