Home Page > > Details

Web servers AssignmentHelp With ,Ghostwriter CSS,HTML Programming Assignment,Help With CSS Course AssignmentHelp With Java Programming|Ghostwriter Haskell Programming

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 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
§ 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 servers
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

Contact Us - Email:99515681@qq.com    WeChat:codinghelp
© 2014 www.asgnhelp.com
Programming Assignment Help!