Yum Yum Kitchen

Web Design/Development

Oct. 10 - Oct 24, 2021 (2-week project)

Project Overview

This project combined three phases of work.

Creating the landing page utilizing HTML and CSS.
Create the general layout and styles for the recipe pages.
Create a navigation bar and link everything together.

My Contributions

I selected all of the images, designed the layout, created the color scheme, and chose the fonts for all of the pages.

The website was created using HTML and CSS. The markup was verified using W3C markup validator.

Yum Yum Kitchen

Designer / Developer

Before any coding begins, you have to know what you're building. Wireframes bring ideas to life and act as a guide for developers. I needed to create a index page and a recipe page. Although the first phase was to create the index page from scratch, I needed an idea on how the recipe page would also be laid out.

For the layout, I create the navigation bar across the top of the page followed by a hero image. This was to be consistent across all pages to create repetition and familiarity. The footer would also stay the same across all pages.

Screenshot of html code used to create Yum Yum Kitchen page

Open-source Text Editor

Creating an organized structure with sections clearly laid out helps during the styling phase of the project. I enjoy using the text editor ATOM when creating pages from scratch. I include blank links for hyperlink tags and referenced a blank stylesheet.

I try to avoid using <div> tags and instead use <section> tags within the main. If I need another container to help organize content, I'll use a div but other than that, I try to avoid them.

Color palate from Adobe Color for Yum Yum Kitchen

Adobe Color and Google Fonts played a huge role in getting everything looking just right. I went with an analogous color spread with a off-white to complete the look. I brought colors into the hero image title using the bright yellow with a white drop shadow effect. The images have a border of green to add pop and I even added color to the hyperlinks when active, hovered, and visited.

For the fonts, I chose something playful for the title and subtitle. For the navigation, headers, and paragraph text, I chose an easy to read san-serif font.

Yum Yum Kitchen

Want to work together?