All solutions

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

I like the solution with react-hook-forms that allows you to write your custom components and integrate them with react-hook-forms' features like validation.

I also used GitHub Actions to build and host the site with GitHub Pages for the first time.

For the next time, I want to use a router like Tanstack router to navigate to show the different views (the form and the success)page.

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

Using vanilla forms was getting complex fast. After some research, I decided to try out react-hook-forms which was helpful.

I have had problems with the images being hosted on GitHub pages. Using the repository name as the base URL in the Vite configuration solved the issue.

I wanted to try web components and how I feel about them. This challenge is a straightforward and sound foundation to try out web components.

I have mixed feelings about web components. It is convenient to create domain-specific elements. Content creators can use these elements to create sophisticated components without knowing the implementation details.

But besides that use case? I don't see any value in using it to build a simple SPA or SSR.

In conclusion, I'll probably stick with React and Vue.

Do you have any experience working with web components?

This made fun 🚀 I've learned about the picture element and getting used to flex 👨‍💻

A plain vanilla solution. I wanted to train css nesting and get used to BEM.

Feedback much appreciated :)

I really enjoyed this challenge but it took me longer than expexted due to Vue. I wanted to try out Vue and it was a nice experience. Vue really encouraged me to structure my code in a cleaner way than with Vanilla HTML/CSS but it took some time to bring up a structure.

I also tried to use counter-increment for the but was not able to get it up :/ Is counter-increment only working on siblings?

I am also not sure about the background on the footer. I used pseudo elements to create the effect but I am not sure if this is the way to go.

Besides, feel free to give me some feedback

Feel free to comment on this design. I added another (not requested) layout for tablets because I did not like the single column on medium sized screens. What do you think?

I have two questions:

I tried using gh-pages npm package to deploy the create-react-app via Github Pages but it failed and I used Vercel instead. Has anyone any experiences on how to deploy a react App on Github or some knowledge about any pit falls?

I liked using css grid for this task but is there another way to achieve this layout?