mattbruton / StaticWeb-MasteryExercise-HTML-CSS

NSS Evening Cohort 3 - Static Web - Mastery Exercise

Static Web Mastery Exercise - HTML/CSS

First Mastery Exercise for the Static Web milestone during Evening Cohort 3. Overall goal was to create a website in HTML and CSS that met specfic criteria. Testing overall familiarity with topics covered up until this point.

==============================

• Viewing/Downloading Project
  • To View Hosted Project
  • Installation
  • To Run
• Specifications and Project Information
  • [Languages] (#languages)
  • [Tools] (#tools)
  • [Specifications] (#specifications)

==============================

Viewing/Downloading Project

To View Hosted Project

Static Web Mastery Exercise - HTML/CSS

Installation

Clone the repository from GitHub:

git clone https://github.com/mattbruton/StaticWeb-MasteryExercise-HTML-CSS.git

Navigate to the project from the directory it was cloned into:

cd StaticWeb-MasteryExercise-HTML-CSS/

To Run

If you need a command line http server, to install http-server globally:

npm install http-server -g

Then:

http-server or http-server -p XXXX (the X's represent the port of your choice)

You should now be able to open your browser and type localhost:8080 to view the project.

Specs and Project Information

Languages

1. HTML
2. CSS

Tools

1. Git
2. Atom
3. NPM http-server

Specifications

==============================

Your task is to build a grid of cards for a company's products. Here's the requirements for the basic structure of the cards.

1. Each card should be an article.
2. Each card should take up 30% of the width of the browser window.
3. Each product should contain a header element that, itself, contains an h1 element where the product's title will be written.
4. Each product should have three sections.
5. The first section should contain three child block elements.
   1. The first element contains the product image.
   2. The second element contains the product description.
   3. The third element contains the product availability (e.g. "Available" or "Not Available")
6. The second section contains product specifications.
   1. This section should have a header containing the word "Specifications"
   2. This section should contain two block elements
   3. The first block element specifies the size.
   4. The second block element specifies the weight.
   5. This section should contain a footer.
   6. The footer contains text stating when the product specifications become invalid.
7. The third section contains the product pricing.
   1. This section should contain a header.
   2. This section should contain three block elements.
   3. Each block element contains information about the price for different quantities.

Additional style requirements

1. The entire card has a solid 1px border that is light blue.
2. The card title has a dotted 1px border that is light grey.
3. The title and product image are centered.
4. Notice that the text for the description in the image is justified.
5. The text for the product specification details and pricing details is bold.
6. The availability element extends the full width of the card, with a dark grey background and yellow text.

==============================