Skip to content
OverviewSolutions
7
Comments
9

Ouattara

@Kaji17abidjan200 points

I'm Ouattara Katina Student in Sofware developpement and passioned by Web

I’m currently learning...

I'm learning Angular

Latest solutions

View more solutions

Latest comments

  • Ouattara•200
    @Kaji17

    **Helo @minnieme20 congratulation for your solution ** I have some tips to increase your code and good practice.

    • 01 it is important to put an alternative text in tag <img> with properties alt :

    • <img src="images/logo.svg" class="logo" alt="logo">

    • 02 for more semanctic it preferable to use <h1> <h2> ... for display title in your page. Use <h1> for title 'Build The Community Your Fans Will Love'. ```<h1 class="main-p">Build The Community Your Fans Will Love</h1>`

    • 03 set attribute 'type' in tag <button>: <button type="button">Register</button>

    • 04 for display social media icon instead of putting class="social" in position="fixed" you can put this container inside the info div class="info" in position="relative " and class="social" in position="absolute " like the class="social" will adapt according to changes in class="info". I hope it will help you

    Marked as helpful
  • Ouattara•200
    @Kaji17

    Hi @arjunbarman74 🎉 good result. I give you some advice so that you have a code plus ultra.

    • First you must remove the tag space under your testimonial.

    • To enhance the semantics, in your code you can use the tag figure instead <div class="review-2 br-10".the individuals information (profile image, name, verified graduate) should be wrapped in a Figcaption Element instead of <div class="bio">... and lastly, the testimonial itself should be wrapped in a Blockquote Element.

    Code:

    HTML

    <figure class="review-... br-10 mb-1rem">
   <figcaption class="bio">
      <img...>
      <div class="bio__title">
         <h3>name</h3>
         <h3 class="opacity">graduate</h3>
      </div>
   </figcaption>
   <blockquote>
       <h2>...</h2>
       <p class="mar-top">...<p>
   </blockquote>
</figure>

    CSS

    .mar-top{
opacity: 50%
}

    I hope it will be useful for you good code 🤞 (⌐■_■)

    Marked as helpful
  • Ouattara•200
    @Kaji17

    Hi @BGLeee 🎉 good result. I give you some advice so that you have a code plus ultra

    • The profile images Alt Tags need to be improved. It should state the following; “Headshot Daniel Clifford-“

    • To enhance the semantics, in your code you can use the tag figure instead <div class="testimoneyCard".the individuals information (profile image, name, verified graduate) should be wrapped in a Figcaption Element and lastly, the testimonial itself should be wrapped in a Blockquote Element. And name and graduate of people is not a list you can use the tag p instead ul.

    Code:

    HTML

    <figure>
   <figcaption>
      <img ...>
      <div class="namepost">
         <p>name</p>
         <p>graduate</p>
      </div>
   </figcaption>
   <blockquote></blockquote>
</figure>

    CSS

    figure{
border-radius: 10px;
padding: 40px;
}
figcaption{
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.namepost{
flex-direction: column;
 margin-left: 1em;
}

    I hope it will be useful for you good code 🤞 (⌐■_■)

  • Ouattara•200
    @Kaji17

    Hi @ahmed-Faroolle good djob 👍, let me give you some tips that can help you👨‍💻.

    • You can use regex to format text in your field input instead type= 'number' to avoid to have a default vertical row in your input. Code:
    <input type="text" ... oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
    • In your <div class="checkboxes__grid"> replace input and label to avoid to use label for write percentage 5% instead button . Code:

    HTML

    <div class="checkboxes__grid">
              <button class="check__box" id="fivepercent" value="5">5%</button>
              <button class="check__box" id="tenpercent" value="10">10%</button>
               ...
              <input type="text" placeholder="Custom" class="check__box custom" id="inputcustom"
              oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
</div>

    JS

    var selectTipTab = document.querySelectorAll('.check__box');

// add logic when we click on a button
selectTipTab.forEach(element => {
    element.addEventListener('click', () => {
      ...
    })
});

    I hope it will be useful for you good code 🤞 (⌐■_■)

    Marked as helpful
  • Ouattara•200
    @Kaji17

    Hi @Kaji17 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

    Here are some suggestions to improve your code:

    Try to use semantic tags in your code. More information here: With semantic tags:

    <body>
   <main class="main-content">
      . . .
   </main>
   . . .
<body>

    • The profile images Alt Tags need to be improved. It should state the following; “image-qr-code“

    • I just wanted to encourage you to use rem as your main unit throughout the whole project instead of px. There's nothing wrong with pixels, but they are not as responsive as rem, especially if a user has a different font-size in their browser other than the regular 16px. click here to access converter px to rem

    • Use max-width: 15.625rem to .container selector instead of width.

    • Use padding: 1.25rem to .container selector.

    I hope that help you 😃

  • Ouattara•200
    @Kaji17

    **Hi @shimaahriaz 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉 **

    Here are some suggestions to improve your code:

    Try to use semantic tags in your code. With semantic tags:

    <body>
   <main class="main-content">
      . . .
   </main>
   . . .
<body>
    • Don't use <br>, the <br> tag is not semantic. It should never be used to add vertical spacing, it is only used in specific cases (e.g. poem or an address) also when a screen-reader reads the text it will break the text at the <br /> tag and break the flow of reading, You could use padding or margin styling via CSS to avoid them. More Information here.

    I hope those tips will help you.

    **happy coding ! and with Front end mentor we learn to code like a pro **(⌐■_■)

View more comments