This website displays a simple checkout page for PlayStation5. Created as part of the freeCodeCamp.org HTML5 free course.

This project is a beginner-level exercise that uses HTML5 and very minimal CSS3 to mimic a checkout page in an ecommerce website. It demonstrates proper use of table-related elements like <thead>, <tbody>, and <tfoot> form elements like <input>, <label>, and <fieldset>.

• Tabular data structuring (<table>, <thead>, <tbody>, <tfoot>)
• Proper use of HTML <figure> and <figcaption> elements
• Correct headings hierarchy <h1>, <h2>, ...
• Form structuring which submits to httpbin.org

• How to design a semantic and accessible checkout page
• Creating structured data tables with advanced use of <thead>, rowspan, tfoot, and scope
• Implementing real-world form validation using pattern, required, and inputmode
• Applying metadata and Open Graph tags for better SEO and link previews
• Structuring content with <figure>, <aside>, and <legend> for accessibility
• Writing organized and clean HTML for product listings and forms

• HTML5
• CSS3 (minimal)
• Git
• GitHub
• Netlify

1. Clone the repository
2. Open index.html in your browser

Or you can check out the live website here

Created by Elmar Chavez

Month/Year: April 2025

Journey: 1^st month of learning frontend web development.