Earth Day Celebration
Tags: devchallenge, frontendchallenge, css, javascript
Published: 2024-04-28 16:59:37


_This is a submission for [Frontend Challenge v24.04.17](https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4), Glam Up My Markup: Earth Day Celebration Landing Page_

## What I Built

<!-- Tell us what you built and what you were looking to achieve. -->
I built a mini-site (one-page) for the Earth day celebration. The goal was to organize the given content in a more defined manner, using a book-like widget.
I aspired to and succeeded in creating something useful, interactive and responsive; I adapted it to be useful on a laptops, tablets and smartphones. 


## Demo
<!-- Show us your project! You can directly embed an editor into this post (see the FAQ section from the challenge page) or you can share an image of your project and share a public link to the code. -->

![The Earth day Widget](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll6v2qurkcw6zfl6bn5a.jpeg)
###[Live Demo](http://earthday.mywebcommunity.org/)
###[Here is the link to the code on Github](https://github.com/uzondu9/frontend-project2)

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

###Setting up
I started off with creating the structure which provided the template for the project. I particularly liked the layout of my encyclopedia’s historic contents, so I decided to adopt the same in organizing the contents of the page. 

###Crucial stage
I began converting my blueprint, to code. Each section of the site would be distinguished from the others. The first section would be at full width and also contain the hero section. But the header section only contained a heading, so I transferred the ‘Take action ‘section to the header using JavaScript. It seemed to me as the best hero section amongst the others.
Looking again at the structure of my encyclopedia, I noticed how the presentation of ‘did-you-know’ section was distinguished from the rest of the content. So I adapted this to my site, giving the section a lesser width than half, on the laptop screen. The rest of the content was contained in the remaining width, since I used sliding for navigation of the content. I then decorated the footer.
 I used media queries to make the site responsive and also created a quiz widget that would appear on a button click.

###Ending
Once done, I took the project for a test drive, fixed all errors, completed my links and added some final touches. The site’s responsiveness was not exactly… flawless. Some content and elements weren’t positioned as I would have loved. However, I didn’t want to risk putting myself in a quagmire, trying to fix things that were already functional; especially not being very conversant with those aspects of the programming language. For me I learned media queries only recently. The images I used in this project were from Adobe istock. It’s a good place to source some free images.
So finally I marked up the boilerplate; I ‘cooked’ it in a way that seemed best to me.
 I probably could have done it better; but certainly feel a sense of achievement and progress. 

###Take a look at the quiz widget

![A quiz image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htaek1n9j8898rsff6ia.jpeg)





<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

###This is a solo project , I am the only coder behind it
[Uzondu9](https://dev.to/uzondu9)
<!-- We encourage you to consider adding a license for your code. 
-->
[MIT License](https://github.com/uzondu9/frontend-project2/blob/main/LICENSE)

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->