Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions8Comments5

All comments

  • Daniel Enagu• 205

    @DannyEnagu

    Posted

    Hi @SUJIT-DEVFS,

    Nice job. But your code can still be improved.

    1 Avoid inline styles.

    <h3 style="color: hsl(332, 51%, 32%);font-size:16px;margin-top:0">Preparation time</h3>

    2 Your img alt attribute should contain a short description of the image itself. Also, note that the alt attribute is what screen readers will voice. it will be displayed on the screen when your image is broken.

    3 The <div> with the class of container should be a <main> tag. Good practices and accessibility.

    4 ul>li>span Use single selectors whenever possible. Always strive for the lowest specificity.

    5 Create 3 utility classes for the following:

    ul>li>span, ol>li>span{
   color: hsl(30, 10%, 34%);
}

ul>li>b, ol>li>b{
   color: hsl(30, 10%, 34%);
}

ul>h3, ol>h3, h3{
   color: hsl(14, 45%, 36%);
   font-family: 'Young Serif', serif;
   font-size: 30px;
   margin-top: 20px;
}

    That's all from me. Hope you find the above suggestions helpful.

    Marked as helpful

    0
  • Daniel Enagu• 205

    @DannyEnagu

    Posted

    Hi,

    Good job on the design interpretation. But your code can be improved.

    The following is how you can improve your code:

    • Always use semantic HTML tags when possible. For example,

      • Use heading (h1 - h6) tags for the texts Jessica Randall and London, United Kingdom.
      • Use anchor <a> tags for the social links not <button> tags.

    • Add an alt attribute to your <img /> tag to describe your image for accessibility.

    • Separation of concern: Although, there is nothing wrong with using the ** tag.

    • Always use CSS reset to avoid some unwanted browser behaviors. Check out Andy Bell's Modern CSS Reset.

    • Find and remove unused selectors. I could not find a reference as to where .attribution selector was used.

    • Use relative units like rem for font sizes. You can convert pixel to rem by dividing the pixel value by 16 (that is, 20px ==> 20 / 16 = 1.25rem).

    • Fix your class names. class names like first, second, semiFirst, bolded, etc. do not describe what the selector is doing. Possible suggestions are names like:

      • bolded = text-bold
      • yellow = text-yellow, location
      • semiFirst = semi-first or user-role
      • first = first-section or top-section, header
      • second = second-section or second-section

    I hope you find this helpful.

    Marked as helpful

    0
  • P
    Grace• 27,950

    @grace-snow

    Submitted

    This is designed to be a guide for one way to do this challenge mobile-first, using scss variables and some more advanced css techniques like nth-child.

    I used a VS Code extension to compile the scss.

    Note: In a real project I would work with the designer to fix the accessibility issues or color contrast and font sizes.

    Any questions or suggestions are welcome.

    Mobile-first CSS grid layout, with scss, and flexbox in card headers

    8

    Daniel Enagu• 205

    @DannyEnagu

    Posted

    Hey Grace!

    Nice and Clean...

    1
  • Daniel Enagu• 205

    @DannyEnagu

    Posted

    It sure does....

    Thank you Snow for your response I'm really grateful..

    0
  • Daniel Enagu• 205

    @DannyEnagu

    Posted

    nicely done. I'm also a newbie and have learnt alot from your solution

    0