Web servers讲解、辅导CSS、HTML程序语言

- 首页 >> Web


Challenge: Web servers

Creating an Amazon EC2 instance, connecting to it, and displaying a public page is something we

will go through during class. Some of you were may not be able to this going with me during class,

so you can make sure you are able to get this going outside of class and ask for help if you needed

it. Now, I want you to turn it in for grading to make sure everybody is on the same page so we

can move on.

This assignment is intended for you to understand how to create an Amazon EC2 instance,

connecting to it, and displaying a public page.

Essential Requirements:

• The filename should be the proper name to display on the server by default, without having

to type the name in the URL.

• Write and complete the following comment in your HTML document:

<!—

Name:

Pawprint:

Date:

Challenge: Web Servers

-->

• Must be a well-formed HTML5 document that uses CSS for the page design and layout

• DO NOT use Inline CSS

• Make sure your page contains the 5 required tags that were covered in class with an “.html”

extension.

• Do not use frameworks or pre-written “template” pages. Make this assignment by yourself

using the tools already given to you from class and using your own research. If you use online

resources, make sure you reference them.

• Before you submit, your document must pass the validator.

o This includes your home page, skills page and the new “Classes Taken” page.

• Include the additional items to pass the validator at https://validator.w3.org/ by using the

"Validate by File Upload"

o When you are finished writing your code, take your code and run it through the

validator. In order to pass the validation, the validator will ask you to add additional

items. You should add these request(s) to your code. Make sure there are no

warnings or errors with the validator, by receiving the following message:

• “If your document does not fulfill the above requirements the submission will be rejected

and receive a ZERO. This will apply to all assignments in this course”

Challenge: Web servers

2

Requirements:

1. Create an Amazon Linux EC2 instance on Amazon AWS.

a. Make sure you use an Amazon Linux AMI not an Amazon Linux 2 AMI

2. Connect to your EC2 over SSH or FTPS.

3. Upload your entire portfolio site to the server and use the Navbar Bio (challenge 2) as the

home page

a. Upload your entire portfolio site to your public html folder on your amazon EC2

instance using FileZilla or create it in the command line using "vi" just like we did in class

4. Use the navbar you previously built but make some additions to it

a. The navbar will minimally have your name,skills, classestaken, and projects which were

created in previous challenges

b. Make sure the navigation bar is available on every single page and works correctly

5. The navigation bar should stretch across the entire width of any screen.

a. The navigation bar should be fixed to the top, so that if we scroll down the page, we

can still see the navigation bar at all times.

b. The tab associated with the current page being viewed should contain an active class,

this way a user knows what page they are on simply by viewing the navigation bar

c. When hovering over a tab on the navigation bar, there should be some indication that

a user is doing so (font color change, background color change, or some animation).

6. Submit a link to the homepage and submit other items listed below

7. Once you receive your grade, you can leave your instance running. You will be using this

singe instance the rest of the semester. You should have the 12-month free tier and/or the

amazon educate credit so you should not be charged.

Challenge: Web servers

3

a. The 12-month free tier can have one micro-instance running the entire month without

getting charged. You will get messagessaying you almost reached your limit forthe free

tier but it will not go over.

b. If you did by chance go over, you still have the educate credits, therefore it will be rare

for your credit card to get charged, unless you misuse Amazon AWS.

c. In addition, if you terminate your instance, you will have to create it again later for each

assignment.

There are some references on Canvas called “Amazon EC2 References”. If you need help, you

can use these references.

How to submit this Challenge:

• You should submit a link with only your public DNS for your amazon EC2 instance.

• For example: http://ec2-52-205-252-68.compute-1.amazonaws.com

• You should not have to type the path of your file in the browser, you should be able to copy

and paste your public DNS in the browser and it automatically opens up your navbar bio

(challenge2) homepage, as shown in class, and submit a screenshot of your webpage with

the URL in the screenshot as well as the system clock.

• Make sure you use a relative path for the images

▪ If you do not, then when the TAs grade your challenge, the images will not work, and

you will lose points.

▪ You can find an article about relative paths here:

▪ https://www.w3schools.com/html/html_filepaths.asp

Things to submit on Canvas:

• The Link to your instance

o Should be exact copy of the Public DNS from your EC2 instance and nothing else

• A Zip file named <Pawprint>WebServers.zip containing

o The Code used to create your site, should have all the HTML, CSS, and JavaScript

created for the portfolio site, as well as the other code used from previous

challenges, and any updates you made to the code for this challenge.

• Screenshots with your page, the URL, and the System Clock in the screenshots.

Challenge: Web servers

4

o The system clock must have the date and time to be valid

NOTE: To do this, you will have to do two separate submissions. First submit the link by clicking

the "Website URL" tab to the right of the "File Upload" tab. Then paste your DNS into the textbox

and click submit. Then at the top, you will see a big blue button labeled "Re-submit Assignment".

Click the resubmit button and now upload the code as a zip file and all the screenshots. On your

end, it will appear there is only one submission, usually your latest submission, but on our end,

we will see both submissions and have access to both items uploaded.

Bonus: Responsive Navigation Bar

• What is a responsive navigation bar? A responsive navigation baris one that adaptsitsformat

based of a user’s screen size, so that if a screen is small (Mobile phone), it will display an icon

that when tapped, will show the tabs in a vertical stack, or if the screen is large

(laptop/desktop), it will display all tabs in a horizontal row as normal.

• For the bonus and for the regular assignment, you are not allowed to use frameworks or prewritten

code from a template. You must implement this on your own. A score of zero will be

received for using frameworks or 3rd party tools.

• Specifications in order to receive points:

o Desktop (This is what we should see on our laptops/desktops):

§ If you are attempting this bonus, place your name so that it’s on the very left of the

navbar, before all other tabs

• You only need to add your name if you’re doing the bonus

§ Following your name, place the tabs in a horizontal row and make sure they are

visible

§ This is essentially the same as the non-bonus version, but with your name added

o Mobile Phone (This is what we should see on a mobile phone):

§ When the page loads, we should only see your name positioned on the left of the

navbar and an icon indicating user interaction on the right of the navbar.

• You could use what’s commonly referred to as a “hamburger” icon or stacked

bars as your icon

§ When a user presses the icon, a vertical stack of tabs should become visible below

the navbar. When pressed again, it should toggle the tabs and they should be

hidden again.

• Make sure the tabs are still linked to the appropriate pages, so when tapped

it navigates appropriately

Challenge: Web servers

5

§ The vertical tabs and navbar should stretch across the entire width of any screen

o To test the responsiveness of your navbar, there are many ways, below are 3 examples

of which you can try one:

§ Physically copy your DNS and paste it into your phone’s browser

§ Navigate to google chrome > developer tools > click the button with the tablet and

phone at the top left

• Here you can test how it looks on all current mobile devices

§ Using Firefox Developer Edition, click the menu icon at the top right (hamburger

icon) > Web Developer > Responsive Design Mode

• Recommended by Christian

• Remember we are grading your challenge using Chrome, so if you want to use

other tools that is fine, but make sure the page looks good in Chrome.

Note: In order to get full bonus points, you are free to add more functionality to your webpage,

for example include animations in your navbar. The requirements listed above are the minimum

requirements. You are free to build and add more to the project. In fact, extra work is usually

rewarded if you go above and beyond the rest of the class. This will help you,since you are adding

more functionality to your portfolio that will help you impress to potential employers.

Some reference screenshots bellow:

The instance running:

Challenge: Web server

Connecting to the instance:

Default landing page:

Challenge: Web servers

These screenshots may be slightly different than the requirements, if so then follow the

requirements.

Home page:

Challenge: Web servers



站长地图