clairefields15 / static-comp

Static Comp

Introduction

This weekend-long project was an opportunity to play with responsive design and flex some html and css muscles. We were provided with a project spec and a desktop version a generic website to match. The objective of the project was to build something that respected the integrity of the original design, while not necessarily matching the font, copy, and images. Because the spec was a fairly formal, business-style website, I created a website for a conference.

Fetch Conference 2021 is, regrettably, not a real conference, but I hope you enjoy looking through the schedule of events and dog-earing which talks you might like to attend over the long weekend.

The Provided Comp

Fetch Conference 2021

Features

This is a fully responsive static site that was built mobile-first.

Adding JavaScript was not a requirement of the project, but I added a tiny bit, just so that you can see this mobile navigation bar in action.

The website is fully responsive and utilizes media queries to set css rules across several breakpoints:

• Small tablet size: 620px and up

• Large tablet size: 900px and up

• Desktop size: 1200px and up

Future Additions

While I am unlikely to add many future additions to this project, a few small css animations could really make the UI/UX pop!

• Ripples or some other kind of visual cue on button-tap in mobile view

• Adding a subtle animation to the jumping dog in the logo (on scroll of when you reach the end of the page) would add a little fun!

• Designing my own icons- animating the transition from hamburger button to close (X) button.

Technologies

HTML, CSS and vanilla JavaScript Procreate to design the logo

Contributors

Claire Fields, Front End Engineering student at the Turing School of Software and Design, currently in Mod 2 of 4.