Skip to content
OverviewSolutions
36
Comments
146
Nelson
@nelsonleone

All comments

  • Michael•210
    @MSPayneIISubmitted about 2 years ago

    Hello All,

    Here is my first guru-level project. I plan on refactoring the code soon to resolve the accessibility issues of the <a> tags within my buttons.

    Audiophile E-commerce

    1
    Nelson•2,390
    @nelsonleonePosted over 1 year ago

    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

    0
  • Nelson•2,390
    @nelsonleonePosted over 1 year ago

    FEM , what's wrong with your screenshot feature

    0
  • Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    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.

    0
  • Nelson•2,390
    @nelsonleoneSubmitted almost 2 years ago

    Hello Everyone

    Submitting my solution to the MULTI STEP FORM CHALLENGE Tools Used In Building The Project

    • Styled Components For Styling
    • Redux-Toolkit For Global State Management
    • Firebase For Authentication And Cloud Storage

    Things I Saw As Challenge When Building

    • My component Input starting facing a bug of loosing focus after every input due to re-render.

    • Using Styled Components can feel like doing too much sometimes...lol

    Your Thoughts are welcome

    Multi Step Form (React built(vite), Styled-Components styled

    1
    Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    I will fix the page landmark error soon

    0
  • SEBASTIAN•170
    @BashS117Submitted almost 2 years ago

    In the realization of this project it was a bit difficult for me to position its components, but with a little patience I always manage it, I think that several things can be deleted from the css. Any suggestions on where to put the styles? Is it better in the css of the parent component or is it better in the css of the component?

    Responsive Todo_app using react

    1
    Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    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

    0
  • Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    Screenshot looks weird

    0
  • Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    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
    0
  • Felipe Thomé•910
    @felipetn1989Submitted almost 2 years ago

    Learned to use an anonymous function inside the addEventListener command to call another function previously defined. Used "for" to create the click events for each of the arrows and questions.

    Feedback is welcome!

    FAQ accordion card

    1
    Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    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
    0
  • Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    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
    1
  • teddyBearCoder•30
    @teddyBearCoderSubmitted almost 2 years ago

    Hello, my first solution here , i wanted to use swiperjs for the testimonial area, but i was facing a difficulty.

    Rate it

    MANAGE.....landing-page

    1
    Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    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
    0
  • Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    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.

    0
  • Heli•40
    @Heli-AgharaSubmitted almost 2 years ago

    I want to know if fonts are looking smaller on mobiles? I have checked it , it seems small to me. what do you think? Should I change font-size?

    Testimonial Grid Challange

    1
    Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    **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 .

    1