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.
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.
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!
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!
I have completed the HTML/CSS prototypes for the “Living the simple life” blog. The prototype includes a Home page, Recent Posts, and About Me page. I have included a link to the prototype here.