Jumbotron

YUM - Single Page Cooking Website
- Focus on Html and Css Coding

Click the buttons to go to the project demo

Click the tabs to view different aspects of the project

ABOUT THE PROJECT

To create a single page cooking website using html and css using website assets mostly created by myself, including the creation of three videos.

Yum Logo
Liven Up Yum Workdmarks
Yum icons

OBJECTIVE

To create an interesting cooking website, from professor generated copy-text, and to produce three cooking videos


THE PROCESS - Logo Design Elements and Coding

The first step was to come up with a colour scheme to create the logo, then other elements that the website would need was created, such as the icons, to go with the text copy provided. A photoshop compostion layout was then created, leaving space for the cooking videos which was created at a later time.

The coding was done using basic html and css, No external frameworks was used. A tiny bit of jquery was utilised to enable smooth scrolling and animating of the various page sections


ROLES

Creative Designer
Illustrator
Asset Creator
Html, Css and a tiny bit of Javascript

TOOLS

Sketching
Illustrator
Photoshop
Brackets

html code snippet

Videography - Creation of three cooking videos

CREATING THREE COOKING VIDEOS

Firstly a shot list was created for each video. THat was used to position lighting and camera set up. After the area was prepared the video capture took place. Both Adobe Premiere Pro and After effects was used to create the video and add music.

To watch the videos, go to the link above to the cooking website.









To watch the videos, click the images.