microverse HTML CSS capstone project online shop for electronics

Online shop (index and search page) - Built time 16 hours

This is a capstone/exam project for the Microverse module HTML/CSS. It is a Crafts(handmades) website using HTML, CSS3/SCSS, Bootstrap, and Font awesome.

Watch a video presentation of the project here. The website is built using this mockup

Screenshot of the index page

Screenshot of the search page

The project is built using HTML and CSS/SCSS with an extensive use of the grid and flex propreties. I used all SCSS core functionality: variables, mixins and color functions.

Built With

• HTML
• CSS3/SCSS
• Bootstrap
• Font awesome icons
• Webhint/Stylelint linters
• NPM scripts for testing and running the SCSS changes

You can check the workflow that I use when building websites by reading my medium article Organize your HTML and CSS files like a pro

Live Demo

Live Demo index page

Live Demo search page

(You can also navigate between pages using the navigation links and the search form.)

To get a local copy up and running follow these simple example steps.

Setup

Clone the project locally.

Linters

1. run npm install.
2. run npm run test to check the HTML and CSS files.
3. run npm run watch to start watching for SCSS changes.

Deployment

Install and run a live server plugin on you IDE/Text editor and run it from the root directory.

Future improvements

Add a backend to the page

Authors

? Cristian Viorel Ceamatu

• Email: [email protected]
• Github: https://github.com/cristianCeamatu
• Twitter: https://twitter.com/CristianCeamatu
• Linkedin: https://www.linkedin.com/in/ceamatu-cristian/

Show your support

Give a ️ if you like this project!

License

This project is MIT licensed.