All solutions

What I have learned from this challenge:

1. Nothing new

My question to the community: Everything is still going on!

What I have learned from this challenge:

1. Nothing new

My question to the community: So far so good guys!

What I have learned from this challenge:

1. Somehow this is my first time using table 😅
2. Customizing table marker was such a massive headache
3. It's easier to create your own custom bullet rather than customizing it using ::marker pseudo element
4. Center bullet point vertically using inline-block and vertical align middle(https://idkshite.com/posts/vertical-center-bullet)

My question to the community: Have you all use ::marker pseudo-element before?

At first, passing value from child component to parent component is hard, but after few times, I get grasp at the concept, somehow this is almost the hardest for my to solve

What I have learned from this challenge:

1. Passing value from child component to parent component

My question to the community: Nothing, But almost give up on this one :)

My first react validation that use Zod Validation for schema definition

What I have learned from this challenge:

1. Using Zod for simplifying my form validation

My question to the community: Any validation recommendation beside Zod? Probably a simpler one!

At first i want to use marker pseudo-element for the icon-list.svg for the list, but it turns out, it have lack of positioning, ended up spending 2 hours just to troubleshoot that, my worst mistake yet. Also somehow font inside the font folder, didn't match with the design, that's the quirk that I find.

What I have learned from this challenge:

1. Don't use marker pseudo-element if you want to customize(heavily) the list marker.

My question to the community: Why the font inside the font folder is not the same as in the design? Should I use google font instead?

My first simple react card that use tailwind, sometimes it quite challenging to use tailwind, but the result is awesome!

What I have learned from this challenge:

1. Integrating tailwind with react vite
2. Configuring vite build and base

My question to the community: Nothing, Still Keep Pushing Forward

I Added simple clicked animation when you hovered to the card. Just experimenting

What I have learned from this challenge:

1. Just Practicing from what i've learned before

My question to the community: Nothing, great so far

Should have used tailwind for this project instead

What I have learned from this challenge:

1. Just Practicing from what i've learned before

My question to the community: Nothing, great so far

:-)

What I have learned from this challenge:

1. Just Practicing from what i've learned before

My question to the community: Nothing, great so far

After I learn how to use React, for now all my project that use JavaScript will use react(and next.js probably) in the future, it such a nice dev experience to use react along with typescript.

What I have learned from this challenge:

1. Using Vite React TypeScript
2. react-hook-form as form validation and error

My question to the community: I think color in the style-guide.md is not quite matches with the design, do anyone feel the same?

(Empty)

What I have learned from this challenge:

1. Discovering the magic of height auto

My question to the community: Nothing, great so far

Update Just doing some revision, the sass styling is doom to hell 😭, reading it just painful(Update 4 Feb 2023)

I didn't use any javascript on this, just max-height hack

What I have learned from this challenge:

1. Using max-height for displaying hidden item

My question to the community: Nothing.

Using auto margin and flex for positioning is something new to me.

What I have learned from this challenge:

1. Positioning items using auto margin, flex and grid

My question to the community: Nothing, still keeping up

Found no problem when using SASS, works like wonderful

What I have learned from this challenge:

1. Using the checkbox and css checked state hack instead of JS event listeners
2. Before pseudo element for creating arrow
3. Creating social media tooltip for mobile and desktop

My question to the community: Nothing, great so far

Found no problem when using SASS, works like wonderful

What I have learned from this challenge:

1. Tailwind custom properties

My question to the community: Nothing, great so far

Found no problem when using SASS, works like wonderful

What I have learned from this challenge: Nothing, just continuing previous lesson

My question to the community: Nothing, great so far

Found no problem when using SASS, works like wonderful

What I have learned from this challenge:

1. How to use SASS
2. Isolation isolate!
3. BEM naming convention
4. Using SASS 7-1 pattern
5. Deploying on Vercel

My question to the community: Nothing, great so far

Centering the profile photo was quite a challenge especially using tailwind (huft), but I learned a lot from this one, even though I failed to make the background pattern responsive

What I have learned from this challenge:

1. Centering profile cards using tailwind
2. Pushing local Git to Github

My question to the community: I failed to make the background pattern responsive on screen smaller than 978px (that's the svg width, it has fixed width), any solutions from you guys? Any feedback would be greatly appreciated!

What I have learned from this challenge:

1. Nothing, just repeating previous lesson!

My question to the community: I guess no question for y'all

What I have learned from this challenge:

1. How to use tailwindcss
2. How to use tailwindcss arbitrary value
3. Configuring custom variable, font, box shadow in tailwind config
4. Importing Google Fonts to CSS

My question to the community: How do you make the pattern background mobile to have width of 100% ? (it seems that the pattern have a fixed witdth)

Update Moving this project to react and doing revision(Update 4 Feb 2024)

What I have learned from this challenge:

1. Responsive layout using grid auto-fit and auto-fill
2. Using logical properties for the first time
3. DRY(Don't Repeat Yourself)

My question to the community: I keep repeating border radius for different viewport size, is there any solutions for this?

Update Moving this project to use tailwind and doing revision(Update 4 Feb 24).

What I have learned from this challenge:

1. How to create Image Hover Overlay Effects
2. Nested Flex and Grid

My question to the community: Is there any Framework/Library for Image Hover Effects? That things just struggle me the most.

Update Updating this project, and turning it into react reusable component, and revision it to look as same as possible with the design(Update 3 Feb 24)

What I have learned from this challenge:

1. Always use semantics!
2. Customizing button
3. Never use viewport units(they have conflict with browser zoom)
4. Centering items using grid
5. Intrinsic Sizing with padding and margin

My question to the community: I need more tips on developing more responsive website, any suggestions from you guys?

Update Turning these component into react reusable component that use tailwind and try to revision the component to make it look as similar as possible with the design(Update 3 Feb 24).