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
- Specifications and Project Information
- [Languages] (#languages)
- [Tools] (#tools)
- [Specifications] (#specifications)
==============================
Static Web Mastery Exercise - HTML/CSS
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/
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.
- HTML
- CSS
==============================
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.
- Each card should be an
article
. - Each card should take up 30% of the width of the browser window.
- Each product should contain a
header
element that, itself, contains anh1
element where the product's title will be written. - Each product should have three sections.
- The first section should contain three child block elements.
- The first element contains the product image.
- The second element contains the product description.
- The third element contains the product availability (e.g. "Available" or "Not Available")
- The second section contains product specifications.
- This section should have a header containing the word "Specifications"
- This section should contain two block elements
- The first block element specifies the size.
- The second block element specifies the weight.
- This section should contain a footer.
- The footer contains text stating when the product specifications become invalid.
- The third section contains the product pricing.
- This section should contain a header.
- This section should contain three block elements.
- Each block element contains information about the price for different quantities.
- The entire card has a solid 1px border that is light blue.
- The card title has a dotted 1px border that is light grey.
- The title and product image are centered.
- Notice that the text for the description in the image is justified.
- The text for the product specification details and pricing details is bold.
- The availability element extends the full width of the card, with a dark grey background and yellow text.
==============================