My Class Website Stylin
My Class Website - Stylin’
DIRECTIONS:Follow along as you begin making your class website which will showcase all that you have learned this semester. ❏
Launch NetBeans
● Double-click on the NetBeans desktop icon
❏
Open Project
● FILE Menu > Open Project… ● Navigate to COLESTOCK > WEBDEV > my-class-website ● Select ‘Open Project’
❏
Create File for Your Custom CSS
● From the Projects tab: Right-click on css folder > New > Cascading Style Sheet :
Name the file custom ; placing it in project’s css directory:
Select ‘Finish’ Page 1 of 8
❏
Remove Default Comments from Custom Style Sheet
● Select all the text in custom.css (CTRL+A) and remove it (backspace) Before :
After :
❏
Add Custom CSS to Page
● Include custom.css in the page by creating a element within the , placing it after skeleton.css :
❏
Override Baseline Skeleton Styles
● Add CSS rulesets that override the default (“baseline”) styles provided by the Skeleton boilerplate; place the following at the top of the custom.css file:
/* Override Baseline Styles */ *{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } figure { margin-left: 0; margin-right: 0; } img { border-radius: 5px; max-width: 100%; } th:first-child, td:first-child { padding-left: 7px; min-width: 150px; } th:last-child, td:last-child { padding-right: 7px; }
Page 2 of 8
❏
Add Utility Style Classes
● Add utility CSS rulesets to custom.css below the baseline overrides:
/* Utilities */ .u-ct { text-align: center; }
❏
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 page in Google Chrome:
Don’t forget to save frequently (CTRL+S) ❏
Style the Header
● Add the following CSS to the custom.css , after the Utilities, to style the page’s element:
/* Site Styles */ header { background-color: #a1d6da; border-bottom: 2px solid #ce4c48; height: 154px; margin: 0;
Page 3 of 8
}
❏
padding: 0;
Add Class to Center Header Content
● Add a class attribute with the value of u-ct to the element; this utility class will center any content:
❏
Add id to Logo
● Add an id attribute with the value of logo to the element within the :
❏
Style the logo
● Add the following CSS to the custom.css , under Site Styles, to style the logo:
#logo { min-width: 363px; }
❏
Add id to Navigation Bar
● Add an id attribute with the value of navigation to the element: < nav id = "navigation" >
❏
Wrap Navigation’s Unordered List
● Wrap the unordered list within the element with a element in order to apply a c ontainer class to it:
...
❏
Style Navigation Bar
● Add the following CSS to the custom.css , under Site Styles, to style #navigation and its child elements:
#navigation { background-color: #9E3572; } #navigation ul { text-align: center; margin-bottom: 0; } #navigation ul li { display: inline-block; position: relative; margin: 0; } #navigation ul li a { display: inline-block; line-height: 43px;
Page 4 of 8
}
padding: 0 10px; width: 100%; text-decoration: none; text-transform: uppercase; font-size: 15px; color: #ffffff; letter-spacing: 0.05em;
#navigation ul li a:hover { background-color: #800080; color: #ffffff; cursor: pointer; }
❏
Run Project
● Save your project ● Return to your browser and refresh the page ● If successful, you should see this page in Google Chrome:
Notice how the navigation bar and each of its navigation items are now positioned horizontally, side by side ❏
❏
Add id and Container Class to Main
● Add an id attribute with the value of content and a class with the value of container to the <main> element:
Style Main
● Add the following CSS to the custom.css , under Site Styles, to style #content :
<main id = "content" class = "container" >
#content { margin-top: 1.5rem; margin-bottom: 1.5rem; }
❏
Run Project
● Save your project ● Return to your browser and refresh the page ● If successful, you should see this page in Google Chrome:
Page 5 of 8
Notice how <main> now has margin separating it from the navigation bar and how applying the container class has placed the content in the middle, in an area whose width will never exceed 960 pixels wide. ❏
Add Utility Classes to Footer
● Add the u-ct utility style class to :
I WEBDEV > my-class-website > public_html directory on the local (left) side (USB drive) ● Select all the files (CTRL+A) on the local (left) side in FileZilla and drag them into the public_html directory on the remote (right) side; this will overwrite/update the files currently there ● When prompted that ‘ the target file already exists ,’ check ‘ Always use this action ’ and ‘ Apply to current queue only ’; then select ‘ OK ’
❏
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 8 of 8
DIRECTIONS:Follow along as you begin making your class website which will showcase all that you have learned this semester. ❏
Launch NetBeans
● Double-click on the NetBeans desktop icon
❏
Open Project
● FILE Menu > Open Project… ● Navigate to COLESTOCK > WEBDEV > my-class-website ● Select ‘Open Project’
❏
Create File for Your Custom CSS
● From the Projects tab: Right-click on css folder > New > Cascading Style Sheet :
Name the file custom ; placing it in project’s css directory:
Select ‘Finish’ Page 1 of 8
❏
Remove Default Comments from Custom Style Sheet
● Select all the text in custom.css (CTRL+A) and remove it (backspace) Before :
After :
❏
Add Custom CSS to Page
● Include custom.css in the page by creating a element within the , placing it after skeleton.css :
❏
Override Baseline Skeleton Styles
● Add CSS rulesets that override the default (“baseline”) styles provided by the Skeleton boilerplate; place the following at the top of the custom.css file:
/* Override Baseline Styles */ *{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } figure { margin-left: 0; margin-right: 0; } img { border-radius: 5px; max-width: 100%; } th:first-child, td:first-child { padding-left: 7px; min-width: 150px; } th:last-child, td:last-child { padding-right: 7px; }
Page 2 of 8
❏
Add Utility Style Classes
● Add utility CSS rulesets to custom.css below the baseline overrides:
/* Utilities */ .u-ct { text-align: center; }
❏
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 page in Google Chrome:
Don’t forget to save frequently (CTRL+S) ❏
Style the Header
● Add the following CSS to the custom.css , after the Utilities, to style the page’s element:
/* Site Styles */ header { background-color: #a1d6da; border-bottom: 2px solid #ce4c48; height: 154px; margin: 0;
Page 3 of 8
}
❏
padding: 0;
Add Class to Center Header Content
● Add a class attribute with the value of u-ct to the element; this utility class will center any content:
❏
Add id to Logo
● Add an id attribute with the value of logo to the element within the :
❏
Style the logo
● Add the following CSS to the custom.css , under Site Styles, to style the logo:
#logo { min-width: 363px; }
❏
Add id to Navigation Bar
● Add an id attribute with the value of navigation to the element: < nav id = "navigation" >
❏
Wrap Navigation’s Unordered List
● Wrap the unordered list within the element with a element in order to apply a c ontainer class to it:
...
❏
Style Navigation Bar
● Add the following CSS to the custom.css , under Site Styles, to style #navigation and its child elements:
#navigation { background-color: #9E3572; } #navigation ul { text-align: center; margin-bottom: 0; } #navigation ul li { display: inline-block; position: relative; margin: 0; } #navigation ul li a { display: inline-block; line-height: 43px;
Page 4 of 8
}
padding: 0 10px; width: 100%; text-decoration: none; text-transform: uppercase; font-size: 15px; color: #ffffff; letter-spacing: 0.05em;
#navigation ul li a:hover { background-color: #800080; color: #ffffff; cursor: pointer; }
❏
Run Project
● Save your project ● Return to your browser and refresh the page ● If successful, you should see this page in Google Chrome:
Notice how the navigation bar and each of its navigation items are now positioned horizontally, side by side ❏
❏
Add id and Container Class to Main
● Add an id attribute with the value of content and a class with the value of container to the <main> element:
Style Main
● Add the following CSS to the custom.css , under Site Styles, to style #content :
<main id = "content" class = "container" >
#content { margin-top: 1.5rem; margin-bottom: 1.5rem; }
❏
Run Project
● Save your project ● Return to your browser and refresh the page ● If successful, you should see this page in Google Chrome:
Page 5 of 8
Notice how <main> now has margin separating it from the navigation bar and how applying the container class has placed the content in the middle, in an area whose width will never exceed 960 pixels wide. ❏
Add Utility Classes to Footer
● Add the u-ct utility style class to :
I WEBDEV > my-class-website > public_html directory on the local (left) side (USB drive) ● Select all the files (CTRL+A) on the local (left) side in FileZilla and drag them into the public_html directory on the remote (right) side; this will overwrite/update the files currently there ● When prompted that ‘ the target file already exists ,’ check ‘ Always use this action ’ and ‘ Apply to current queue only ’; then select ‘ OK ’
❏
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 8 of 8
