Skip to content
OverviewSolutions
9
Comments
28

Shalom2935

@Shalom2935420 points

Recently start my journey to become a front-end developer. I have a passion for bringing designs to life through engaging animations. Excited to continue growing my skills with tools like GSAP and Three.js to create immersive and interactive experiences on the web.

I’m currently learning...

HTML CSS JS Sass Gsap Three.js

Latest solutions

View more solutions

Latest comments

  • Shalom2935•420
    @Shalom2935

    you must use semantics markups to make your site more accessible.

    Marked as helpful
  • Shalom2935•420
    @Shalom2935

    hello well done completing this challenge. I think those tips might help you improve your code:

    • this is the magic formula whenever you want to center a div whether it is horizontally or vertically:
    body {
display: flex;
justify-content: center;
align-items: center;
}

    the margin you gave will prevent the site from being responsive.

    • giving your main element a max-width is great but it is for no use if you don't add a width property.
    main{
width:80%;
max-width:416px;
}

    Hope my comment will be useful, happy coding.

  • Shalom2935•420
    @Shalom2935

    100% didn't work because you gave your image a margin. Whatever this is a better way to make an image responsive.

    1. give the image a 100% width and DON'T SET ITS HEIGHT!!!
    2. give its container the wanted width and a height that adjust automatically (auto) in your case you should have something like this:
    .qr-img {
width:100%;
height:auto;
}
.qr-img img{
width:100%;
}
    Marked as helpful
  • Shalom2935•420
    @Shalom2935

    Great job. I like your minimal file's structure. Regarding your respond mixin, this is a tip that will help you have a shorter and very cleaner code.

    • To begin with, don't name your breakpoints after the device's name but use something more general. Nowadays, phones can be bigger than tablets and tablets can be bigger than some tinny computers so it could be very confusing. you can have:
    1. desktop -> large
    2. tablet -> medium
    3. phone -> small
    4. small-phone -> smaller
    5. vs-phone -> verysmall
    • Then you can use the following code instead of all those conditions:
    $breakpoints: (
'verysmall': (max-width: 390px),
'smaller': (max-width: 520px),
'small': (max-width: 830px),
'medium': (max-width: 1200px),
'large': (max-width: 1400px),
);

@mixin respond($breakpoint){
   @media (map.get($breakpoints,$breakpoint)){
         @content;
   }
}

    see it does the same thing your code did, and the inclusion is alike.

    @include respond('large'){
width:90%;
}
    Marked as helpful
  • Shalom2935•420
    @Shalom2935

    If you want a good organization i'd like to suggest the 7-1 pattern which will make you codebase very clean and easy maintainable. check it here

  • Shalom2935•420
    @Shalom2935

    Good job I really like the way your code is structured.

    • Wrap all the code inside the body with a main element. By using landmarks you improve the code accessibility.
    • You don't need to give the body a max-width of 1440px, on the contrary this can become an issue for the responsive. Instead, a width: 100vw will ensure that the body will take all the width avaible on the viewport.
    • To make an image responsive, don't set its height!!! give it 100% width and give its container the width you'd want your image to have and a height set to auto.

    Hope my comments are helpful. HAPPY CODING

View more comments