All solutions

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

This was my first solo project with React so I am proud of it all in general.

I built it with :

• ❄ React
• 🌄 Tailwind CSS
• 🎊 React Confetti Explosion &
• 🦚🖼React Toastify

I am proud of the little pieces I added to the website especially the confetti explosion at checkout.

What I would do differently ? I don't know if it was because of the project or React but I found it very easy to overlook accessibility (when opening and closing the menu for example or the cart). So I think I will make that a primary focus in upcoming projects.

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

I had a hard time when building the gallery. For some reason, I decided to do it with external libraries and it was a pain :(

I finally reflected and realized it won't be so hard to build so I decided to do it on my own and then I saw that it was part of the challenge to build the gallery ourselves. So I built it and it was wayyy easier than I thought.

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

Hi FM community,

Here I am with my solution to this challenge, built with HTML and CSS.

I wanted to create this landing page using only HTML and CSS, even for the mobile navigation toggle. So, instead of using JS for that part, I relied on good old checkbox.

It was a bit of a challenge at first because I wasn't finding a way to organize the HTML codebase but I finally found an article who helped me achieve that.

Hello FM

Here's a new challenge I've tackled to review some basics of the HTML5 language :

• unordered & ordered lists ;
• table and
• heading hierarchy.

I've built this solution with HTML5, CSS3 and the Animate On Scroll library to add a bit of animation on page load.

One new thing I did, was to use a favicon generator to create my favicon images so they can be available for every use-cases.

At the "Preparation time" section, I wondered what heading rank to use for the title. It is best practice not to skip heading level so I asked myself considering the design, if I should give it an h2 or h3 tag. But I've finally decided to use an h2 tag as with the remaining titles as I think it has the same importance as them.

I hope you like my solution and, of course feel free to give your feedback :)

Hello FM !

I am finally submitting my solution for this challenge who took more time than planned. It was my first project with HTML & TailwindCSS, as I used to combine Tailwind with Vue.js..

It was also the opportunity for me to practice building accessible components like accordions, tabs and also the hamburger menu on mobile devices.

The more challenging part was creating the tab component as I had to make sure it was responding well on window resize and on page load too.

I hope you'll enjoy it.

Feel free to let me know how you find it !

Hello FM Community!

I'm finally submitting my Multi Step Form solution. It took me quite a while to set it up but it's finally here.

I made this using Vite, Vue.js, Pinia and Tailwind CSS. I also added some form validations to check the inputs.

I had a hard time trying to figure out the best architecture to use and also in binding radio and checkbox inputs while adding styles when they are active.

But it was overall a great challenge and it has helped me to improve my skills with Vue...

Thanks and feel free to give me your feedbacks!

Hi FM community!

Here's my solution to the Rest Countries Challenge. I built it with Vue JS and Tailwind CSS. And as I am currently learning GSAP, I used it to create a little animation on the country detail page (nothing fancy though😄).

This was the first project on which I used the fetch API. And I have some questions about the fetching. I used localStorage to store the countries data to offer a smooth UX as without it, the users would have to wait a few seconds before getting the content of the homepage every time they get back to it. Do you have any suggestions about it? How would you deal with the fetching of the data?

Your constructive feedback is greatly welcomed :)

Thanks!

Hello FM!

Here's my solution to the job listings challenge. I finished it since a while but I was having a hard time deploying it on Github pages using a subtree.

Feel free to give me your feedback about the solution plus a tip on how to make the deployment process with Github pages more fluid.

Thanks!

Hello FM !

This is my first VueJS + TailwindCSS project. It took me longer than expected to tick it off my to-do list 😄. I tried to add an animation (using transition-group & auto_animate plugin) but it wasn't compatible with the drag-n-drop feature (with Vue Draggable).

Feel free to give me your feedback !

Hello FM!

I am finally submitting this project after having started it months ago. I've had a hard time building the animated carousel while making sure it was accessible.. Spent some time figuring out how to position the slider navigation in a responsive way.

But if you found anything unexpected, please let me know. Thanks!

Feel free to give me your feedback.

Your feedback would be greatly appreciated!

Feel free to give me your feedback

Hi community, I hope you will find my solution useful.

I've had a hard time doing the horizontal bar on the large screens' header (From 1440px). It is supposed to reach the beginning of the main text starting from the header but I did a small bar instead. Any tip on how to do it ?

Also, as I am using no components (from frameworks), I had to copy and paste the header and footer in every HTML files. Do you know any tool that can make this easier while coding with just HTML & CSS?

Thanks in advance !