All solutions

Feature:

Change the data of the chart using your own expenses ;)

Happy coding!

Countdown Timer from 14 days

Made with: react, vite, tailwind css and typescript

Main features:

• 1) Add and remove product in the basket
• 2) The page is responsive to mobile, tablets and desktop
• 3) Clicking the basket will open a <dialog>
• 4) Clicking the arrows icon will run the carousel
• 5) Clicking the thumbnail will also run the carousel
• 6) Clicking the main image will open a carousel, and the thumbnail decoration will run accordingly to the arrow selection 7) Animation for the navigation bar menu

Made with React, vite Since I learnt and applied React to this project at the same time, it took ages to complete. My code was messy too so I'm open to hear if you find any bug. Thanks!

Happy Coding!

This challenge was a Blast!! Only 3days to complete!!

A few weeks ago, I thought I couldn't solve this challenge at all. But now I did it, in 3 days only, using html, css and javascript. No frameworks or libraries needed.

For the theme changing effect, you guys can check out Kevin Powell, he has a video explaining very carefully about it.

The only concern I have for this is there's still some bugs (minor). Still can't get rid of them now. Hopefully, on my journey for future challenges, I can figure out.

Cheers! Happy coding!

Special Thanks to ThuTrang5631(gitHub) for Collaborating Trang added cvc code, regular expression and complete form execution

This took me more than 1 week to Solve! The most valuable thing I learnt from this challenge is Regular Expression, which is way more useful than just using validity.valid. Overall, I also had many problems with responsiveness, especially the font-size as I needed them to scale down along with the design. Feel free to try out the features of this challenge!!

Took me 5 days to Complete this challenge!

I decided to use some new features like Nesting CSS, <dialog> in HTML & .anime() in Javascript. And suprisingly, they are not completed. I got a few bugs in my code and took me a hard time to debug them. Therefore, I recommend using traditional stuffs before jumping into these guys. In short:

1. <dialog> is fun but if you apply a display property for it, it will automatically appear without being called. Be careful!!
2. Nesting CSS is fairly new, there are clashes every where. Traditional CSS is fine.
3. .aniate() in Javascript is a web APIs, it's not new but it reduces the complexity of my code and it's fun to use. Other than that I also use element.validity.valid to check the user input's validity, which is very useful.

Happy coding!

A Hard and Interesting challenge ever on the platform.

Hey guys, this challenge took me more than 1 month to complete as I needed to study a little bit on the backend side. This was made complete with HTML, CSS and Vanilla Javascript, no frameworks and libraries. If you are at an intermediate level, this one will give you a hard time.

A few key points from my experience with this challenge:

1. The Javascript and HTML file could have been way cleaner if I used some backend (EJS would be my choice). However, I wanted to practice Javascript really deeply before I use the tools.
2. My CSS is also a mess since I'm still on my way to learn about good practices, recently I heard about nesting CSS so I'm going to use it soon on newer projects. I recommend you guys check it out too.
3. The design files and images did not help. I had to think of the solutions, find fonts, and color and everything just to get it right.

That's it. Happy coding Friday!!

A Super Difficult CSS Challenge !!!

Here are some highlights:

• I used fixed width for the app interface and the heading because they look better without responsiveness.
• The ::before and ::after that I placed in my body was very hard to shape. I managed to get them about 80% right. If you know the correct way, please show me.
• I went through a lot of trouble just to get the correct shapes for the body and the top app box.

Overall, I'm very happy that I completed such a hard challenge. Let me know if you can give me some advice on how to organize my CSS code. Thanks!!

This is a good practice project if you want to utilize grid. My code was super messy, so I could use some feedbacks on how to organize it neatly. Thanks and happy coding!

Hi everyone, Another challenge completed, this time it was completed in 1 day only. I added some ':hover' for the buttons since they were so boring.

My code is a mess, I really need a feedback on my code structure right now.

Thanks to this challenge, I understand more about responsiveness code. When writing code in '@media' queries, I should only use 1 or 2 lines of codes to change the format. I'll make sure to notice my HTML classes more.

Good day to everyone,

After 3 months of studying for my IELTS Certificate, I can now go back to learning code. I'm in the progress of learning Javascript, so I think I should make a few small projects to refresh my mind.

Some key insights of this project:

• When using pseudo elements, it's important to give it a position. Otherwise, it will not show on your screen.
• I added some :hover effects for the #feedback section for a better experience.
• I forgot to add the background images because they were too dim to see. I realized their existence when I already finished the project.

Finally, I really need some advice for better CSS arrangement, my code was a complete mess...

Anyway, thanks for commenting. I will continue this path in the future!!

Completed the 5th challenge, a great one for anyone want to mess around with Grid and Flex.

Mistakes: I tried to use grid-template-columns and thought it was enough. However I had to combine it with grid-template-rows to have a right layout.

Advice: use both grid-template-columns and grid-template-rows when you use Grid layout.

Cheers!

Completed the 4th challenge!!

Getting used to the keyboard shortcuts, I'm doing things much faster now.

Some highlights I want to mention here:

1. The mobile version doesn't look much different from the desktop version so I don't want to make the content too responsive.

2. My version looks a little bit different from the original design, I don't know why...

Important note to everyone: don't use fixed sizes for your components (width, height) instead, use the min or max along the size, this way your components will be responsive.

Like this: For width and height -> use % value. For min (or max) width and height -> you can use specific value like px.