BIT245 Build Static Webpage :

For solution: +610482078788

+61482073403

+61482072848

Assignment 1- Part 1 (a static web page)

In this BIT245 Build Static Webpage assignment you will create a web site. There are 2 parts to the assignment, and you submit both parts at the same time as one assignment.

This document (Part 1) instructs you on how to create one part of that site – a single, static web page named “sponsors.html.

In Part 2 you will create your site’s main page(s) – the dynamic (database driven) part of your site.

The scenario

You hope to make a little money from your site by placing other companies’ advertising on your “sponsors.html” page.

Requirements

1. Build your site from a free (or paid) template that you download from the web. For example, you could download a free site from BootstrapMade.

Note: If the template already has some of the below requirements completed, then that’s good for you; you don’t have to recreate them.

• Name one of the pages in your site sponsors.html and create a link to it. For that page:
  • Create a CSS file named yourName_styles.css and a JavaScript file named yourName_javascript.js to use with sponsors.html. When you write new CSS and JS code, write them into these files. Don’t change the CSS or JS files that come with the template and don’t add code to the template’s CSS or JS files.
  • Include an image in the background of your web page, ensuring it stretches to fill the client viewport and doesn’t scroll with the web page.
  • Your page should contain a header, navigation bar, and footer. Note:
    • Make use of the HTML semantic tags nav, header, footer, and main
    • The header should contain your company’s logo and business name. For the logo, create the image yourself. You could use, for example, a free online Favicon generator, or simply grab a copyright-free image from a site like pixabay.com.
    • Create a navigation bar that sticks to the top of the viewport when the page is scrolled, and that collapses to a button when viewed on hand-held devices. Talk to your teacher if you’d like to create an alternative structure.
    • The navigation bar should contain a link titled “Home”. It will link to the page you create for Part 2 of this assignment.
    • Include in the footer the date you last updated the site, your name paired with the title “Webmaster”, and your business’ contact details.
  • Use your logo for your favicon.
  • Include two fictitious advertisements from the 2 fictitious companies that are “supporting” you:
    • The 1^st advertisement should be an image:

1. Ensure it fills 100% of the width of the browser viewport when the page is viewed on a mobile phone.
   1. Animate it using jQuery. The animation should serve the purpose of bringing the ad to the user’s attention.
      1. Make the image a clickable link to the advertiser’s website.
   1. The 2^nd advertisement should be a video:
      1. Implement it using HTML5 and offer 2 video formats – .mp4 with a fall-back to .webm.
      1. Have the playback controls show over the video.
      1. Below the video place the advertiser’s name/title and make it a hyperlink to the advertiser’s site.
   1. Write new Class, ID, Tag, compound, and pseudo-class rules that redesign the look of your site. (Be sure to write those rules into your yourName_styles.css file).
   1. All text in your page should be styled with a Google font.
   1. Hide any advertising that your web host places on your page.
   1. Ensure your code is error free and warning free by copying and pasting your code into online validators for HTML, CSS, and JavaScript. Note that when using JSLint, you should relax its requirements by ticking the “for browsers” box.
   1. Follow good design principles, such as ensuring your site:
2. Downloads quickly.
3. Is accessible in terms of being screen-reader friendly.
4. Is responsive. That is, that it displays well on phones, tablets, and desktops.

Remember that it is only a single MS Word document that you submit for this whole assignment. Follow the instructions provided in the Assignment Overview regarding this document, and:

• Don’t include a cover page (neither an MS Word or a Melbourne Polytechnic Assignment cover sheet)
• On the first 3 lines of your document, type the URL of your web host account and your login details (user name and password). If these are details you don’t want to share, let your teacher know so that a demonstration via Zoom can be arranged.
• Directly after those, place the full address of your sponsors.html page
• Directly after that, enter the URL for the download page of the template you used.
• Directly after that, include the URLs of any images you used. For example, the site you used for creating your logo or favicon, and the URL for downloading your background images. (Don’t include those images that came with the template you are using)
• Directly after that, create a heading – “Part 1”. Set it to MS Word’s “Heading 1” style.
• Directly after that, insert 3 screenshots- one each from the JavaScript, HTML and CSS validator web sites. Include your system clock and browser URL in the screenshots. They should show that your HTML, CSS, and JS are warning free and error free. There’s no need to show all the code you validated if it won’t all fit into a single screenshot. Do zoom out though so as to show

as much of your code as possible. 50% zoom is appropriate. (Note that there’s no need to validate template or library code).

• Then paste in all the code you created or inserted. Paste the code as plain text, not as screenshots. Also, don’t paste in code from libraries (like Bootstrap) or the code created by the template owners.

Visit:https://auspali.info/

Also visit:https://www.notesnepal.com/archives/767

For solution: +610482078788

+61482073403

+61482072848

For solution:

WhatsApp

+610482078788

+61482073403

+61482072848

[email protected]