Cooking Website Landing Page

screenshot of a landing page for cooking website with image illustration of mussels stews, dramatic and colorful image.

This concept is a for cooking website. The interface mockups display a landing page which contains information about a recipe contest, a feature image, options to sort content using filters, search, navigate, and browse the website content. I designed and developed the content, look and feel, and layout. I used Sketch to create the mockups.

Cycling Store Application

screenshot of a cycling store app woth three screens displaying layout and content

The mobile application concept is a Cycling Store App. The interface mockups display the cycling content, and how to navigate the products. The application also displays a detailed product page with an option to purchase.
I designed and developed the layout, and look and feel. I used Sketch to create the mockups.

Education Application

screenshot of a educationl app woth three screens displaying layout and content

The mobile application concept is an Education App. The interface mockups displays selected content, how to navigate and select a lesson, course progress, and displays a list of lesson activities.
I designed and developed the content, layout, and look and feel. I used Sketch to create the mockups.

Gibson Guitar Product Page

screenshot of a product feaute page for gibson guitar with image of a les paul guitar

This web concept is a for a Gibson Guitar product feature page. The interface mockup displays information about the guitar, a product image, and an option to purchase. I designed and developed the content, layout, and look and feel. I used Sketch to create the mockup.

Music Application

screenshot of a music app with three screens displaying layout and content

The mobile application concept is a Music App. The interface mockups display the content, how to navigate and select a playlist, and displays the current song selection.
I designed and developed the content, layout, and look and feel. I used Sketch to create the mockups.

Travel Application

screenshot of a travel app woth three screens displaying layout and content

The mobile application concept is a Travel App. The interface mockups display the content, and how to navigate and purchase a travel activity.
I designed and developed the content, layout, and look and feel. I used Sketch to create the mockups.

Rebuilding the card component with CSS Grid

I have rebuilt the card component using CSS Grid. CSS Grid is the ultimate tool for your layout. Though Flex Box is awesome, it does have it’s limitations and only allows you to edit on one axis at a time. Where CSS Grid gives you greater control over your layout and allows you to work on two axis (columns and rows) simultaneously, on a single DIV. CSS Grid allows us to flatten the markup and design our pages using a grid system. Which opens up new layout possibilities!
See the prototype example with the updated CSS Grid here. Resize the web browser to see the flex in action!

Card component prototype using “flex-basis”

Completed an exercise using “flex-basis” and “flex-direction” to create a card component. Using flex basis helps control the size of the image based on the flex direction which is really helpful with the layout when creating a component for mobile and larger screen sizes.
See the prototype example here. Resize the web browser to see the flex in action!