Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You must first complete or unlock this challenge
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Latest Solutions

  • NFT preview card component

    #sass/scss
    • HTML
    • CSS

    0


    Aplostar 40

    @Aplostar

    Submitted


    Had a few difficulties adding the overlay effect on image on hover. Also first time using scss, probably not useful for such a small project but it was still fun to learn.

  • Tip calculator app

    #accessibility#bem#sass/scss
    • HTML
    • CSS
    • JS

    0


    James 300

    @James-alderson

    Submitted


    I finally managed to finish this challenge.

    It took me a long time to create the js part of the challenge because this was the first calculator challenge I created. I have tested this challenge several times and in different ways to avoid the problem as much as possible (although there may still be some unsolved problems).

    The next part of the time was spent on customizing the radio buttons, it wasn't too hard, but it took a while to get the accessibility issue resolved and to be able to work with the calculator using the keyboard buttons (tab and spacebar).

    Actually, this is the first challenge where I added "sass build process" to the challenge. which automatically converts the sass code to css by entering the command "npm run build" and then adds all the necessary vendor prefixes to it. Of course, I am a beginner in this new knowledge and I need to spend time improving my knowledge. (I will probably use gulp in the next project).

    I am impatiently waiting for your suggestions and criticisms to write better sass and js codes.

  • html css RWD

    • HTML
    • CSS

    0


    Alice 20

    @alicewu1991

    Submitted


    Not very good at programming RWD, hope have a better way :)

  • Manage Landing Page with React

    #framer-motion#react#tailwind-css#vite#accessibility
    • HTML
    • CSS
    • JS

    0


    Elias Fung 140

    @iManchai

    Submitted


    Hello FEM Community!

    It's been a long time since I upload a project here, but here I am again! This project was quite difficult, mainly the testimony carousel and a little bit the style of the about section. Overall a really fun project to do!

    Any tips, suggestions or area of my code to improve is always welcome!


  • nomatter 50

    @itsgonenow

    Submitted


    Placing the quotation mark svg took the most time and I still could not figure it out. I am unsure whether articles giving a lot of bottom empty space when stretching vertically is normal.


  • Barv11 20

    @Barv11

    Submitted


    I will appreciate uf i could get feedbacks.


  • Tyler 170

    @tylermaksymiw

    Submitted


    Hi all,

    Excited to submit my 10th solution - I've definitely made progress since my first submission! Any pointers on where I can continue to improve would be amazing!

    One area of my solution I am unsure about is the code that validates the inputs before displaying Tip/Person and Total/Person output. Is there anyway to make this cleaner?

     const getTip = (props.billAmount && props.people > 0) ? (props.billAmount * (props.percentage/100)/props.people).toFixed(2) : "0.00"
        const getTotal = (props.billAmount && props.people > 0) ? (props.billAmount * (1 + props.percentage/100)/props.people).toFixed(2) : "0.00"
    

    Thanks again for the advice!

    • Tyler

  • Dodeun 190

    @Dodeun

    Submitted


    I did not expect to have this mutch fun doing this challenge when i started it.

    The responsiveness of the background's body for screens above 1440px annoys me a bit, I still need to work on my understanding of backgrounds rules.

    I am pleased with the way I handled the progress bar, making it nice and responsive.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!