Prompt: Credit Card Checkout

Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.

Task 1: Design

I worked on the design, taking inspiration from the Bombardier Business Aircraft website , I also referenced Paystacks checkout in their demo page as well as the form input designs by Denis Abdullin

• Figma design prototype URL

Task 2: Build design and share on Codepen using vanilla HTML & CSS

• Codepen build URL

Made good progress today!

• Avoided repeating yesterday’s mistakes and improved my workflow from 6 to 4hrs by chunking tasks (Design -> HTML -> CSS -> Inspect & fix QA issues).

• Switched the form input font from ‘SF Mono’ (webfont challenges) to ‘Roboto Mono’ for faster progress.

• Found a clever workaround on Stack Overflow to implement the VISA logo in the card number field (hint: used absolute positioning) .

Conclusion

I really enjoyed today's task and will have to plan my week to enable handle the design and code of the other 6 challenges I need to complete this week.

2 down, 98 to go!