Skip to content
OverviewSolutions
6
Comments
21
Assurance Chioma Ikogwe
@Aik-202

All comments

  • Assurance Chioma Ikogwe•410
    @Aik-202Posted about 1 year ago

    Wow! Nice work, I loved the feature of scanning the card you added, but:

    1. There's an issue with the "Card number"" expiration year" checks, even with the correct input, it keeps showing the error message.
    2. After every 4 numbers for the card number input field you can add an extra line of space.
    3. You can also restrict card name to letters only, card number, expiration date, and CVC to numbers only.
    4. You can use the maxlength attribute in you input fields to restrict the length of the input field.. for example CVC input field will have a maxlength` of 3.

    These are my suggestions, great work once again!

    Marked as helpful
    0
  • Mukwende•1,370
    @mukwende2000Submitted about 2 years ago

    Hello everyone, I need your help, I am really struggling with responsive design, I struggled with this one too, how do I go about it, I have read about fluid layouts, fluid images, and even media queries but it just doesn't seem to help because I'm having trouble implementing them. I will appreciate any feedback.

    Fylo landing page

    2
    Assurance Chioma Ikogwe•410
    @Aik-202Posted about 2 years ago

    Hi Mukwende, you did okay. I have some suggestions though.

    1. Change the div with class container to main, as every html page must have one main tag.
    2. Remove one h1 heading from your page. I suggest you remove this one with <​h1​ ​class​="​center​"​>​Get early access today​</​h1​> as they ought to be just one main heading. you can use h3 and style it the way you want.
    3. You are right, the responsiveness is not quite there. I use media queries for responsiveness. You used ​@media​ screen ​and​ (​min-width​:​ ​768​px​). What this means is that the code below it is for screens with size 768px and above, that is for ipads and desktop. That's by the way side. Although, the responsiveness is not the problem, there's a text overflow from : <​h1​ ​class​="​center​"​>​All your files in one secure location, accessible anywhere.​</​h1​> And   <​p​>​It only takes a minute to sign up and our free starter tier is extremely generous. If you have any questions, our support team would be happy to help you. I suggest you adjust that.
    4. Then set margin:0 for the body, so that there's no visible spacing around the page.

    Hope this helps, do well to update your solution when you make these changes.

    Marked as helpful
    1
  • Assurance Chioma Ikogwe•410
    @Aik-202Posted about 2 years ago

    Hi Baskaran, Nice work!. I have some suggestions though :

    1. Change the div with class container to main as every html page must have a main tag.
    2. For the Mobile mode(@media(max-width:600px)), there's an issue, there's too much space at the top. Then I noticed fir the desktop you set the margin top and bottom to 20em with margin-top: 20em auto. Reduce the margin-top for the mobile mode ... It's too much.
    3. I noticed you were actually using the margins above to center the container?. If that's right, it's better to set justify-content: center and align-items: center in your css. This will center your container.
    4. Also, try and adjust the max-width of your container for mobile mode, they seem too big.

    Hope this helps, please update your solution when you make the changes.

    Marked as helpful
    0
  • David Aguirre•40
    @DavidQA71Submitted about 2 years ago

    Hello everyone! this is my third challenge. I had some difficulties to finish it but finally I did it. Surely the code can be improved so any advice is welcome. Happy code!

    Grid Section

    2
    Assurance Chioma Ikogwe•410
    @Aik-202Posted about 2 years ago

    Hi David, Nice work, you did justice to this. I have some suggestions though:

    1. Turn the div with class container to main tag as every html page must have a main tag as it tells screen readers where the page starts from.
    2. Then in each of your section... Turn the first p tags with class p1 to h2 -h6 headings. As sections must begin with h2-h6 headings. That should solve some of your accessibility problems. Nice work once again. Hope this helps, you can update your solution once you've made these changes.
    Marked as helpful
    0
  • Assurance Chioma Ikogwe•410
    @Aik-202Posted about 2 years ago

    Hi Adrian, nice work! To answer your question the way to resize font awesome icons is to use font size. Using fa-2x in your class simply gives the icon a font size of 2em. this link will tell you more about sizing of font awesome icons . Also, for your accessibility issues, change the div with class main to the main tag, as every page must have one main tag. Try also to center the button, it looks a little bit off in the mobile view.

    Hope this helps.

    Marked as helpful
    0
  • Leticia Fernandes•50
    @lichtleSubmitted about 2 years ago

    This was my first attempt using CSS flex and I had some issues making the justify-content property work, I feel like the coding is all wrong. I'd appreciate any tips on accessibility, CSS flex and on how to make my code cleaner!

    Responsive Profile Card [CSS Flex]

    2
    Assurance Chioma Ikogwe•410
    @Aik-202Posted about 2 years ago

    Hi, Leticia... Nice work, you did amazing... I see that you used an entirely different color theme, it's beautiful. I have some suggestions though...

    1. I'll like to ask, why did you use div for every content??. You can use the different levels of headings, the p tag, pre tag, for your content and style them as you like. I feel like the purpose of div is for grouping contents. So I'll advise you change the div with class name to an h1 tag. That will solve ya accessibility issues.
    2. I also checked ya code, I don't see anything wrong with the way you wrote it tho. One thing to note is that if you are using the justify-content: center; to center a div, you also need to include align-items: center for it to work.

    Nice work once again. Hope this helps.

    Marked as helpful
    1
  • Assurance Chioma Ikogwe•410
    @Aik-202Posted about 2 years ago

    Hi, Omar! Wow! Nice work! I love the idea that you can see the choices of the house toggle until one is finally picked. It's really nice!!!. But for the mobile view it's not quite there... Some contents are overlapping and the score box is too big... And try changing the section tag to main tag. This is really nice. Well done!!!

    Marked as helpful
    0
  • Assurance Chioma Ikogwe•410
    @Aik-202Posted about 2 years ago

    Hi, Khan... Nice work!!!!. I have some suggestions though :

    1. Try changing the section tag with class maincontainer to main tag, as every html page must have a main tag, as it helps screen readers know where the main content of the page is located.

    2. Remove the the href attributes that have no value from the anchor tags, that should sole some of your html issues.

    3. For the mobile mode, it's not exactly pixel perfect, you can also reduce the size of the images as they appear too big. You can also reduce the font-sizes of the headings, they also appear too big.

    Hope this helps.

    Marked as helpful
    0
  • Assurance Chioma Ikogwe•410
    @Aik-202Posted about 2 years ago

    Hi Walter, Nice work!!!!. I have some suggestions though

    1. Change the div tag with class container to main, as there must be a main tag in your html...
    2. You can change the button tag to a div and give it aria role "button", this will help fix the html issue. i.e <div role = "button"></div>
    3. Instead of using h1 tag for the striked price you can use the sup tag , it's used for superscripted text in html... and it can be embedded in the first h1 tag with class precio i.e <​h1​ ​class​="​precio​" ​> $149.99 <sup>149.98</sup> ​</​h1​>.. by doing this you will reduce the spacing between the two digits..
    Marked as helpful
    0
  • MIHIR KUMAR•70
    @MIHI-botSubmitted about 2 years ago

    This E-commerce Product page is my first project and I really enjoyed creating this project, however, it is still incomplete and will be completed after your feedback.

    E-commerce Product Page

    1
    Assurance Chioma Ikogwe•410
    @Aik-202Posted about 2 years ago

    Hi Mihir, this is wonderful! Nice work! I have some suggestions tho.

    1. Make sure to always put an alt text for all your images, I think that should fix most of your html and acessibility issues

    2. For the ones that say you should add img src, I think the problem as to do with the way you wrote the src for the images. It ought to have been ./images/img.jg as the images is in another folder.

    3. Use the main tag for the div with class modal as that is where your main content starts from.

    4. Instead of using strike tag, use this in your css : text-decoration: line-through

    5. I also noticed that once I change the number of shoes I'm ordering, it remains unchanged in my cart.

    6. Instead of using the button tag for your plus and minus icons, try using the div tag, and assigning the aria role button... i.e <div role = "button"> </div>

    Hope this helps.

    0
  • CO•80
    @melco10Submitted about 2 years ago

    Which areas of your code are you unsure of?

    • I'm unsure of how i build my javascript for me it can be better code. but this code work for me and also I'm struggling on my logic of how I'm gonna apply a submit rate(1-5) but overall working. I wish I'll add some warning state when there's no number input but I don't really know where to start and my javasscript are only limited. but overall feel so good in the end.

    Feel Free to leave suggestion!.

    nteractive-rating-component (HTML,CSS,JS)

    1
    Assurance Chioma Ikogwe•410
    @Aik-202Posted about 2 years ago

    Hi Co, Nice work!!!!. But I have some suggestions. For the JavaScript,

    1. From the cards, it's already obviously that the user is only suppose to choose from 1 to 5, so there's no need testing for that. Rather it should be something like this. if (!rateNum) //that is rateNum is undefined { //error message } else { //submit rating }

    This way you get to provide a check for when the user does not enter any input.

    For the html

    1. Try changing that h2 heading to h1, it will solve ya accessibility issue as there must be an h1 heading in your html...

    2. Add alt to all your images, you can see why here

    3. I feel like the link google.com wrapped around the star image is not necessary. What were you trying to achieve with that?🤔🤔🤔

    4. You can remove the link embedding the submit button, as it's not serving any purpose there.

    Hope, this helps.

    Marked as helpful
    0
  • Assurance Chioma Ikogwe•410
    @Aik-202Posted about 2 years ago

    Hi Atul, this is pixel perfect!!!! 😍😍😍. But I have some suggestions that can help you with your accessibility issues.

    1. You can change that div with class big container to main, as your code must have one main tag or you can add this to big container role = 'main'. Then the big container will be treated as main

    2. Change the h2 tag to h1, you can give it any font size in your css.

    3. Attach aria roles to each of your divs. I think the aria role to be used for the div with class container is group i.e role = 'group'. Click on this link to know more about aria roles

    Hope this helps.

    0