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.

UI Inspiration

image of UI movement landing page

I reference many web sites for UI inspiration and have featured one of my favorite, UI Movement. The site features the best UI designs – every day!
The main difference between UI Movement and other design inspiration sites, is that UI Movement focuses exclusively on UI designs. Check it out!

I am currently in progress on the Udemy Modern React with Redux course

Learn to master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks.

    What’s covered in the course
  • Build amazing single page applications with React JS and Redux
  • Master fundamental concepts behind structuring Redux applications
  • Build composable components
  • Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax

Link to the course

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!

Responsive Web Design Bootcamp – Stay Sharp!

scrimba logo

I recently joined the The Responsive Web Design Bootcamp at Scrimba.
In all, there are over 170 lessons and more than 15 hours of content that can help you start to master CSS, Flex Box and CSS Grid. Kevin Powell is a great instructor and the Scrimba platform allows you to actually code in the console window, while watching the video, and you’re able to view the code changes in a browser, in real time. Awesome technology!
Scrimba has a number of excellent code camps to check out.