My Class Website Getting Started
My Class Website - Getting Started
DIRECTIONS:Follow along as you begin making your class website which will showcase all that you have learned this semester. ❏
Download and Extract Project Files
● Download project files from class website; move to USB drive ● Extract files under the COLESTOCK > WEBDEV directory:
Once extracted, your directory tree should look like this:
❏
Launch NetBeans
● Double-click on the NetBeans desktop icon
❏
Create a New Project in NetBeans from Existing Sources
● FILE Menu > New Project... > Select ‘HTML5’ Category > Select ‘ HTML5 Application with Existing Sources ’
Page 1 of 6
● Click ‘Next’ ● Set the name and location of your project:
○ Site Root : Browse to COLESTOCK\WEBDEV\my-class-website\public_html on your USB/Flash drive ○ Project Name : My Class Website ○ Project Directory : Browse to COLESTOCK\WEBDEV\my-class-website ● Click ‘Finish’ ❏
Verify Project
● Expand the Site Root as well as the folder beneath it to verify that your project contains all the necessary project resources:
Page 2 of 6
❏
Create the Home Page
● FILE Menu > New File... > Select ‘HTML5’ Category > Select ‘ HTML File ’ under File Types > Click ‘Next’ ● Specify Name and Location ○ File Name : index
● Select ‘Finish’ ● Verify Project Files:
❏
Set Project Properties
● Right-click on Project > Select ‘Properties’:
● Select the ‘Run’ Category and set the following: Page 3 of 6
○ Browser : Chrome ○ Start File : index.html ○ Web Root :/
● Select ‘OK’ ❏
Run Project
● Do one of the following to run the My Class Website project: ○ Press F6 ○ RUN Menu > Run Project (My Class Website) ○ Press the Green Arrow in the Menu Bar ● If successful, you should see this crude page in Google Chrome:
❏
Replace Boilerplate
● Replace the boilerplate that NetBeans provides you in index.html with the basic one provided below:
Page 4 of 6
REPLACE: TODO supply a title <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > TODO write content
With THIS: <main>
❏
Update the Title
● Place the following between the opening and closing tags of the title element: My Class Website | First Name Last Initial
❏
Add a Favicon
● Add the following HTML inside the element
❏
Test Your Page
● Run the project; at this point you should see this:
❏
Add Metadata
● Add meta tags to the of your document, under title :
<meta charset = "UTF-8" > <meta name = "description" content = "My awesome class website" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
Page 5 of 6
❏
FTP your Project using FileZilla to your Class Website
● Save your project (CTRL+S) ● Launch FileZilla and login using: ○ Host: www.ahstech.net ○ Username: Student ID # ○ Password: 6-digit birthday
● Click ‘Quickconnect’ ❏
Copy Project to Class Website
● Double-click the public_html directory to navigate inside of it ● Copy everything from w ithin the COLESTOCK > WEBDEV > my-class-website > public_html directory on the local (left) side by dragging it into the public_html directory on the remote (right) side:
( Note : You can use the CTRL+A shortcut to select all the files) ❏
Test Website in Browser
● Test by visiting your website using Google Chrome: http://www.ahstech.net/~XXXXXXX/ (where the Xs represent your Student ID #)
❏
Close the Project
● FILE Menu > Close
Page 6 of 6
DIRECTIONS:Follow along as you begin making your class website which will showcase all that you have learned this semester. ❏
Download and Extract Project Files
● Download project files from class website; move to USB drive ● Extract files under the COLESTOCK > WEBDEV directory:
Once extracted, your directory tree should look like this:
❏
Launch NetBeans
● Double-click on the NetBeans desktop icon
❏
Create a New Project in NetBeans from Existing Sources
● FILE Menu > New Project... > Select ‘HTML5’ Category > Select ‘ HTML5 Application with Existing Sources ’
Page 1 of 6
● Click ‘Next’ ● Set the name and location of your project:
○ Site Root : Browse to COLESTOCK\WEBDEV\my-class-website\public_html on your USB/Flash drive ○ Project Name : My Class Website ○ Project Directory : Browse to COLESTOCK\WEBDEV\my-class-website ● Click ‘Finish’ ❏
Verify Project
● Expand the Site Root as well as the folder beneath it to verify that your project contains all the necessary project resources:
Page 2 of 6
❏
Create the Home Page
● FILE Menu > New File... > Select ‘HTML5’ Category > Select ‘ HTML File ’ under File Types > Click ‘Next’ ● Specify Name and Location ○ File Name : index
● Select ‘Finish’ ● Verify Project Files:
❏
Set Project Properties
● Right-click on Project > Select ‘Properties’:
● Select the ‘Run’ Category and set the following: Page 3 of 6
○ Browser : Chrome ○ Start File : index.html ○ Web Root :/
● Select ‘OK’ ❏
Run Project
● Do one of the following to run the My Class Website project: ○ Press F6 ○ RUN Menu > Run Project (My Class Website) ○ Press the Green Arrow in the Menu Bar ● If successful, you should see this crude page in Google Chrome:
❏
Replace Boilerplate
● Replace the boilerplate that NetBeans provides you in index.html with the basic one provided below:
Page 4 of 6
REPLACE: TODO supply a title <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > TODO write content
With THIS: <main>
❏
Update the Title
● Place the following between the opening and closing tags of the title element: My Class Website | First Name Last Initial
❏
Add a Favicon
● Add the following HTML inside the element
❏
Test Your Page
● Run the project; at this point you should see this:
❏
Add Metadata
● Add meta tags to the of your document, under title :
<meta charset = "UTF-8" > <meta name = "description" content = "My awesome class website" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
Page 5 of 6
❏
FTP your Project using FileZilla to your Class Website
● Save your project (CTRL+S) ● Launch FileZilla and login using: ○ Host: www.ahstech.net ○ Username: Student ID # ○ Password: 6-digit birthday
● Click ‘Quickconnect’ ❏
Copy Project to Class Website
● Double-click the public_html directory to navigate inside of it ● Copy everything from w ithin the COLESTOCK > WEBDEV > my-class-website > public_html directory on the local (left) side by dragging it into the public_html directory on the remote (right) side:
( Note : You can use the CTRL+A shortcut to select all the files) ❏
Test Website in Browser
● Test by visiting your website using Google Chrome: http://www.ahstech.net/~XXXXXXX/ (where the Xs represent your Student ID #)
❏
Close the Project
● FILE Menu > Close
Page 6 of 6
