A did a mobile first design, used flex-box for the layouts.

Community feedback

• 

  P

  Nitya Gulati•665

  @nityagulati

  Posted over 5 years ago

  Hi Scotrolex, the site looks great on both mobile and desktop and the code is clean. Great job on doing mobile-first design! I personally find it to be a better workflow.

  Some pointers to clean up the code further:

  1. There's a typo in the code below, #second-dv should be #second-div.

  • current .container #second-dv .box h3 { font-size: 20px; letter-spacing: 1px; }

  • fixed .container #second-div .box h3 { font-size: 20px; letter-spacing: 1px; }

  2. Move the .attribution styles from index.html to your stylesheet styles.css instead. All styles should be in the external stylesheet.

     .attribution { font-size: 11px; text-align: center; }

     .attribution a { color: hsl(228, 45%, 44%); }

  3. Try to use class to style the elements wherever you can instead of ID. It's good practice to use classes for styling and only use ID when needed. This helps in reducing your code because you can reuse the class if more than one element require the same style, now or at any time in the future. This helps to keep your code maintainable and scalable.

  • add another class to each .<div id="box"> such as .box-1, .box-2, and so on. ` <div id="second-div"> <div id="box-1" class="box box-1"> <h3>Supervisor</h3> <p>Monitors activity to identify project roadblocks</p> <img src="images/icon-supervisor.svg" alt="Supervisor" /> <div class="clear"></div> </div>

      <div class="test">
        <div id="box-2" class="box box-2">
          <h3>Team Builder</h3>
          <p>Scans our talent network to create the optimal team for your project</p>
          <img src="images/icon-team-builder.svg" alt="Team Builder" />
          <div class="clear"></div>
        </div>`
    

  • use .box class for styles that need to be reused

  .box { border-radius: 10px; margin-bottom: 30px; padding: 0 20px 0 20px; box-shadow: -2px 18px 20px 3px hsl(0, 0%, 91%); }

  • use .box-1, .box-2, and so on for individual styles

  .box-1 { border-top: 5px solid hsl(180, 62%, 55%); }

  .box-2 { border-top: 5px solid hsl(0, 78%, 62%); }

  4. Add class names to all other elements that require styling. Your selectors are way too specific at the moment, which is not needed in most cases. You can simply use the class names to style the elements.

  • add classes to each element such as .intro-title, .intro-desc etc. <div class="container"> <div id="first-div"> <h1 class="intro-title"> <span>Reliable, efficient delivery</span> <br /> Powered by Technology </h1> <p class="intro-desc"> Our Artificial Intelligence powered tools use millions of project data... </p> </div>

  • use .intro-title to style the h1 element instead of .container #first-div h1

  .intro-title { font-size: 24px; font-weight: 600; }

  you can also read up on css selectors and selector specificity to learn more about it

  5. Use intuitive names for classes and IDs. Your current names such as #first-div, .container etc are fine for small webpages such as these but it's always a good practice to choose names that are readable, intuitive and self-explanatory. This not only helps with debugging but also when collaborating with others or when you come back to a project after a while and have to make modifications.

  • maybe something like this <div class="main-container"> <div id="intro" class="intro-section"> <h1 class="intro-title"> <span class="intro-title__span>Reliable, efficient delivery</span> <br /> Powered by Technology </h1> <p class="intro-desc"> Our Artificial Intelligence powered tools use millions of project data... </p> </div>

  6. Try playing around with relative units instead of 'px', especially for font-sizes, margins and paddings, etc, such as font-size: 1.5rem; and margin: 5%;. This makes the code more responsive because things can scale up or down according to another value such as screen size or the parent element.

  Few things to consider next and read up on

  • Practice writing code using HTML5 semantic tags. This will also help in laying out your HTML structure better.
  • Look up CSS naming conventions, such as BEM, to help you in naming your elements. This is a good quick read - CSS naming conventions that will save you hours of debugging

  And of course, practice, practice, practice! Happy Coding :)

  11
• 

  

  Matt Studdert•13,611

  @mattstuddert

  Posted over 5 years ago

  Awesome work on this challenge, Nandom! @nityagulati has already given you some incredible feedback, so I'll just say keep up the great work. Take your learnings from each project into the next and your coding ability will really skyrocket! 👍

  01