You are asked to create an imaginary online store. Your site will focus on the

HTML, CSS, and JavaScript for the sites front-end, but not require a back-end.

Please see detailed requirements in the comments within src/index.html.

To submit your assignment, you must successfully run the npm run prepare-submission build script discussed below. Please read all of the following information carefully, and dont skip any steps.

Design Your Store

What will your store sell? In the past students have focused on clothing, jewelry, second-hand clothing, make-up, cakes, tea, and computers. Your store can sell whatever you want, and you can use this as a way to say something about your personality and interests. It can be fun, funny, or serious.

Ideally, youll build something in this assignment that youll be proud to show in interviews when applying for co-op positions. Former students have used their stores to showcase their web development skills and get hired.

Get Inspired

You probably already use many online stores. Take some time to go visit the ones you like, and explore some new ones to get inspired. Here are some examples of stores to get you started:

Shoes at https://www.nike.com/ca/ and https://www.goat.com/

Stickers at https://www.stickermule.com/ca

Computers at https://www.canadacomputers.com/, https://www.bestbuy.ca/en-ca, and https://www.apple.com/ca/

Mens Clothes at https://www.frankandoak.com/ and https://shop.tees.ca/

Womens Clothes at https://www.aritzia.com/en/default and https://6bygeebeauty.com/

Fitness equipment at https://www.roguecanada.ca/

Food at https://www.pipsnacks.com/

Art at https://www.nickmayerart.com/

Coffee at https://www.deathwishcoffee.com/

Records at https://www.funkymooserecords.ca/

Notice whats similar and different about each of these, how they use fonts, colours, and images. Pay attention to common layouts. Stores all sell different things, but they use many common patterns in their design and user interface. Try to identify a few of the effective techniques you see in the stores you like and use it to guide your own design.

NOTE: you need to create your own store design, and shouldnt copy anything directly from another site, but its OK to get inspired by existing designs.

Setup

Install all the necessary dependencies using the npm command (installed with node):

npm install

This should download and save all the necessary files to a folder named node_modules in the current directory.

If you have trouble getting npm install to work:

Did you install node.js?

If you type node version in your terminal, does it print the version? Are you in the right directory (you must cd into the correct directory)

If you need help, ask your classmates or talk to your professor.

Writing your code

All of your HTML, CSS, and JavaScript files should be placed in src/.

The build scripts discussed below all assume your files are located there.

Using Build Scripts

There are a number of build scripts you can run to help you check, validate, and use your files. All of the scripts are run using the following command format

npm run script-name:

1. To start a web server so you can browse all the files in src/*:

npm run server

You can now open the URL http://localhost:3000. Use CTRL+C to stop the server. The web page will automatically reload when you save your files.

2. To run all the tests to validate your HTML, CSS, and JS:

npm test

You can also run each check on its own:

npm run validate npm run eslint npm run stylelint

3. To properly auto-format your HTML, CSS, and JavaScript using https://prettier.io:

npm run prettier

This will reformat and rewrite all the .html, .css, and .js files

4. To check your JavaScript files for errors using https://eslint.org/:

npm run eslint

If youre not sure what an error means, look at the rule name in https://eslint.org/docs/rules/

5. To check your CSS files for errors using https://stylelint.io/:

npm run stylelint

If youre not sure what an error means, look at the rule name in https://stylelint.io/user-guide/rules/

6. To check your HTML for errors using http://html5.validator.nu:

npm run validate

7. To run steps 2-6 above one after another, and prepare your code for submission:

npm run prepare-submission

You can now upload the submission.zip file to Blackboard.