SunnysideCodeLive

About

Take a trip to the Sunnyside with this bright, simple and elegant landing page.

Why?

I wanted to challenge my CSS skills to build as much of this site as I could with only HTML and CSS. It is important to revisit the basic. I learn a lot when I limit the tools that I use. I enjoy challenging myself and I set a limit of building this out in one 8-hour day.

Mobile and Desktop view of the project as a screenshot side by side

How?

HTML5, CSS3 and vanilla JS!

Lessons

I implemented a drop-down menu for the mobile view by using a hidden HTML checkbox to toggle the state.

To ensure a responsive layout, I employed CSS grid and flexbox, which proved instrumental in maintaining the page's adaptability across various devices. Notably, the implementation of the picture HTML tag was crucial in displaying appropriate images tailored to different screen sizes. It is worth mentioning that the provided images were already optimized to enhance their rendering on respective devices.

As part of the ongoing development process, my immediate plan includes purging any unused CSS.

 Back