Assignment 4: Designing a Travel Website

Assignment 4: Designing a Travel Website
Objectives
• Write and validate an HTML file for a web browser.
• Use web-safe fonts and colors in properly written CSS.
• Create a website with a pleasing appearance and appropriate use of spacing and
colors.
Instructions
Everything should go in a directory called “firstname_lastname_assignmentNo” (where
“No” is the assignment number). No points are associated with this requirement, but if you
don’t do this properly, we will deduct 10 points.
The purpose of this website is to design an attractive page for a place in the world. You are
creating a travel website for a city anywhere in the world. This place can be your
hometown, or it can be a major city that you’ve never visited. You must gather at least three
photos of a place to visit in this city and four links to places to visit. Use one of your photos
for the logo that you’ll be creating.
You’ll see some of my requirements will be the same as past assignments because writing
assignments is hard for me. Please roll with it. :)
Part 1. 15 points.
In this part, you will design a logo for your journal website. Unlike the last assignment, you
will code the logo in HTML. You need to come up with the following:
• 5 points. Name your travel page “Your name visits Adjective City name.” I named mine
“James Church Visits Beautiful Clarksville, TN.”
• 10 points. Make a logo for your journal blog.
– Even though there is minimal need for image editing, you may still need an
image editor.
– 5 points. Find an image that you might use for your blog’s header. Scale and
crop this image to be 960 pixels in width and 250 pixels in height. If you get a
large photo, you can crop it to this size.
– 5 points. You must save the image in PNG or JPEG format. It’s best to use JPEG
format since most images on Unsplash are photographs.
– Store your image in a subfolder named “images”.
Part 2
In this part, you will design your home page. Make this file “index.html”.
• 5 points. Make the body background color to be something other than white.
• 5 points. Set the body width to 60% of the screen.
• 5 points. Set the body margins to “auto”.
Part 2a. 20 points.
All of these parts will go in the “header” tag.
• 5 points. Make the background image of your header tag the image that you found on
Unsplash in step 1. This step will require CSS.
– Using the “height” property, set the height of your header tag to be the height of
your image.
• 3 points. Write the title of your Journal website using the H1 tag.
• 3 points. Change the color of your H1 tag to something that contrasts nicely with your
image. Use your judgment in picking the right color (but you must choose something
other than the body’s background color).
• 3 points. Center the text.
• 2 points. Add an “hr” tag under your logo.
• 4 points. Make the header have rounded corners, set the border size to 5 pixels, set the
border to the same color as your text (which must be different from your background),
set the margins to “auto”, give the text some spacing, and set the width of the header to
be something appropriate based on the length of the text.
Part 2b. 45 points.
All of these parts will go in the “main” tag.
• 5 points. Set the width of the main element to 65% of your screen.
• 5 points. Set the float property to “left”.
• 3 points. Add an “h2” tag describing the best part of your city.
• 3 points. Add some dummy text to your main element.
• 10 points. Add two images. Resize your photos to 800 or fewer pixels wide without
distortion. No resizing is necessary if they are already less than 800 pixels wide. Use
CSS to scale these images to be 100% width with a 3-pixel padding and a 1-pixel solid
border.
• 3 points. Make this box look nice. I was hoping you could play with CSS and make it
look nice. In other words, if you have the bare minimum CSS listed above, you will lose
3 points.
All of these parts will go in the “aside” tag.
• 5 points. Set the aside element’s width to 30% of your screen.
• 5 points. Set the float property to be “right”.
• 6 points. Add an unordered list of links to your sidebar. Give it the “h2” tag, “More
interesting things to see”.
Part 2c. 10 points.
All of these parts will go in the “footer” tag.
• 5 points. Add “Copyright”, the copyright symbol, the current year, and your name.
• 5 points. Make this box rest below all other boxes using the “clear” property.
Turn it in
• I will deduct 20 points for every error and 2 points for every warning when validating
your files. Validating your content before submitting it is critical. Each of your files
should show no warnings and no errors. Here’s the validator link:
https://validator.w3.org/
• Important: Part of web design is that your websites must be readable. I will deduct
points if anything on your page is less than 100% readable. For example, if there is text
on a background and the background makes the text unreadable, I will deduct points.
If an image obstructs text flow, I will deduct points. Finally, I will deduct points if
anything about your page makes it difficult to read the content.
• There are several critical parts of this assignment that (if missing) will automatically
fail the project:
– The page content isn’t as specified in this assignment.
– Using images that aren’t taken by you or in the public domain.
– You need to put your name in the assignment.
• You need to upload one file in the same upload:
– Zip up your folder containing your HTML and image files into a single ZIP file
and upload it.