Skip to content
OverviewSolutions
8
Comments
5
Daniel Enagu
@DannyEnagu

All comments

  • Daniel Enagu•205
    @DannyEnaguPosted 10 months ago

    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
    @DannyEnaguPosted 10 months ago

    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
  • Grace•31,270
    @grace-snowSubmitted about 4 years ago

    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
    @DannyEnaguPosted over 3 years ago

    Hey Grace!

    Nice and Clean...

    1
  • Daniel Enagu•205
    @DannyEnaguPosted over 3 years ago

    It sure does....

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

    0
  • Daniel Enagu•205
    @DannyEnaguPosted over 3 years ago

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

    0