Mini Project: Online Shooping - Shoppe Web Clone

Date: 19 - Mar - 2020

Functions

• Study HTML & CSS & Responsive
• Build a Responsive Website for mobile, tablet, medium screen, large screen

Template

http://shopee.vn/

Screenshot

Tech-Stack

• HTML
• CSS

Plan Of Action

• Initial project
• Base source
• Reset CSS
• Base CSS
• First layout
• Navbar CSS
• import font-icons
• Icons CSS
• Header QR code CSS
• Header notification CSS
• Base modal
• Sign Up form
• Style for Sign Up form
• Login form
• Modal animation
• Search component
• Header Empty carts
• Header cart badge
• Header cart - List products
• Header user info
• Header Fix UI bugs
• List Products
• Sort products
• Style for Product
• Fix UI Bugs
• Pagination UI
• Footer
• Responsive
  • Header Search
  • Cart
  • Header sort bar
  • Header search
  • category product
  • Mobile, Table category
  • Fix UI bugs
  • Mobile footer
  • Fix UI

After this project

Study HTML & CSS

• Layout HTML with flex-box
• Use media queries to make responsive
• className with BEM

Directory Structure

.
├── assets
    ├── css
        ├── base
        ├── grid
        ├── main
        └── responsive
    ├── fonts
    └── img
├── README.md
└── index.html

Set up

Use the cmd line to clone repo to your computer

git clone [github_repo_url]

Open index.html to run the application