Assessment 1: Design your first email newsletter

Assessment 1: Design your first email newsletter (25 points)
Due: see course outline for a specific date
A local restaurant asks you to design an email newsletter. The newsletter should include the restaurant
logo, links to the restaurant website, a poster with address and coupons attached to the end to it.
However, the owner wants to go with the design below.
Now, it is your task to code the newsletter and achieves 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 tags and CSS style properties to use. Also, these 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
section
Middle
Section
Footer
Section
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
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 besides on the
design provided to you. Best way to start a layout is:
- First, write the main tags (I already have done that in the main.html file). Also separate your code
using comments when creating a section, block or item/elements such as a start of header
section or here article with image item/element.
- Second work in each section or item/element (header, middle, footer). Look closely at each section
elements structure. For example, the footer has two blocks, which “save 50%” item/element has a
larger font size than the “* valid until 15/10/2018” item/element. So, I would use separate tags, that
would give you more control and enable you to change the font size for each item/element. After
finishing this step, you should have this result:
Page 3 of 6
o Step three: style and format 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 the image is at the bottomright 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 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"
And in CSS add below code to a tag:
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 50px
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 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, check run-time errors, if there is any, fix them.
- Third, 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, 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 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-amac-2260188
• Free file compressor application for Mac: https://theunarchiver.com/
• How to save a pdf in MS Word document: https://www.bettercloud.com/monitor/theacademy/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 choose 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/