Description
A local restaurant asked you to design an email newsletter. The newsletter should include the restaurant logo, links to the restaurant website, a poster with coupons attached to the end of it. However, the owner wants the same page design as below:
Now, it is your turn to code the newsletter and achieved a similar result to the suggested design. Anyway, there are steps to follow when coding someone design. In this assignment, you will practice that and learn how to identify layout, and what type of HTML tags and CSS properties to use. Also, those steps can be used in the course term project; you only need to set your design, and then use similar steps to finish your term project. For now, start working in the “Instructions” section.
Header Header Header section sectionsection
Mid dle dle dle Section SectionSection
Footer Footer Footer Footer Section SectionSection
Page 2 of 6
◼ Instructions
o Step one: Set up a project folder:
The restaurant owner provided you with images and logo (All images can be found on the
assignment1_res folder. Download it from D2L under Content → Assignment 1.), and you need to
include them on the final project. So, it is a good idea to create a folder for this project. The HTML
document “.html” should be in the root folder (the main project folder). For extra resources such as
images, create a subfolder called “images”, and for the style sheet files called it “CSS” or “styleSheet”.
By now, your final project folder tree should look like this:
– newsLetter_project (root/main folder)
o images (subfolder)
o css (subfolder)
o Step two: create a page layout using HTML:
Now, you need to figure out how to structure the HTML page layout. Build the layout based on the
design provided to you. Best way to start a layout is:
– First, write the main tags (see the main.html file). Also separate your code using comments when
creating a section, block or item/elements (e.g. a start of header section or here article with image
item/element).
– Second, work in each section or item/element (header, navigation menu, footer). Look closely at
each element structure. For example, the footer has two elements (two coupons), and each
element has content with different style, e.g. the “save 50%” element and the “* valid until
15/10/2018” element have different font sizes. To structure that I would use separate tags, so I
can have more control over elements and be able to change the font size for each element.
After finishing this step, you should have this result:
Page 3 of 6
o Step three: style and format the HTML layout:
Now, you need to use CSS to style your HTML layout. Create a new style sheet file “.css” and you can name it “main.css”. To start styling an HTML layout, I would consider first the position and size of every item for example in the middle section, you can see an image at the bottom-right corner, so I would use CSS property such as position and set right, bottom values to 0xp. After you get every item in its right position, start working on fonts, color, border …etc.
Use these detailed for styling:
o Document width is 580px.
o Left padding or margin should be between 15px to 20px.
o Header section background color is #FFDF6B
o All sections text Color is #333
o Body section background color is #ffcc11
o Font family type: “Shadows Into Light” (link) and here how you can attach to your code. In the head tag add this code:
<link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”><link href=”https://fonts.googleapis.com/css?family=Shadows+Into+Light” rel=”stylesheet”>
then attach it to any CSS as follows: fontfont font-family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive; family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive; family: ‘Shadows Into Light’, cursive; family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive; family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive; family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive; family: ‘Shadows Into Light’, cursive; family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive; family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive;family: ‘Shadows Into Light’, cursive;
Content
logo.png Style
You do not need to style it 🙂 Content
Menu, About us, order now! Style
– Font size is 12px
– Font style is bold
– Border size is 3px Content
♨ HOT Tacos, burritos & quesadillas Style
– Font size is 70px Content
plate.jpg Style
– image width is 300px
– image height is 229px Content
⚑ Lorem’s Tacos
☗ 13106 Lorem Ave.
Lorem CA 2R3 E3B
☎ 403-123-4567 Style
– Font size is 20px
– Font color is #333 Content
Save 50% or 75% Style
– Font size is 60px
– Width is 50% Content
*valid until 15/10/2018 Style
– Font size is 10px
– Width is 75% General Style
– Border size is 3px
– Border style is dashed
Page 4 of 6
At the end of this step, you should see a similar result to the below image:
o Step four: check code errors:
Now, you need to check errors on your code.
– First, check syntax errors, if there is any, fix them.
– Second, look if you have achieved the same result/output of this project, if not. Identify where is the problem for example, if the layout is not on the same order as required, check your HTML code first, then check your CSS code especially the position and display properties.
– If you have tried everything and still not getting a good result, please feel free to email me, and I will be happy to help .
o Step Five: Wrap up your project:
Now, check all project folders and files, make sure they all open fine. Next, zip your main/root folder and only send that zip folder. Here are some links that may help with file formatting:
• How to zip a file in Windows 10: https://www.laptopmag.com/articles/how-to-zip-files-windows-10
• Free file compressor application for Windows: https://www.7-zip.org/download.html
• How to zip a file in Mac: https://www.lifewire.com/how-to-zip-and-unzip-files-and-folders-on-a-mac-2260188
• Free file compressor application for Mac: https://theunarchiver.com/
• How to save a pdf in MS Word document: https://www.bettercloud.com/monitor/the-academy/save-word-doc-pdf/
Please refer to the rubric at the end of this document for evaluation details.
Page 5 of 6
Submit
1. Name your folder newsLetter_project.
2. Right-click on the folder and select ‘Send to -> Compressed (zipped) folder’.
3. Upload the zipped folder to the Assignment 1 Dropbox
◼ Tips: tags and CSS properties you may need to use. Feel free to use any tag that is not listed below:
Tags
Tag
CSS
CSS
– meta
– title
– link
– img
– nav
– h1
– span
– p
– a
– article
– br
– section
– div
– time
– font-family
– width
– padding
– color
– text-align
– font-size
– margin-top
– font-family
– background-color
– overflow
– position
– text-align
– font-size
– line-height
– font-height
– border
– margin
– vertical-align
– bottom
– right
– left
– top
To learn more about any tag, search W3C website.
https://www.w3schools.com/tags/
To learn more about any CSS property, search W3C website:
https://www.w3schools.com/cssref/
Page 6 of 6
Evaluation
This assessment is graded out of 25 points and will be evaluated using the following rubric.
Learners may receive partial scores or zero for unacceptable work.
Complete % of the requirements Marking Component At least 30% At least 60% At least 90% Score
Page layout is structured and organized
1
2
3
The right font applied to all page
0.5
1
2
The right color for both background and font color applied
0.5
1
2
The code compiles with the visual elements
1
2
3
All page items are in the right position
1
2
3
Page style with an external style sheet.
0.5
1
2
HTML symbols are applied
0.5
1
2
Code comments are applied for both HTML and CSS codes.
1
2
3 Final 0/25