Scribd
Upload
5 views5 pages

Assignment1 cgs3066

Uploaded by

malikmalikayaan99
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views5 pages

Assignment1 cgs3066

Uploaded by

malikmalikayaan99
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Assignment  - Rebuild FSU’s Homepage

Due Date: 11:59 PM on Feb 22, 2018


For this assignment, you’ll deconstruct an existing web page (www.fsu.edu) and rebuild it. Don’t worry
if the links don’t go anywhere or about the sliding menus at the top. e goal is to start thinking about how
elements get placed on the page and roughly how they get styled and aligned. For some of you, this may be
the first time you’ve actually tried to “build” something in HTML.
Using the browser’s developer tools (right clicking something on the page and clicking “inspect element”
will get you there) and the page source will be your best friend. You won’t understand everything there, but
it will help you get a sense of what HTML elements to use and how CSS rules can be used to style each
element.

1 Assignment Description
In this assignment you should build the http://www.fsu.edu homepage. e goal is to create a webpage that
looks very similar to FSU’s homepage. For this assignment, we don’t care about the dynamic behavior of your
web page. Focus on the HTML elements to use, positioning and layout of HTML elements and styling
them to match the original web page, using what you have learned so far in this course. Here are a couple of
tips for you to make things easier.

• Start with creating the structure and layout of the page. For instance, you can see see that the page
contains a maroon header and footer and everything else is the main content.

• First try to create the HTML element and then try to fix the position and style

• Often, there are multiple ways to create and style an element that you want. Be creative!

• DON’T BE A PERFECTIONIST! You’re just trying to make it look like www.fsu.edu, not actually
function like it and it doesn’t have to be spaced exactly the same way to the pixel.

• USE GOOGLE! You’ll probably run into roadblocks where you can’t figure out how to do something
so do what all good developers do… Google it!

• If you’re frustrated with trying to get things look the way you want, maybe I’ll be able to help you.
Come see me during the office hours.

• In general, do as much on your own as you can before relying on the developer tools (or viewing the
page’s source code) to help you along.

• REMEMBER, you should be able to explain every single line of the code you submit, if you were
asked to do so. Keep it simple!
1
2 Grading
is assignment has a total of 120 points of which, 20 points is a bonus. Basically, if you complete all of the
sections mentioned below and they look very similar to the original website, then you’ll get the full credit
for this assignment(100 points) plus 20 points which will be counted towards your final grade in this course.
Here is a breakdown of the points for each section of the web page.

2.1 Header (11 points)

e header includes the maroon colored section at the top, the FSU logo and the FLORIDA STATE
UNIVERSITY title right underneath the logo. You DON’T need to include the 3 icons at the top right
corner of the page.

2.2 Main Horizontal Navigation Bar (11 points)

is includes the 7 navigation links right under the header section. I don’t care where do these links refer
to, but make sure that they are actual links and that they look similar to the FSU’s homepage.

2.3 Content Section 1 (11 points)

2
is includes the big picture and the text right next to it on the right hand side. Make sure you take care
of text alignment and the links.

2.4 Content Section 2 (11 points)

is includes the small paragraph and the links on the left as well as 5 small images with associated text
positioned below each of them.

2.5 Content Section 3 (11 points)

is includes the Florida Seal image and a paragraph on its right. Also there is another piece of text on the
right which needs some formatting.

2.6 Content Section 4 (11 points)

3
is section has a light gold background with two columns of links on the left and a video in the middle.
You can replace the video with an image of the same size. Also don’t forget the academic calendar section
on the right.

2.7 Content Section 5 (11 points)

In this section we have 3 paragraphs with headings and equal width.

2.8 Content Section 6 (11 points)

6 columns of links to different pages of the website. Don’t worry about the actual address each link should
refer to. As long as they are actual links and they look the same as the original website, it is fine.

2.9 Content Section 7 (11 points)

is is probably the easiest part. A simple paragraph with a few styling requirements.

2.10 Footer (11 points)

is includes the maroon section at the bottom of the page. You DON’T need to include the social media
icons at the bottom right corner.

4
2.11 Code Validation (10 points)

As we discussed in the class, you may sometimes write invalid HTML code which shows fine in a browser.
But that doesn’t mean your code is correct. In order to make sure your code is valid, I will use https://validator.w3.org/
to check if your HTML and CSS code is valid. You’ll get the full 10 points only if your code is error-free.
You can use the same service to check your HTML and CSS code before submission.

3 Submitting the Assignment


For your convenience I have created the sample folder structure for this assignment submission. You can
download it from http://ww2.cs.fsu.edu/ faizian/cgs3066/resources/assignment1.zip Once you unzip this
file, you will have a folder called assignment1. Inside this folder there is an index.html file which you should
use to write your HTML code in it. Don’t forget to put your full name as a comment in the second line of this file.
Also there are 2 folders named css and img. Inside the css folder there is a file called style.css which is the
file that you should use to write your css rules in. Besides, all images that you will need for this project are
already in the img folder.
Once you complete your assignment, make sure that you haven’t changed the folder structure and that
you have the style.css file that contains all your css rules in the css folder as well as the index.html file in the
root(assignment1) folder. en zip the assignment1 folder and submit it through Canvas.
You should submit this assignment by 11:59 pm on ursday, Feb 22 2018. Late assignment submission
policies mentioned in the syllabus will be applied after this time.

You might also like