This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page
What I Built
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
Live Demo
Here is the link to the code on Github
Journey
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
Top comments (0)