DEV Community

Cover image for One beach to rule them all
Ricardo Monteiro
Ricardo Monteiro

Posted on

1 1

One beach to rule them all

This is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches

What I Built

I created a simple responsive design using only CSS and pure JavaScript. And let me tell you... it was fun! It's so easy to use React and Tailwind, but working directly with the DOM was a refreshing and imperative experience, quite literally!

My goal was to develop a nice responsive design for browsing through beaches, adding more flair with an image for each beach on its details page.

Demo

You can test the project on my GitHub Pages:

https://rcmonteiro.github.io/dev.challenges/24.06.beaches/

Or check out the code in my repository:

https://github.com/rcmonteiro/dev.challenges/tree/main/24.06.beaches

Journey

The hardest part, as always, was choosing the colors and designing the layout. I love to code, but when it comes to design, it's a challenge. I really enjoyed sending direct commands to the DOM, just like in the '90s.

I challenged myself not to use any external libraries, and after overcoming many (a lot) of obstacles, I believe I built something truly nice.

I hope you enjoy it as well!

Feel free to make any changes or play around with it; this project is under the MIT license, so you can do whatever you want! =)

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay