Huddle landing page with a single introductory section

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hey there and great work with this one! Regarding SASS, file structure looks alright and there isn't much to add. SASS shines when styles & designs used in patterns with the help of mixins, loops, maps etc. In this project there isn't much need for these but it's always good to practice useful tools :) You can start practicing @mixin as it's less complex than others. For this project you can do a change with the structure of _media.scss. Instead of styling media query on different files, general convention is to create mixins for screen sizes and use them. For bigger projects it would be harder to navigate through files if there was duplicate files for each breakpoint. To apply in your project:

  @mixin mobile {
    @media only screen and (max-width: 375px) {
      @content;
    }
  }
  

  After importing the file then you can use in styles.scss as:

  @include mobile {
    body {
      background-image: url("../images/bg-mobile.svg");
      ...
    }
  }
  
  /* OR */
  
  body {
    background-image: url("../images/bg-desktop.svg");
    ...
  
    @include mobile {
      background-image: url("../images/bg-mobile.svg");
      ...
    }
  }
  

  You can use mixins for general styling aswell. For example if the same styling of button used several times but with different colors, to use with variables you could:

  @mixin button ($color) {
    width: 11.5rem;
    height: 3.3rem;
    background-color: $color;
  }
  
  .register-button {
     @include button ($white)
  }
  

  If you get use to mixins, it'll be easier to grasp rest of sass functionalities.

  Also as @correlucas mentioned content starts to overflow by the screen size decreases until 375px. This happens more likely when the desktop version is designed first. Because if the content doesn't shrink with the screen size, content will overflow. I suggest designing mobile version first with min-width query. Then switch to bigger screens from there so you won't have any possible overflow in your design. Nice work again and happy coding :)

  Marked as helpful

  1

  ---

  

  Yui•50

  @yteraiPosted about 2 years ago

  @ErayBarslan thanks for your feedback and great example! I'll def try to use mixins next time :)

  1
• 

  Eric Salvi•1,330

  @ericsalviPosted about 2 years ago

  Hey @yterai,

  The desktop design looks amazing! Great job. Also kudos for trying out SCSS for the first time on this challenge.

  As others have mentioned, the mobile responsiveness doesn't really work with the recommended size that was provided. Sort of like what @ErayBarslan mentioned, it is actually really good practice to do the mobile-first approach that way you are just changing a few items on the desktop rather than trying to change and add a lot more elements for mobile.

  A few suggestions for GitHub and your repositories, make sure to fill out your README.md file. Makes it a bit more polished when checking out your work.

  Also for SCSS you could do some interesting things with nested declarations. Although I never used MIXINS and math components, one thing I do like specifically about SCSS is you can keep it all organized by selectors like so,

  .register-button {
    border: 1px solid $white;
    border-radius: 30px;
    width: 11.5rem;
    height: 3.3rem;
    background-color: $white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: rgba($violet, 0.8);
    font-size: 1.1rem;
  }
  
  .register-button:hover {
    background-color: $soft-magenta;
    border: $soft-magenta;
    color: $white;
    cursor: pointer; 
  }
  

  could have been a bit more simplified by nesting the hover inside the button selector itself like so and using the &.

  .register-button {
    border: 1px solid $white;
    border-radius: 30px;
    width: 11.5rem;
    height: 3.3rem;
    background-color: $white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: rgba($violet, 0.8);
    font-size: 1.1rem;
    cursor: pointer; 
  
    &:hover {
      background-color: $soft-magenta;
      border: $soft-magenta;
      color: $white;
    }
  }
  

  Keep up the great work and I am looking forward to seeing more from you.

  Marked as helpful

  0

  ---

  

  Yui•50

  @yteraiPosted about 2 years ago

  @ericsalvi thanks for your feedback and advice, Eric! I'll try to do the mobile-first approach next time!

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Yui, congratulations for your new solution!

  I saw your live site and your solution is great, the design is perfect. But note that around 988px your desktop site starts to break, in this case you'll need to apply a media query to change the container flow and make the mobile design.

  To improve a bit the hero image while scaling you can add to the image selector display: block; / max-width: 100%;

  If you’re not familiar to media queries and responsivity, here’s a good resource to learn it:

  https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Yui•50

  @yteraiPosted about 2 years ago

  @correlucas Thanks for your feedback!

  1