All solutions

What are you most proud of, and what would you do differently next time?

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• SCSS
• Vanilla js
• tinyURL API

Question🙋 : I'm yet to find a way to implement the cleanurl API as requested by the challenge. I keep getting different errors! Any help? ...

Feedback on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

What are you most proud of, and what would you do differently next time?

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• TailwindCSS

...

Feedback on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Semantic HTML5 markup
• CSS custom properties
• CSS Flexbox
• CSS Grid
• Mobile-first workflow
• BEM
• Animation

...

Feedback on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Semantic HTML5 markup
• CSS custom properties
• CSS Flexbox
• Mobile-first workflow
• BEM

...

Feedback on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Semantic HTML5 markup
• CSS custom properties
• CSS Flexbox
• CSS Grid
• Mobile-first workflow
• BEM

...

Feedback on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Semantic HTML5 markup
• CSS custom properties
• CSS Flexbox
• Mobile-first workflow
• BEM
• Animation

Question🙋 : Any Idea on how to animate the input to the age position upon submission(as required by the challenge)?

Updates 🚀 :

• Refactored code to use the OOP
• Replaced fonts with woff2 formats
• Saved user data using Local Storage

... Feedback on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Semantic HTML5 markup
• CSS custom properties
• CSS Flexbox
• Mobile-first workflow
• BEM

Question🙋 : I've been trying ways to submit the form using form.submit() after validation without generating a new HTTP response (reload page). Any help on that?

Update🚀 : I've gotten a solution to the question above by ChatGPT which suggested the use of an iframe as the form target but that's a very new concept to me so I've published it as a branch on GitHub (dev), you can review the code and let me know what you think ;).

... Feedback on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow
• BEM
• Loader component
• Advice Slip API

Upgrades 🚀:

• Added loader component while waiting for the advice to be fetched!

Question🙋 : Do you have any way I could animate the main container height? While the advice loads the main height just grows with no animation and that's not cool. I've tried max-height it didn't solve the problem. ...

Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow
• BEM

...

Feedback on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow
• BEM

...

Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• BEM

Question🙋 : For some reason, the input won't react to my animation styling. Can I get any help on that? ...

Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Flexbox
• CSS Grid (few lines)
• BEM

Question🙋 :

Would you suggest that having the share-card has role="tooltip" is ideal for accessibility?

...

Feedback on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Flexbox
• BEM
• Animation

Question🙋 :

I'm still struggling with the accordion animation effect. Any resource on how to animate the details tag properly?

...

Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Flexbox
• CSS Grid (few lines)
• BEM

Upgrades 🚀 :

• Card flips upon submission
• Added Button disabled feature

...

Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Flexbox
• CSS Grid (few lines)
• SASS/SCSS
• BEM
• Animation

Question🙋 :

I am finding it hard to style the white round element on the meter from the design, you could see from my SASS file that I had to comment out some styles for it (check Git edit history better). Do you have any idea on how to do that?

...

Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Flexbox
• SASS/SCSS
• BEM

UPGRADES 🚀 :

• Added a skip-to-content button

Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Flexbox
• SASS/SCSS
• BEM
• Animation
• Custom Scrolltab

Upgrade 🚀 :

• Skip-To-Content button on the header (visible on focus)

Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using: ⚒️

• Flexbox
• SASS/SCSS
• BEM
• Animation

Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using: ⚒️

• Flexbox
• SASS/SCSS
• BEM
• Animation

Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

This challenged was completed using Flexbox and CSS Grid.

Your feedbacks are highly appreciated 👍🏽

UPGRADES🚀:

• Animation
• Accessibility
• BEM

As always, happy coding!👨🏽‍💻

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

• Flexbox
• CSS Grid (few lines)
• BEM

UPGRADES🚀:

• Animation
• Accessibility
• BEM
• Fetch data from JSON 📂

...

Feedback on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

This challenged was completed using Flexbox and CSS Grid.

Your feedbacks are highly appreciated 👍🏽

UPGRADES🚀:

• Animation
• Accessibility
• BEM

As always, happy coding!👨🏽‍💻

This challenge was achieved using CSS Grid and Flexbox.

Your feedbacks are highly appreciated 👍🏽

UPGRADES🚀:

• Animation
• Accessibility
• BEM

As always, happy coding!👨🏽‍💻

This challenge was fun to create as a newbie in building projects using pure CSS 🛠️ and the BEM methodology 🔲.

❓ Question: I've noticed that BEM is used together with SASS but is my usage here ok?

Your feedbacks are highly appreciated 👍🏽

UPGRADES🚀:

• Animated hover state of the button
• Improved accessibility
• BEM

As always, happy coding!👨🏽‍💻