Skip to content
OverviewSolutions
17
Comments
16
P

Leonardo Almeida

@leonardoalmeida7São Paulo-SP370 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

View more solutions

Latest comments

  • Bojan Lukic•260
    @bojanognjen
    What are you most proud of, and what would you do differently next time?

    I'm proud of finishing such project. It was maybe project with most interactivity so far. For the first time I used library as Bootstrap using npm in one project.

    What challenges did you encounter, and how did you overcome them?

    It is interesting that every five minutes I come across unsolvable problems and challenges I think I cannot solve ever. But perseverance and patience are key of the success. When I found out it, I became unstoppable.

    What specific areas of your project would you like help with?

    I woud like help with keyboard navigation. If someone knows something about that, please write me a message or comment.

    Frontend Quiz App HTML/CSS/Javascript/Bootstrap

    #bootstrap
    1
    P
    Leonardo Almeida•370
    @leonardoalmeida7

    Your project is great, congratulations! I like your code, it looks very concise and structured. The design is working perfectly on all screens and that looks great to me. I noticed that you are asking for some tips on how to implement keyboard navigation. That would be a great implementation. I like the idea and I will try it in my project too, but for now I don't know how to help.

  • P
    Leonardo Almeida•370
    @leonardoalmeida7

    Your work is very good, congratulations!

    I took a look at your code and it seemed very good, the HTML structure is very good and the CSS too.

    However, when I opened the site, I noticed that it has a side scroll, so it is a detail that could be a problem, but it is easy to fix, apart from that detail the rest is very good, congratulations.

  • P
    Leonardo Almeida•370
    @leonardoalmeida7

    Great your job, Ziad!

  • htupan•20
    @htupan
    What challenges did you encounter, and how did you overcome them?
    • I learned how to configure linear gradients with W3S.
    • I struggled with the positioning of the hero images.
    What specific areas of your project would you like help with?

    I would like feedbacks on my CSS.

    Skilled e-learning landing page

    #astro
    1
    P
    Leonardo Almeida•370
    @leonardoalmeida7

    Hello, how are you?

    Your project is very good, congratulations!

    I took a look at your CSS and I think your intentions are very clear in every line of CSS. It seems to be very clean and objective in the whole context.

  • P
    Suraj Khatri•450
    @SurajCasey
    What are you most proud of, and what would you do differently next time?

    I have used the Bootstrap for the first time so I am happy that I have completed. I have used only few bootstrap codes this time I would love to use it more in upcoming projects.

    What challenges did you encounter, and how did you overcome them?

    I have encountered some challenges while using bootstrap as I was using it for the first time. I have used ai tools and bootstrap site to learn from it.

    What specific areas of your project would you like help with?

    I was not able to change color of accent of slider. I also need help with the bootstrap codes. How can I make it more accessible and easy to use?

    Password Generator App using Bootstrap

    #bootstrap
    1
    P
    Leonardo Almeida•370
    @leonardoalmeida7

    Hi Suraj, your project is very good, congratulations! I see that there are some details that you may have had difficulty with, and one of them is the fact that you were unable to adjust the style of the input range. I took a look at your code so as not to change the code too much, I made some small adjustments to the CSS and JS. In the JS there is an input event that calls an anonymous function and I added some logic to it that allows the bar to be the color you need. In the CSS I just removed some properties and used another idea.

    In js i just changed this piece of code, leaving it like this:

        sliderValue.textContent = slider.value;
    const min = slider.min;
    const max = slider.max;
    const val = slider.value;
    const percentage = ((val - min) / (max - min)) * 100;

    slider.style.background = `linear-gradient(to right, var(--light-green) ${percentage}%, var(--very-dark-charcoal) ${percentage}%)`;
});```



/*in css change the styles in "input[type='range']" leaving it like this*/

```/* slider */
input[type="range"]{
    -webkit-appearance: none; /* Necessary for styling in WebKit browsers */
    width: 100%; 
    height: 0.5rem;   
    background: var(--very-dark-charcoal);
}
    
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Ensure custom styles */
    appearance: none;
    width: 1.75rem;           /* Thumb size */
    height: 1.75rem;
    border-radius: 50%;       /* Rounded thumb */
    background-color: var(--off-white);
    cursor: pointer;
}```

Regarding Bootstrap, I don't think there is anything really wrong.

I hope I helped you and if you have any questions, send me a message, thank you.
    Marked as helpful
  • P
    Leonardo Almeida•370
    @leonardoalmeida7

    great!

View more comments