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.
Page 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)
images (subfolder) o 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:
- 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 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 Left padding or margin should be between 15px to 20px.
- 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”> then attach it to any CSS as follows: font-family: ‘Shadows Into Light’, cursive;
|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|
|Style||– image width is 300px
– image height is 229px
|Content||⚑ Lorem’s Tacos ☗ 13106 Lorem Ave.
Lorem CA 2R3 E3B
|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
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 . 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: http://www.7–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.
◼ Tips: tags and CSS properties you may need to use. Feel free to use any tag that is not listed below:
– span – p
– font-height – border