Responsive landing page using CSS grid and CSS flexbox

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Baraa, I just wanted to answer your question about units because I answered another similar question today:

  For handling responsiveness and best practices, I think I would focus more on the property than the unit in most situations. It's always best to use responsive properties such as min-width, max-width, or width: min() (something I use all the time) instead of just a fixed width. But generally speaking, it's best to use relative units such as em and rem over pixels, and I certainly would caution against using percentages and viewport widths if you're a beginner, but I do highly encourage much experimentation with these units before using them in a project. Anyway, Kevin Powell has an excellent video called "Are you using the right CSS units?", and I suggest you check it out to see what units should be used.

  Also, some general comments about your work here!

  1. The star selector is normally used for normalize/reset styles; if you need to add styling such as for font color, that should go in the body selector.

  2. The page looks a bit broken right now, to be honest! The image looks like it's overlapping with other things. You can try making the breakpoint higher as a start. Anyway, I'm not sure what's happening, but maybe you can try using a mobile-first approach.

  3. I encourage you to use class selectors over id selectors, which have the highest specificity and can be difficult to change depending on the situation.

  Those are some quick thoughts and observations, and anyway, hope this can help you out a bit!

  21

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Baraa, Congratulations on completing this challenge!

  I saw your solution preview site and I think it's already really good. Here’s some tips for you to improve it:

  TO MAKE YOUR BACKGROUND DISPLAYING THE FULL SIZE USE background-size: cover;

  body {
      height: 100vh;
      background-color: hsl(257, 40%, 49%);
      font-family: "Open Sans";
      background-image: url(../images/bg-desktop.svg);
      background-repeat: no-repeat;
      display: flex;
      background-size: cover;
      justify-content: space-evenly;
      align-items: center;
      flex-wrap: wrap;
  }
  

  Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  ✌️ I hope this helps you and happy coding!

  11

  Marked as helpful
• 

  Laharl•1,000

  @UrbanskiDev

  Posted almost 3 years ago

  Hello Baraa !

  Congratulation for finishing the project

  To answer your question the first part of your question, I have a link which will helps you to understand better which units to use for :

  • CSS Unit Best Practices

  To adapt the screen size, I recommend you to follow the "Mobile First" design ! It means you start by building your page for a mobile phone viewport. When you finished, you can continue the responsive with a bigger screen size, which will be easier to adapt, and also easier to find your breakpoint !

  Here's a link which explain it in more depth:

  • FreecodeCamp responsive

  For your last point, CSS Grid is a good choice, it may not be easy to use, but it is a very powerful tool !

  I have found a mini-game, which allow you to learn grid and make it easier to understand how to use it :

  • Mini game how to learn grid

  I hope it helps you, keep learning and happy coding !

  11

  Marked as helpful