Skip to content
OverviewSolutions
36
Comments
145
Nelson
@nelsonleone

All comments

  • Nelson•2,390
    @nelsonleone

    Congrats on completing this challenge sir , please can I ask for a favor, please can you help me pay for pro so that I can do it.

    i can't afford it

  • Nelson•2,390
    @nelsonleone

    FEM , what's wrong with your screenshot feature

  • Nelson•2,390
    @nelsonleone

    You can track it , using the active tab , each form section should have an isActive property , to determine which one is being displayed, there are so many way to build it tho. , this is just an opinion of mine.

  • Nelson•2,390
    @nelsonleone

    I will fix the page landmark error soon

  • Nelson•2,390
    @nelsonleone

    Congrats on completing the challenge ,

    Am just writing based on your question , how you sort and arrange your files is your choice, there's no rule for that.

    But you need to make sure it would be easy for someone else to navigate through your files and understand how you did stuff

  • Nelson•2,390
    @nelsonleone

    Screenshot looks weird

  • Nelson•2,390
    @nelsonleone

    HELLO......congrats on completing this challenge, well done🎊 🎊

    Hope this comment was helpful and made meaning to you Have fun coding

    You can add different images e.g hero-image-mobile and hero-image-desktop depending on the viewport using the <picture> tag.

    You can read more about it in the MDN docs , or w3school.

    It allows you to specify different images for you content as the screen-sizes varies.

    Hope this comment was helpful....have fun coding

    Marked as helpful
  • Nelson•2,390
    @nelsonleone

    HELLO......congrats on completing this challenge, well done🎊 🎊 I have some tips on how you can write neater and less code , you can improve your solution , or work better on the next one.

    The Faq , can be done using the <dl><dt>``<dd> tags for accessibility purposes.

    Based on your solution(how you did it) You can use buttons to create the questions, the arrow doesn't need to be the toggle , it's just for design purposes mainly or to show the faq article state

    Then use a loop to display what you want to display.

    const questions =  document.queryselectorAll('.question')
const answers = document.querySelectorAll('.answers')
questions.forEach((question,index) ,() => {
  question.addEventlister('click',() => {
    answer[index].style.display ="block"
  }
})

    The index simply means the index in which the button(question causing the click event is) the answer in that same index should do your task

    As for the arrow , you can create a class that has tranform :rotate(180deg) The in that clicked event target the arrow in the same index and give it that className

    Hope this comment was helpful and made meaning to you Have fun coding

    Marked as helpful
  • Nelson•2,390
    @nelsonleone

    HELLO......congrats on completing this challenge ....well done

    Here's what i noticed about your solution , it looks nice .

    But the blue design behind the image ....yours , you gave it a border radius all around it .

    You can see to use border-bottom-left-radius and increase the height of the element.

    Hope this comment was helpful , have fun coding🎊🎊

    Marked as helpful
  • Nelson•2,390
    @nelsonleone

    HELLO.......congrats on completing this challenge....well done 🎊 🎊

    Just a little something i noticed, for accessibility purposes, don't forget to add your alt text. If the image doesn't send a message(just for design purposes) you can set alt="" and aria-hidden="true"

    Hope this comment was helpful , have fun coding

    Marked as helpful
  • Nelson•2,390
    @nelsonleone

    HELLO......congrats on completing this challenge...well done🎉 🎉

    Based on your question , you can add it using a SwiperJS ,

    Or manually creating it yourself creating two buttons for the prev and next testimonial.

    Then use JS to show the testimonial based on the index which you will implement.

    The buttons will increment/ decrement that index, therefore switching the testimonials.

    Hope this comment was helpful , if you need more detailed explanation , you can indicate

    You can also read more on the SwiperJs tool.

  • Nelson•2,390
    @nelsonleone

    **HELLO.....congrats on completing the challenge, well done🎉 🎉 **

    Based on your question , for some design purposes, and good user experience , You can see to increasing the font a lil bit , and increasing the line-height of your paragraphs.

    Your solution is nice .

  • Nelson•2,390
    @nelsonleone

    HELLO.....congrats on completing this challenge, well done. 🎊 🎊

    Bro, hwfar , check your close modal icon, It's going behind the modal, you can see to move it up a bit ,

    It's an action button , so it's should always seems to appear on the element it's controlling. (z-index). This is just incase you are working on a different approach

    Marked as helpful
  • Nelson•2,390
    @nelsonleone

    HELLO......congrats on completing this challenge...well done 🎊 🎊

    Based on your question , see to add ::-webkit-range-progress and remove the default apperance-webkit-apperance:none.

    Secondly, you forgot to add an alt text to your image. If the image doesn't send a message(just for design purposes) you can add alt="" and set aria-hidden="true". So screen-readers (AT) won't stress on what it it.

    Hope this comment was helpful , have fun coding

  • Nelson•2,390
    @nelsonleone

    HELLO......congrats on completing this challenge, well done 🎊 🎊

    Just one thing , the loading animation is nice , but sometimes it doesn't have time to play or when it starts playing , and the advice is fetched, it causes some little glitch ,

    You can see to set a setTimeout on the fetch so the loading animation can have little time to play .

    Hope this comment was helpful , have fun coding

    Marked as helpful
  • Nelson•2,390
    @nelsonleone

    HELLO.......congrats on completing this challenge....well done 🎊 🎊

    Just a little something i noticed, for accessibility purposes, don't forget to add your alt text. If the image doesn't send a message(just for design purposes) you can set alt="" and aria-hidden="true"

    This will allow screen-readers(AT) not to stress on the image.

    But in your solution , the GIF/dice is an action figure. So, you can set a good alt text describing it e.g alt="New Advice" or alt="See another advice"

    Hope this comment was helpful, have fun coding

    Marked as helpful
  • Nelson•2,390
    @nelsonleone

    HELLO.....congrats on completing this challenge. 🎊 🎊 well done.

    Based on what you said onfont size , you can use clamp() function . It is a css built in function that allows you to specify different font-size for different viewport .

    You can read more about the clamp() in the MDN docs. Here's a tool i use, it allows you to specify your viewport(start(e.g mobile) , end) FLUIDTYPOGRAPHY

    Hope this comment was helpful, have fun coding

    Marked as helpful
  • Nelson•2,390
    @nelsonleone

    HELLO......congrats on completing this challenge .....well done 🎊 🎊

    i just have one thing to say , It's based on the little car images. Visually , they don't send much message(for design purposes).

    It would be nice to set aria-hidden="true" on them so screen-readers(AT) won't stress on what they are. Thereby increasing your solution accessibility rate.

    Hope this comment was helpful, have fun coding

    Marked as helpful