Skip to content

Electronics Ecommer Website for Smart phones, computers and others.

Notifications You must be signed in to change notification settings

tigamadou/shoptemplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Screenshot Image

ElectroShop

Smooth and lightweight Electronics Consumer Goods Shop. Build with Html, Css and Javascript.

· View Demo ·

Table of Contents

About The Project

This Project is my Html/Css project for Capstone projects by Microverse. The pages built are for an online electronics shop and the users will be able to browse the products by category and also see the product details page.

Project Details

The goal of the Capstone project is to realise a real-world-like project with given specifications so that we'll get used to real life work conditions. Thus, at the end of the Html/Css courses in Microverse Program, I'm realising this project with all the skills learned. This project is being reviewed to let help us achieve mastery of the fields, but also to improve it. Find all the specification and requirements listed bellow.

Project Specifications

  • The Capstone HTML & CSS project is based on an online shop for sneakers.

  • Follow the given design of the website, but the content can be personalised.

  • Build these 3 pages as minimum:

    • The main page, with a menu link to the category page
    • The category page, with a list of products that link to the product page
    • The product page
  • All the pages should have versions for 3 screen sizes.

    • mobile: up to 768px
    • tablet: up to 1024px
    • desktop: from 1024px
  • Follow the guidelines of the design:

    • colors
    • typographies: font face, size and weight
    • layout: composition and space between elements, for the 3 given screen sizes
  • Submit a Presentation video

Project Requirements

  • Use semantic HTML tags.
  • Use CSS selectors correctly.
  • Use HTML elements box model (margin, padding, width, height).
  • Use industry-standard tools (flexbox) to place elements in the page.
  • Ability to create UIs adaptable to different screen sizes using mediaqueries.
  • Apply front-end best practices.
  • Ability to create UIs adjusted to given designs.
  • Strong English written and verbal communication.
  • Ability to communicate information effectively to technical and non-technical people.
  • Ability to translate business requirements into software solutions.
  • Ability to work well in a fast-paced environment under deadlines.
  • Ability to perform tasks and complete projects with minimal supervision.

Build With

ScreenSHots

Home Page

Screenshot Image

Category Page

Screenshot Image

Product Page

Screenshot Image

Contact

Acknowledgements

Contributing

Thank you for considering contributing to this Project. Please read the following guidelines here for more details.

Tests

  • stickler-ci

About

Electronics Ecommer Website for Smart phones, computers and others.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published