How To Make eCommerce Website Using HTML And CSS Part 2 | Online Shopping Website Design

Summary

This tutorial is the second part of a series on building an e-commerce website using HTML and CSS. In this video, we focus on creating the 'All Products' page, starting from a copy of the homepage and systematically removing unnecessary sections. The video demonstrates how to add a title, sorting options, and pagination buttons, and then styles these new elements using CSS to ensure a responsive and visually appealing layout. Key steps include adjusting the header for a plain background, populating the page with product cards, and designing interactive buttons for page navigation.

Highlights

Setting up the Products Page00:00:00

The video starts by creating a new 'products.html' file by copying the entire content of the 'home.html' file. The title is then changed to 'All Products - Restore'.

Removing Unnecessary Sections00:00:57

Various sections from the homepage, such as the initial row with text and image, featured categories, featured products, offer, testimonials, and brands, are removed from the 'products.html' file, keeping only the navigation bar and footer.

Adjusting the Header and Background00:03:01

The gradient background color from the header is removed to give the navigation bar a plain background, which is more suitable for the product listing page.

Adding 'All Products' Title and Sort Options00:04:10

A new row is added above the product listings. This row includes an 'All Products' title (h2) and a 'select' dropdown for sorting options like 'Default Sorting', 'Sort by Price', 'Sort by Popularity', 'Sort by Rating', and 'Sort by Sell'.

Styling the Sort Options with CSS00:05:27

CSS is used to style the newly added row, aligning the title to the left and the sort dropdown to the right using 'justify-content: space-between'. The dropdown itself is styled with a red border, padding, and an outline set to 'none' on focus.

Populating with More Products and Pagination00:07:37

More product cards are copied from the homepage to fill the 'All Products' page, resulting in a total of 12 products. Below the products, a pagination section (page-btn) is created with numbered buttons (1, 2, 3, 4) and a 'next' arrow icon.

Styling Pagination Buttons00:09:36

CSS styles are applied to the pagination buttons, including margin, display as inline-block, a one-pixel solid border, fixed width and height, centered text, and a pointer cursor. A hover effect is added that changes the background to red and text color to white.

Responsiveness and Conclusion00:11:47

The video concludes by demonstrating that the 'All Products' page is fully responsive, with the dropdown menu and content aligning correctly on smaller screens. The hover effects on buttons also work correctly, completing the 'All Products' page for the e-commerce website.