All solutions

🙋‍♂️ Hello, Everyone,

Here is my solution for the Blogr Landing Page.

• Scored 88% on Google Pagespeed Insights! 🤩
• Built with ReactJS | Designed with TailwindCSS 🛠️ | Mobile-First approach 📱
• Utilized prettier-plugin-tailwindcss to auto-sort TailwindCSS classes 🎨
• Minified the CSS files to improve site performance 🚀

Do you have any insights to share❔

I'll be happy to hear them. 🤓

Code Together | Learn Together | Grow Together

🙋‍♂️ Hello, Everyone,

Here is my solution for the FAQ Accordion.

• Scored 89% on Google Pagespeed Insights! 🤩
• Built with ReactJS | Designed with TailwindCSS 🛠️ | Mobile-First approach 📱
• Implemented <details> & <summary> to create accordion without using JS #️⃣
• Utilized prettier-plugin-tailwindcss to auto-sort TailwindCSS classes 🎨
• Utilized BEM principles to create a consistent structure of TailwindCSS classes
• Minified the CSS files to improve site performance 🚀

Do you have any insights to share❔

I'll be happy to hear them. 🤓

Code Together | Learn Together | Grow Together

🙋‍♂️ Hello, Everyone,

Here is my solution for the Sunnyside Agency Landing Page.

• Scored 93% on Google Pagespeed Insights! 🤩
• Built with ReactJS | Designed with TailwindCSS 🛠️ | Mobile-First approach 📱
• Utilized prettier-plugin-tailwindcss to auto-sort TailwindCSS classes 🎨
• Separated CSS files for each component for better readability 📔
• Utilized BEM principles to create a consistent structure of TailwindCSS classes
• Minified the CSS files to improve site performance 🚀

Do you have any insights to share❔

I'll be happy to hear them. 🤓

Code Together | Learn Together | Grow Together

🙋‍♂️ Hello, Everyone,

Here is my solution for the Tip Calculator App.

• Scored 98% on Google Pagespeed Insights! 🤩
• Built with ReactJS | Designed with TailwindCSS 🛠️ | Mobile-First approach 📱
• Utilized prettier-plugin-tailwindcss to auto-sort TailwindCSS classes 🎨
• Implemented CountUp for counter animation 🅰️
• Utilized BEM principles to create a consistent structure of TailwindCSS classes
• Minified the CSS files to improve site performance 🚀

Do you have any insights to share❔

I'll be happy to hear them. 🤓

Code Together | Learn Together | Grow Together

🙋‍♂️ Hello, Everyone,

Here is my solution for the Time Tracking Dashboard.

• Scored 94% on Google Pagespeed Insights! 🤩
• Built with ReactJS | Designed with TailwindCSS 🛠️ | Mobile-First approach 📱
• Utilized prettier-plugin-tailwindcss to auto-sort TailwindCSS classes 🎨
• Implemented JavaScript's inbuilt fetch API to make calls to internal JSON data ⚙️
• Utilized BEM principles to create a consistent structure of TailwindCSS classes
• Minified the CSS files to improve site performance 🚀

Learned one important thing when injecting SVG's through inline-CSS dynamically:

• Sometimes your SVG will be inlined by React so you need quotes around it:

backgroundImage: `url("${Background}")`

• otherwise, it's invalid CSS and the browser dev tools will not show that you've set background-image at all.

Reference: Mattia Righetti's answer on StackOverflow

Do you know a better way to deal with using SVG's as a background image❔

I'll be happy to hear them. 🤓

Code Together | Learn Together | Grow Together

🙋‍♂️ Hello, Everyone,

Here is my solution for the Intro Advice Generator App.

• Scored 97% on Google Pagespeed Insights! 🤩
• Built with ReactJS | Designed with TailwindCSS 🛠️ | Mobile-First approach 📱
• Utilized prettier-plugin-tailwindcss to auto-sort TailwindCSS classes 🎨
• Implemented JavaScript's inbuilt fetch API to make calls to External API ⚙️
• Utilized BEM principles to create a consistent structure of TailwindCSS classes
• Minified the CSS files to improve site performance 🚀

Do you have some insights to share❔

I'll be happy to hear them. 🤓

Code Together | Learn Together | Grow Together

🙋‍♂️ Hello, Everyone,

Here is my solution for the Intro Component with Dropdown Navigation.

• Scored 97% on Google Pagespeed Insights! 🤩
• Built with ReactJS | Designed with TailwindCSS 🛠️ | Mobile-First approach 📱
• Utilized prettier-plugin-tailwindcss to auto-sort TailwindCSS classes 🎨
• Built Dropdown Navigation from scratch using React Components ⚙️
• Utilized BEM principles to create a consistent structure of TailwindCSS classes
• Minified the CSS files to improve site performance 🚀

Do you have some insights to share❔

I'll be happy to hear them. 🤓

Code Together | Learn Together | Grow Together

🙋‍♂️ Hello, Everyone,

Here is my solution for the Expenses Chart Component.

• Scored 99% on Google Pagespeed Insights! 🤩
• Built with ReactJS | Designed with TailwindCSS 🛠️
• Created a function that dynamically calculates the height of the bar 📊
• Learned to add dynamic styling to an element ⬆️
• Completed the challenge without using any Chart Libraries 🚀

I'll be happy to hear any other Feedback or Advice on best practices. 🤓

Code Together | Learn Together | Grow Together

🙋‍♂️ Hello, Everyone,

Here is my solution for the Interactive Card Details Form.

• Scored 99% on Google Pagespeed Insights! 🤩
• Built with ReactJS | Designed with TailwindCSS ⚙️
• Implemented Regular Expressions to validate and format the inputs. ⌨️
• Implemented Luhn's Algorithm to validate a card number. 💳
• Tried a combination of TailwindCSS & BEM to make the structure consistent and scalable. 📈
• Learned a way to add a gradient to the border: 💯
• Minified the CSS files to improve site performance 🚀

❗But I have some constraints regarding the design:

• The gradient border doesn't accept the border-radius property.
• Custom background configuration in tailwind.config.js doesn't work in production.

Your feedback is appreciated if you know the answer and/or find any other constraints. 🤝 Also, I'll be happy to hear any other Feedback or Advice on improving the code. 🤓

Code Together | Learn Together | Grow Together