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.
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!
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
Link to the course
Each time you reload the web browser, the colors change! Link to the script is here.
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 added to two new samples to the Portfolio page. The Living the Simple Life blog, and a sign up advertisement for a BBQ Webinar. Have a look!