DEV Community

Cover image for How I Glam Up My Markup
Nargis Khatun
Nargis Khatun

Posted on • Edited on

How I Glam Up My Markup

What I Built

I enhanced a set of HTML code provided by the challenge with custom CSS to create a visually appealing website focused on camp activities. The website showcases various outdoor activities such as hiking, fishing, and camping, utilizing clean and modern design elements to improve user experience. By applying CSS styling, I aimed to make the content more engaging and visually appealing without altering the underlying HTML structure.

Demo

Image description

Source Code: github.com/itxnargis/camp-activities
Live Demo: itxnargis.github.io/camp-activities/

Journey

I've always been excited about front-end development, so diving into this project was a no-brainer for me. It was a real challenge, though. Making the website responsive and finding the right color combinations? Yeah, that wasn't easy. At first, I didn't even know what the website should look like, but I just took it step by step. Eventually, I figured it out and got it done.

Then, I decided to spice things up a bit. I started with a simple form, something you see everywhere. But I thought, why not make it visually appealing? I hesitated at first, thinking it might be overkill for just a form. But I took a leap of faith and decided to
experiment.

I even tried adding animations, but after countless Google searches and failed attempts, I realized it wasn't working out. I needed to add a in my HTML, but couldn't because of limitations. Frustrated, I almost gave up. But then, I stumbled upon the idea of adding a border, and it turned out to be a game-changer. It added that extra touch of style I was looking for, and suddenly, the form looked amazing.

After finishing up the form, I felt inspired to make it even more interactive and user-friendly. That's when I decided to add light and dark theme options for all types of users. In JavaScript,
Honestly, I wasn't sure what to add because everything seemed fine without it. But hey, it turned out great anyway. I ran into some issues with adding HTML, but in the end, it all came together. I also attempted to add an alert message if the user didn't select anything, but it didn't quite look right. So, I made the fields required instead, which was a much cleaner solution.

Overall, it was an AMAZING experience. From starting with a simple form to designing it and then adding light and dark themes, not to mention diving into JavaScript—it wasn't easy, but I thoroughly enjoyed pushing my boundaries and embracing new challenges. And you know what? It was all worth it. The journey of growth and learning, the satisfaction of overcoming hurdles—I wouldn't trade it for anything. Can't wait to see what other challenges lie ahead. Bring it on!

Top comments (1)

Collapse
 
itxshakil profile image
Shakil Alam

Very inspiring.