All solutions

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

Taking on React after almost a year was daunting, but I did a crash course and got up to speed. Still room for improvement on my part though.

What challenges did you encounter, and how did you overcome them?

I had challenges with form validation, that's I had a lightbulb moment to try out React hook forms for the first time. Also the styling of the toast message using the react-toastify package was stressful, but with the help of the internet and Chatgpt I was able to perform well.

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

Features:

• Achieved scores 100 on PageSpeed Insights.🎉
• The code was formatted with Prettier.
• Close resemblance with the original design.

Built With:

• npm - prettier.

Made good use of CSS pseudo classes

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

Features:

• Achieved perfect scores on PageSpeed Insights.🎉
• The code was formatted with Prettier.
• Close resemblance with the original design.

Built With:

• npm - prettier.

I used CSS for the functionality of the FAQ accordion opening and JavaScript for only changing the aria-expanded from false to true and vice versa.

What challenges did you encounter, and how did you overcome them?

Image positioning for mobile really tested me, but I was able to achieve it when I added margin to the top of the section housing the FAQ questions and absolutely positioned the image.

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

Features:

• Achieved high scores on PageSpeed Insights.🎉
• The code was formatted with Prettier.
• Close resemblance to the original design.

I'm really proud of how I handled the form validation, especially for email and password, where I use regex patterns in my HTML. Also, I handled errors for invalid input or pattern mismatch (for email and password) in my JavaScript by displaying an updated error message.

What challenges did you encounter, and how did you overcome them?

I faced some issues when it came to code repetition at first but made sure I followed the DRY (Don't Repeat Yourself) principle by making good use of functions

What specific areas of your project would you like help with?

I believe I achieved what I set out, so I do not need help for this project.

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

Features:

• Achieved high scores on PageSpeed Insights.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted with Prettier.
• Responsive Web Design (RWD)
• Close resemblance with the original design.

Built With:

• TailwindCSS.
• npm - prettier.

What challenges did you encounter, and how did you overcome them?

I faced major issues with images for tablet sizes, so I cropped the desktop image so I would have more responsive images.

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

Features:

• Achieved high scores on PageSpeed Insights.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted with Prettier.
• Close resemblance with the original design.

Built With:

• TailwindCSS.
• npm - prettier.

What challenges did you encounter, and how did you overcome them?

I faced challenges with the popup for the share button but with some positioning for mobile and desktop view, I was able to achieve the desired result. I also added a little animation.

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

Hi 👋, I'm Fejiro and this is my solution for the challenge:

Features:

• Achieved high scores on PageSpeed Insights.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted with Prettier.
• Close resemblance with the original design.

Built With:

• TailwindCSS.
• npm - prettier.

What challenges did you encounter, and how did you overcome them?

I tested out my grid layout in codepen before i began the project so I had an idea of the direction i want to go.

What specific areas of your project would you like help with?

Any suggestions on how I can improve on my solution are welcome. Thank you 😄

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

Hi 👋, I'm Fejiro and this is my solution for the Stats Preview Card challenge:

Features:

• Achieved high scores on PageSpeed Insights.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted with Prettier.
• Close resemblance with the original design.

Built With:

• TailwindCSS.
• npm - prettier.

What challenges did you encounter, and how did you overcome them?

I faced some issues with the background image colour but was able to do it with taiwlindcss bg-blend-multiply. If there are other ways to achieve this, please suggest.

What specific areas of your project would you like help with?

Any suggestions on how I can improve on my solution are welcome. Thank you 😄 Especially when it comes to blending images with color.

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

Hi 👋, I'm Fejiro and this is my solution for the challenge:

Features:

• Achieved high scores on PageSpeed Insights.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted with Prettier.
• Close resemblance with the original design.

Built With:

• TailwindCSS.
• npm - prettier.

What challenges did you encounter, and how did you overcome them?

Positioning the background images offscreen for mobile and desktop view but I used media queries to combat it

What specific areas of your project would you like help with?

Any suggestions on how I can improve on my solution are welcome especially when it comes to positioning background images partially offscreen for all screen sizes. Thank you 😄

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

Hi 👋, I'm Fejiro and this is my solution for the social links profile challenge:

Features:

• Achieved high scores on PageSpeed Insights.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted with Prettier.
• Close resemblance with the original design.

Built With:

• TailwindCSS.
• npm - prettier.

What specific areas of your project would you like help with?

Any suggestions on how I can improve on my solution are welcome. Thank you 😄

Hi 👋, I'm Fejiro and this is my solution for the Order Summary Component challenge:

Features:

• Achieved high scores (100) on PageSpeed Insights.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted with Prettier.
• Close resemblance with the original design.

Built With:

• TailwindCSS.
• npm - prettier.

Any suggestions on how I can improve on my solution are welcome. Thank you 😄

Hi 👋, I'm Fejiro and this is my solution for the Blog Preview Card challenge:

Features:

• Achieved high scores on PageSpeed Insights.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted with Prettier.
• Close resemblance with the original design.

Built With:

• TailwindCSS.
• npm - prettier.

Any suggestions on how I can improve on my solution are welcome. Thank you 😄

Hi 👋, I'm Fejiro and this is my solution for the social proof section challenge:

Features:

• Achieved high scores on PageSpeed Insights.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted with Prettier.
• Close resemblance with the original design.

Built With:

• TailwindCSS.
• npm - prettier .

Any suggestions on how I can improve on my solution are welcome. Thank you 😄

Hi 👋, I'm Fejiro and this is my solution for the huddle landing page challenge:

Features:

• Scored 100 in all categories for mobile and desktop on PageSpeed Insights.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted with Prettier.
• Close resemblance with the original design.

Built With:

• TailwindCSS.
• npm - prettier.

Any suggestions on how I can improve on my solution are welcome. Thank you 😄

Hi 👋, I'm Fejiro and this is my solution for the ping coming soon page challenge:

Features:

• Achieved high scores on PageSpeed Insights.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted using Prettier and ESLint.
• Close resemblance with the original design.

Built With:

• TailwindCSS.
• npm - prettier - eslint.

Any suggestions on how I can improve on my solution are welcome. Thank you 😄

Hi, I'm Fejiro and this is my solution for the single price grid component challenge:

Features:

• Achieved 100 in PageSpeed Insights score for 3 categories and 91 for Accessibility.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted using Prettier and ESLint.
• Created a toast using react-toastify.
• Close resemblance with the original design.

Built With:

• React (Vite)
• TailwindCSS.
• npm - prettier - react-toastify - prettier-plugin-tailwindcss.
• ESLint

Any suggestions on how I can improve on my solution are welcome. Thank you 😄

Hi 👋, I'm Fejiro and this is my solution to the FAQ accordion challenge:

Features:

• Achieved 100% in Lighthouse score for Performance, Accessibility, Best Practices and SEO.🎉
• Made use of custom properties.
• The code was formatted using Prettier.
• Linting done with ESLint for consistent codebase.
• Close resemblance with the original design.

Built With:

• npm - ESLint.

Any suggestions on how I can improve on my solution are welcome, especially in ways to increase accessibility. Thank you 😄

Hi, I'm Fejiro and this is my solution to the recipe page challenge:

Features:

• Achieved 100% in Lighthouse score for all four categories.🎉
• Utilized Tailwind CSS for styling.
• The code was formatted using Prettier.
• Close resemblance with the original design.

Built With:

• Tailwind CSS.
• npm - Prettier.

Any suggestions on how I can improve on my solution are welcome, especially in improving its performance. Thank you 😄

Hi this is Fejiro, and this is my solution to the EasyBank landing page challenge

• Got it as close to the design as possible
• Used mobile first workflow
• Made use of the Sass/Scss preprocessor

Any pointers on how I can improve on my solution are welcome

Hi this is Fejiro, and this is my solution to the Advice Generator

• Got it as close to the design
• Made sure it was responsive
• Achieved perfect 100 score on lighthouse

Any suggestions on how I can improve are welcomed

Hi this is my solution to the NFT preview card component

• Got it as close to the design
• Made sure it was responsive
• Achieved perfect 100 score on lighthouse

Any suggestions on how i can improve are welcomed