Skip to content
OverviewSolutions
6
Comments
4

Moses

@mtenkorang130 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Moses•130
    @mtenkorang

    Congratulations and here are a few ways to improve your code. The third accessibility warning has to do with semantic html tags. This is a link to an article on w3schools.

    • Instead of using <div class="container">, opt for <main class="container">
    • Instead of
    <div class="card-text">
Discover the benefits of data analytics ...
 </div>

    opt for

    <div class="card-text">
 <p>
Discover the benefits of data analytics ...
</p>
</div>
    • Instead of using <div class='attribution'>, opt for <footer class="attribution">

    I hope this helps and happy coding .🙂👨‍💻

  • Moses•130
    @mtenkorang

    Congrats on attempting this challenge. Here are a few ways to improve your solution;

    1. Instead of putting text in a div tag only try to use semantic tags like headings and paragraphs in this solution. Visit this link to read more about it on w3schools.

    2. Also, you can add the tailwind classes for the styling below,

    {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    to the parent element of the following

    <div>
<p>10k</p>
<p>Companies</p>
.
.
.
<p>Queries</p>
</div>

    to make them look close to the design for mobile.

    All the best and Happy Coding .👨‍💻🙂

    Marked as helpful
  • Moses•130
    @mtenkorang
    1. You can put the class="attribution" in a <footer> tag to pass the accessibility report warning.
    2. I will recommend you use rem or px(pixel) values for setting the border-radius of your buttons. I played with it in developer mode and found that the values below were suitable
    .btn{
    border-radius: 35px;
}

    or

    .btn{
    border-radius: 2.5rem;
}

    I hope this helps. Happy Coding 😁👨‍💻

    Marked as helpful
  • Moses•130
    @mtenkorang

    This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element should help with that.

    <picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

    Link to w3schools page about <picture> element

    Marked as helpful