$29
Assignment 1: Design your first email newsletter Solution
Due: see the course outline for a specific date
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:
Header
section
Middle Section
Footer
Section
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.
Page 1 of 6
Instructions
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)
images (subfolder)
css (subfolder)
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 2 of 6
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:
Document width is 580px.
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
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" then attach it to any CSS as follows: font-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
- Border size is 3px
Style
- Border style is dashed
Page 3 of 6
At the end of this step, you should see a similar result to the below image:
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 .
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: http://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 4 of 6
Submit
Name your folder newsLetter_project.
Right-click on the folder and select ‘Send to - Compressed (zipped) folder’.
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
-
meta
-
a
-
title
-
article
-
link
-
br
-
img
-
section
-
nav
-
div
-
h1
-
time
-
span
-
p
CSS
CSS
-
font-family
-
background-color
- margin
-
width
-
overflow
-
vertical-align
-
padding
-
position
-
bottom
-
color
-
text-align
-
right
-
text-align
-
font-size
-
left
-
font-size
-
line-height
-
top
-
margin-top
-
font-height
-
font-family
-
border
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 5 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
At least
At least
Score
30%
60%
90%
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
1
2
3
codes.
Final
0/25
Page 6 of 6
