This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities
What I Built
For this challenge, I tried to create a project that is dynamic, responsive, and accessible, all within my current abilities and adhering to the challenge rules. Although there may be some areas where improvements could be made, I believe my work is comprehensive and engaging. The process of crafting this submission was truly enjoyable and fun for me and I hope you find something interesting in it.
Demo
The demo itself is as responsive as I could do it. I tried to take into consideration the main ways to see the demo in Codepen: In the 3 different default "Change view" options and the Live View in a different page. I even considered the mobile view.
Journey
It all started with an idea, I wanted to add dynamic images on the form, to show the different camp activities, that way filling up the form wouldn't be so boring and you could better think of the option you want the most before submitting.
To achieve that, I started to search for free pics and resources, until I stumbled upon Storyset which -to my surprise- had images for all the activities so I could have the same style of images in the project.
Then I started thinking about the overall style of the project. While thinking about the project I was watching the Mashle season 2 opening and if you know what I'm talking about you would understand why I chose the yellow color palette. Of course, because this is a Dev.to challenge, I wanted to do a minimalist "note" style form. Hopefully, my design represents this style decision.
When I started adding the images in the project I realized that adding a lot of images would be difficult as the template can't be really manipulated (now I know this isn't true) so as a solution, I did a multi-step form, that way I can organize the info that's shown on screen. But that came with its own challenges.
I tried to make the code as clean and explicit as possible (with a lot of comments) but essentially, I needed to add new elements like the images, some buttons to control the steps, steps indicators and a random div to add some style. I also needed to add and remove (conditionally) a lot of attributes and classes, to make the form reactive and responsive.
After all the styling was on place and worked in the tab functionality I then started to make some accessibility changes, for example, I added focus classes, and manipulated the tab index to make keyboard navigation as clear as possible. Sadly, I'm very new to accessibility and I am not sure I did the best job in it. Nevertheless, I tried making it accessible and I think trying and learning from mistakes is better that not doing anything for fear that it comes up wrong.
Responsiveness was a difficult step, because I am using a lot of absolute positioning which I think is not the best option but is the easier. Like I said in the demo portion, I tried to take into consideration the default page views and different combinations of width and height. I hope you can see a version that looks good and don't judge me for the failed resolutions π₯²
Finally, the project was finished!
Until it wasn't...
Ok let me explain, this is my first challenge and big post I make for dev.to in the 6 YEARS I have in this platform. Seeing that I still had some hours to submit the project, I wanted to have a Plus Ultra moment and add some more features, form validation and dark mode.
It was actually fairly simple to add them considering that dark mode is one of the most common features in virtually all modern web projects and the validation was in the page that I was referencing when doing the multi step form. After adding this, and testing some more, checking all the styles and functionalities where in place, I now consider this project a huge success.
I really don't care too much about winning the challenge, I know there are thousands of people with insane skills and lots of experience, but I wanted to feel satisfied with my contribution, that I did all I could do, to show off my skills and most of all, remind myself that I can do amazing stuff when I put my heart into it.
Finally, if you are participating in the challenge I hope you feel the same and if not, maybe the next challenge will be your moment. Thanks for reading until here, and I have no idea how to end this so... Goodbye.
If you have some feedback you can write a comment or send a DM. English is my second language and this is my first "technical" post so please be nice to me β£οΈ
Top comments (15)
Very cool design! I like the change of images!
Thanks! I tried to make it as dynamic as possible ππ»ββοΈ
Simply a great design that looks harmonious in itself. But it's not just the clever design that is convincing. The fact that there is even a dark mode and the form is also responsive is the cherry on top.
And thank you for sharing Storyset, another hidden gem in the depths of the internet π
Thanks, I really liked your submissions as well! Congrats on winning the Art category ππΌ
And yeah, I'm totally gonna use Storyset on future side projects as well π₯
Yours is good... Simple but working perfectly well. I wish I've thought about this before :p
Thanks! I just tried to do it as simple as possible and then started adding bit by bit until the end product πΊπ»
I also did like you but mine became a huge dissapointed =))
Don't worry about it! Like I said in the post, maybe the next challenge will be better for you, you only need to keep trying ππ»
The colour blends in nicely. Super.
Much good my friend!ππππ
Thanks ππΌ
Awesome work! Also, thanks for sharing about Storyset, the illustrations are really cool.
Thanks! I really liked the illustrations as well, full of personality and very flexible with different formats and colors.
Great job! I like the minimalist style inspired by Mashle season 2. I think you've done an amazing job. Keep posting!
Thanks! ππ»