Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All solutions

  • Submitted

    Easybank landing page using Vanilla JS, SASS

    • HTML
    • CSS
    • JS

    0

    I find it a little challenging to make the hero background and the phone mock up responsive.

    Some added features:

    • fixed header animations when scrolled
    • fade in animations when scrolling.
    • added a feature when the nav is open, the user won't be able to scroll the body. To do that, I added a class to the body element like this:
    body.fixed {
 overflow: hidden;
}

    And just toggles the class using Javascript.

    Feedbacks and suggestions are highly appreciated! Thanks in advance and Happy New Year~

  • Submitted

    Mobile first design Interactive pricing component

    • HTML
    • CSS
    • JS

    0

    In this challenge I've learned how to use input range and checkbox. I used input and change event listeners to get the values from the input range and the checkbox.

    I'm open for feedbacks that can help me improve my code. Thanks~

  • Submitted

    Mobile first approach Loopstudios landing page

    • HTML
    • CSS
    • JS

    0

    Hi~

    For this challenge I learned a lot about event listeners. I challenged myself with dynamically adding images on the creations section using vanilla js. It was enjoyable and challenging. I also added some animations when scrolling.

    One thing that I got problem with was when the scroll event is not firing on the window. And the problem was I used to set the <html> and <body> elements to overflow: hidden and that causes it not to fire. One solution was to use document.body.addEventListener('scroll', doSomething) instead of the window.addEventListener('scroll', doSomething). Or set the <body> element to a min-height: 100%.

    If you have any feedbacks or suggestions that could make my solution better feel free to comment! Thanks!

    Happy Coding~

  • Submitted

    Mobile first product preview card component

    • HTML
    • CSS

    0

    Yo~

    I used react to complete this card component. In this challenge I learned how to use props on functional components. I also learned that this component can be broken down further more so that's what I did.

    If you have any suggestions on how can I improve my code feel free! Thank you!

  • Submitted

    Mobile first Sunnyside-agency-landing-page-main

    • HTML
    • CSS
    • JS

    0

    Otsu~

    In this project I learned to use basic event handlers in react. I also learned to use hooks a little. The thing that I find difficult in building in this project is making the images change from mobile to desktop versions so I just made a little hack where I put both images from desktop and mobile. I know it's not a best practice.

    If you have some tips and advice I'll highly appreciate it! Thanks!

  • Submitted

    NFT preview card component

    • HTML
    • CSS

    2

    Yahallo~

    I tried using create react app for this card component project. I react js would be overwhelming for me to jump right into without a deep knowledge of javascript, but create react app help me with that negative thought. I find learning react fun and I know this is a very known JS library.

    One thing that I was not able to achieve as a challenge to my self is an animated border effects. The one I added is pretty lame. But I will try and learn how to make one!

    If there's anything you could give as an advice and tips from a react beginner I would gladly appreciate it! Thanks~

  • Submitted

    Interactive rating component using radio buttons

    • HTML
    • CSS
    • JS

    1

    Nyahallo~

    I added a feature in this interactive rating component. I added an edit feature once rating is submitted. You can edit only one time. That idea was inspired from Shopee where you can edit your review from the item you purchased.

    If there's anything you could comment on my code please feel free! Thanks~

  • Submitted

    Advice generator app

    • HTML
    • CSS
    • JS
    • API

    0

    Nyahallo

    Third challenge done! First time using an API and it's so much enjoyable! There are some things I'm not sure of like did I display the data received on the DOM right.

    I just have one problem and I'm not sure how to fix it. It seems that fetch is not working on firefox? Have you encountered the same problem? If so, I am open for suggestions!

    Thanks everyone!

  • Submitted

    Responsive Intro section with dropdown navigation

    • HTML
    • CSS
    • JS

    0

    Yahallo!

    Second project done! And I think I finished it much faster compared to the first one maybe because some design concepts are pretty much the same. In terms of challenge, I find it enjoyable building the dropdown menus. Also I find it difficult to resize an svg image. I resort in using <img> element instead.

    Was thinking of adding light/dark theme but I hesitated. Maybe I'll add it next time.

    If there's anything you'd like to add or suggest feel free to comment! Thanks in advance~