Embedded Files
Essential Question: How can I create a web site using HTML and CSS using a freelance developer spec sheet?
Mastery Objectives:
SWBAT read a freelance developer spec sheet.
SWBAT create an HTML file and CSS style sheet.
SWBAT edit a CSS file sheet according to specifications.
Directions:
Off-Platform Project: Dasmoto's Arts & Crafts
Off-Platform Project: Dasmoto's Arts & Crafts
In this project, you’ll build a simple website for a fictional arts and crafts store using the tools on your own computer. This project will provide you with less guidance than previous projects. You should expect to use the internet, and other resources when you encounter a problem that you cannot easily solve.
This project will require the following:
A folder structure that makes sense for the project
An HTML file
A CSS file
To successfully complete the project, you’ll require the following images:
https://drive.google.com/file/d/1REyuZYOtoIWdOP6tHePaMewgWoQX_1ns/view?usp=drive_link
https://drive.google.com/file/d/1P12Vvvr6FWvSsFn4nPTJnW8HVoiBmJqJ/view?usp=drive_link
https://drive.google.com/file/d/1MyY9IBHpe16-xv8vai70rVxfDBj53KVY/view?usp=drive_link
https://drive.google.com/file/d/1CrObBCtA_HlYtdeu3tGqI3wLJantZidI/view?usp=drive_link
The rest of the page’s styling (font sizes, colors, etc.) is outlined in the following design spec, which is a standard document you’d expect to receive as a freelance web developer. Below is the design spec:
Use the resources to guide you through the project.
This project is intended to be completed on your own computer. To successfully finish the project, make sure to download the images that are linked above. There’s no single, correct way to complete this project, so experiment and have fun!
If you do want more assistance, i.e. read a transcription of the image for more guidance, please continue reading the steps below. Otherwise, you can use the image as a blueprint for your project!
The hint provided in this step is the transcription of the first section of the Dasmoto site’s specifications.
H1 text reads as: “Dasmoto’s Arts & Crafts” and is centered and bolded. The text is laid on top of the 1st image (pattern.jpg).
Some CSS rulesets to include for the H1:
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
The hint provided in this step is the transcription of the second section.
H2 text reads: “Brushes” laid on top of a background colored as mediumspringgreen that spans the entirety of the width of the page.
Some CSS rulesets to include for the H2:
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
+ 2nd image ([`hacksaw.jpeg`](https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg)) is displayed below the H2 and is aligned to the left.
+ H3 element that reads: `“Hacksaw Brushes”` in black and bold and aligned to the left.
+ Some CSS rulesets to include for the H3:
+ `font-family: Helvetica;`
+ P element that reads: `“Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes.”` This text is black and aligned to the left.
+ The text `“Starting at $3.00 / brush”` follows directly after the P element’s sentence `“Available in different sizes”`. And is styled differently:
+ Some CSS rulesets to include for the text:
font-family: Helvetica;
font-weight: bold;
color: blue;
The hint provided in this step is the transcription of the third section.
H2 text reads: “Frames” laid on top of a background colored as light coral that spans the entirety of the width of the page.
Some CSS rulesets to include for the H2:
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
+ 2nd image (`frames.jpeg`) is displayed below the H2 and is aligned to the left.
+ H3 element that reads: `“Art Frames (assorted)”` in black and bold and aligned to the left.
+ Some CSS rulesets to include for the H3:
+ `font-family: Helvetica;`
+ P element that reads: `“Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.”` In black text and aligned to the left.
+ The text `“Starting at $2.00 / frame.”` follows directly after the P element’s sentence `“Select frames can be sanded and painted according to your needs.“`. And is styled differently:
+ Some CSS rulesets to include for the text:
font-family: Helvetica;
font-weight: bold;
color: blue;
The hint provided in this step is the transcription of the fourth and final section.
H2 text reads: “Paint” laid on top of a background colored as skyblue that spans the entirety of the width of the page.
Some CSS rulesets to include for the H2:
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
+ 2nd image (`finnish.jpeg`) is displayed below the H2 and is aligned to the left.
+ H3 element that reads: `“Clean Finnish Paint” `in black and bold and aligned to the left.
+ Some CSS rulesets to include for the H3:
+ `font-family: Helvetica;`
+ P element that reads: ` “Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.”` In black text and aligned to the left.
+ The text `“Starting at $5.00 / tube.”` follows directly after the P element’s sentence `“Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.“`. And is styled differently:
+ Some CSS rulesets to include for the text:
font-family: Helvetica;
font-weight: bold;
color: blue;
What your page should look like:
Page updated
Google Sites
Report abuse