Submitted
Age Calculator app with React
- HTML
- CSS
- JS
This was my first time using react, so I am not completely sure I followed React best practices, but I did finish it in the end. Hoping to improve it with more practice.
@HectorKayman
Submitted
This was my first time using react, so I am not completely sure I followed React best practices, but I did finish it in the end. Hoping to improve it with more practice.
Submitted
Submitted
This was my first time using Tailwind CSS in any project, so it took a bit longer to figure out. Otherwise, the challenge was quite simple.
I used Parcel to bundle the package, so that was quite fun to figure out.
Submitted
I was unable to match the color overlay on the main image, I used the following rule:
.image-container:before {
mix-blend-mode: multiply;
}
But it doesn't exactly match the blend, as shown in the design image.
Submitted
Submitted
Submitted
Kevin Powell on YouTube has a great tutorial on this challenge, perfect for those who want to learn how a professional developer approaches a project, his thought process and best practices, and fill in some knowledge gaps. I followed the same tutorial.
Link to tutorial, if anyone is interested - Kevin Powell - From Design To Code
Submitted
It was a really fun challenge.
I used ::after
pseudo class along with :hover
on the main image section, to display the "eye" icon, while hovering over the image.
Submitted
It was fairly easy to build. Flexbox to the rescue.
Submitted
The CSS part was most confusing, I had to repeat a some of the CSS properties again and again, this can't be good, right?
How would you refactor the parts where you have to apply flexbox to a lot of sections?