Challenge

To build a beautiful one page fully-responsive food catering website using a fluid grid system for the layout. Not only the website has to look good on the outside, but see to it that the HTML and CSS codes should be high quality and clean to make it easier for other developers to see and edit the code.

Though this is a static website project, the buttons, links to other sections of the page and some smooth scrolling effects should be applied.

Solution

This website is not a client website but rather a personal project/challenge of mine so that I can hone and develop my web design skills further. I used ‘Github’ to host and publish the site.

Before the start of this project, my HTML and CSS skills were very minimal (I am self taught but never really dug that deep into coding before 2020) and has been relying on page builders on WordPress to build websites for clients for the past 3 years. I purchased courses on UDEMY, took online lessons on FreeCodeCamp and this project is the product of it.

Details about the project

This website is composed of 4 links which leads to different sections of the site. This is built entirely with pure HTML and CSS coding and some JS code snippets to come up with some effects such as smooth scrolling on click, image change when viewed on mobile and on the fly animations. This is a fully responsive grid layout website with a minimalist approach yet very beautiful design.