Introduction

Last December 2023, I recently joined a class from Filipino Web Development Peers on Discord hosted by a mentor who is 15 year old but already expert on HTML, CSS, Javascript!

A task was given to us where have to make a component of a Checkout Card Component. The UI is inspired from Figma Community by Softwareseni and Wirak S. https://www.figma.com/community/file/1158585574208802327/checkout-page

Links

• Solution URL: https://github.com/loryvi/order-form-component
• Live Site URL: https://loryvi.github.io/order-form-component/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Javascript

What I learned

• Dropdown
• Buttons with javascript
• Gradient div

Continued development

• :bulb: Animation for the Checkout Button
• :bulb: Add more product items using API
• :bulb: Responsive Mobile Page
• :bulb: Make it a reusable component!

Useful resources

• https://cssgradient.io/ - Guide for CSS Gradient boxes
• https://fonts.google.com/icons - easy to use, import and has a developer guide!