Device Shop Checkout | devChallenges

Solution for a challenge Device Shop Checkout from devChallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • What I learned
  • Useful resources
• Built with
• Features
• Contact
• Acknowledgements

Overview

This is a responsive checkout page for a device shop featuring Apple products. The page includes a shopping cart with three items (iPhone 12 Pro, Apple Watch, and iMac), a coupon code input, order summary with subtotal, tax, and total calculations, and a contact information form for checkout completion.

What I learned

Through this project, I improved my skills in:

• Creating responsive layouts using CSS Grid and Flexbox
• Implementing form styling with custom select dropdowns
• Managing responsive images with srcset for different screen densities
• Structuring semantic HTML for e-commerce checkout interfaces
• Dynamically loading SVG icons using JavaScript

Useful resources

• CSS Grid Guide - Comprehensive guide for CSS Grid layouts
• Responsive Images - MDN documentation on srcset and responsive images
• Custom Select Styling - Helped with styling the country select dropdown

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Vanilla JavaScript
• Google Fonts (Inter)

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build a checkout page following the given design.

Key Features:

• Responsive design that works on desktop and mobile devices
• Shopping cart with product images, names, colors, and prices
• Item quantity display
• Remove item functionality
• Coupon code input field
• Order summary with subtotal, tax, and total calculations
• Contact information form with validation-ready inputs
• Custom styled form elements including select dropdown
• High-resolution image support with srcset

Acknowledgements

Thanks to devChallenges.io for providing this practical challenge that helped improve my front-end development skills.

Author

• GitHub @Mathbkj