A2 – Setup Course Webpage

1. Follow the instructions in the Creating a WebStorm Project With Automatic Upload tutorial.

2. Not all browsers are created equal. In particular, each one implements a different set of HTML elements and CSS features. In addition they don’t all use the same Javascript engine. In a real production environment, you would test the feature that you’ve implement in a web page using the browsers that your clients use. In this course I will be testing your web pages using the Opera browser, therefore you need to download Opera and use it to test your pages. Please download and install Opera now.

3. Create the following directory structure in your WebStorm project where public_html is the name of your project’s root directory. You should not recreate the root directory as it was created when you set up your web server. Name your directories exactly as I have specified below and use only lowercase characters. See the tutorial titled Useful Opera & Webstorm Features for instructions on creating a new directory.

.../public_html/css/
.../public_html/images
.../public_html/javascript/
.../public_html/courses/
.../public_html/courses/csci240/
.../public_html/courses/csci240/css/
.../public_html/courses/csci240/images/
.../public_html/courses/csci240/javascript/

4. Add a file named index.html with the following content to …/public_html/courses/csci240/. Replace the author and date with your name and the current date.

<!-- 
index.html 
Author: Eric McGregor 
Date: December 24, 2017 
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My test page</title>
        <link rel="stylesheet" type="text/css" href="css/csci240.css">
    </head> 
    <body>
        <h1>CSCI-240 Web API Programming</h1>
       
        <script src="javascript/csci240.js"></script>
    </body>
</html>

5. Add a file named csci240.css with the following content to …/public_html/courses/csci240/css/. Replace the author and date with your name and the current date.

/*
 * csci240.css
 *
 * Author: Eric McGregor
 * Date: December 24, 2017
 */

h1 {
    color: red;
}

6. Add a file named csci240.js with the following content to …/public_html/courses/csci240/javascript/. Replace the author and date with your name and the current date.

/*
 * csci240.javascript
 *
 * Author: Eric McGregor
 * Date: December 24, 2017
 */

alert("test successful");
console.log("javascript is running");

7. Test your web page. It should appear like my demo. When your web page loads CSCI-240 Web API Programming should appear in red, a dialog box should appear that displays test successful, and the console should contain a log that reads javascript is running. Be sure to check the console!