Assignment
Instructions
1. Create a Microsoft Word document named "your name - your student number - code and screenshots.docx" and enter details into it as described throughout this document.
2. Create a folder in the top level of the public directory of your Webhost account and name it your given name (e.g. jimmy). Your assignment submission should be in that folder.
3. All pages you create in this assignment should look professional and be interesting or attractive, should be accessible to people with disabilities, and should follow good web design principles, and separate styling and coding into external CSS and JavaScript files.
Section 1 - HTML5, CSS, JavaScript
1. Choose a Business to create a Website for. Before progressing, tell you teacher the name and purpose of your business
2. Create a HTML5 page named "sponsors.html"
3. Your page should be divided into 3 sections - a header, a footer, and a main content area:
a. The header should contain your business logo, business name, and navigation buttons.
i. The navigation buttons should be implemented as CSS buttons. There should be at least 2 buttons - one for the home page which will be the main page you create in Section 2 of this assignment, and one that links back to this page ("sponsors.html")
ii. The logo can be one you make yourself or one that you copy from somewhere. Be sure the image is not copyright protected and be sure to keep the file size as small as possible
b. The main content area should contain the content discussed below here in point 6
c. The footer should contain your business' contact details
And don't forget to use appropriate HTML5 tags for the header, footer, main content area, and navigation bar.
4. The 3 sections described above should be wrapped in a parent div and that div should be centred in the middle of the client's viewport.
5. Place an image in the background of your Webpage. Make it an image that stretches to fill the client's viewport and prevent it from scrolling with the Webpage.
6. Pretend that you have companies paying you to advertise on your site - one that wants to use an image and the other a video:
a. The image you use should not breach copyright laws. Clicking on the image should take the user to that fictitious advertiser's site.
Use CSS or JQuery to animate the image in an attention-grabbing way (such as wiggling on page load, or growing on mouse-over)
b. The video should be implemented using the HTML5
7. Use CSS to alter the font family, font size, and font colours in the Webpage.
8. Create other CSS rules as necessary to demonstrate that you have an understanding of Class, ID and Tag rules.
9. Paste into your MS Word document:
a. The URL of your sponsors page
b. 3 screenshots showing you have run your HTML, CSS, and JavaScript through validators
c. All the code you created (but not the JQuery library), and make sure to clearly identify the code with the filename
Section 2 - Creating a Dynamic Site
Choose either one of these options:
Option A: A WordPress shopping cart site
Option B: A Post Office website that allows customers to search for their post box details
Section 2: Option A. - The WordPress shopping cart site
1. Tell your lecturer the type of business you will set up (e.g. a t-shirt site). Then install the latest stable version of WordPress into the folder you created in Section 1. You should be able to access your WordPress site simply by entering that folder name at the end of your domain name e.g. https://www.yourDomain.net/jimmy
2. Install a shopping cart plugin, such as WooCommerce
3. Modify the default installation with a new theme (e.g. one from the creators of WooCommerce). Use the theme's customisation tools to modify that theme by changing your site's title, text, and colours in some meaningful way.
4. Create a child theme and use it to alter the CSS of your site in some meaningful way (e.g. change the font type for the entire site, or the background colour for the entire site)
5. Offer at least 2 items for sale, and set their prices unrealistically high (e.g. $1000 for a t-shirt) and make it clear to visitors to your site that it isn't open for business yet
6. Set up the payment options for PayPal
a. Restrict sales to Australian customers only
b. Set up postage costs, making it just one price for everyone in Australia
7. Add a new link in your navigation bar to the sponsors page you created in Section 1
8. Set up a "Contact Us" page by using a WordPress plugin. Customers should be able to enter their email address and a message and press send. Their message should arrive in the email account "[email protected]", which has the password "wmpwmpwmp".
9. Install the WordPress SEO plugin by Yoast and have that plugin create your sitemap.xml file
10. Make your site known to Google using your Google Webmaster account
11. Into the Microsoft Word document you created in Section 1, paste the following:
a. The URL of your WordPress home page
b. Screenshots of your Dashboard's WooCommerce (or other shopping cart) settings:
i. Show that you have restricted sales to Australian customers
ii. Show the payment options that you have set up
iii. Show that you have set-up shipping costs
c. Screenshots of your SEO plugin settings
d. 3 Screenshots showing that you have customised your site's parent theme using the theme's inbuilt customisation options. The 1st screenshot should show how the page looks in its default state, the 2nd should show the settings you changed, and the 3rd the page after the change)
e. The contents of your child theme's CSS file and a screenshot showing that you have activated your child theme
f. 2 Screenshots showing the effect your child theme has on your site (that is, one screenshot for before, and one for after)
g. A screenshot of your Google Webmaster account showing that you have "added" your site and your sitemap file.
Section 2: Option B. - Writing PHP and MySQL code
1. Create MySQL code in Notepad (or similar) that would create a database. Use your own given name in the databases name (e.g. jim_abc123databasename) and within that database create a table called kids that contains the records of at least 10 children, giving each a name, gender, date of birth, and parent name.
2. Paste your MySQL tools into the SQL tool in your Webhost's cPanel to create your table. Your Host may have some control over your database name, but be sure to include your given name as part of the database name. [Note that you may want to create a local copy of your database in your WAMP folder to speed up the development and testing of the HTML/PHP/CSS/JS code that follows]
3. Create the following CSS, JavaScript and PHP files and upload them to the folder you created in Section 1:
a) A HTML5 page named "index.html" that:
1. Displays a