Home   CGS 2820C
  Web Development 		#06 Grading Criteria for:
Create an online two-column Resume and External Stylesheet. Link your resume.htm to index.htm. Link the stylesheet to both pages.

Description:  Use Notepad, the free Notepad ++ or the free VS Code to improve your page and add an External Cascading Stylesheet to index.htm and build a new resume.htm file. Create a very attractive 2 or 3 column professional online Resume with at least 3 major categories, such as: Education and Employment, Certifications, References set as <h2> tags. Use the same masthead/banner <header>, <nav>, <footer> and new External .CSS Stylesheet on both your home page and the new resume.htm page. Make sure your navigation <nav> element links your resume.htm to index.htm and to all your other future pages (portfolio.htm, newsletter.htm, contact.htm), and back.

Your <nav> for all pages will eventually contain:
Home | Resume | Portfolio | Newsletter | Contact

NOTE: Page 445 to 448 has both the stylesheet code and html code that you can use for your website.

Please watch this short 5½ minute video on Inline, Internal, and External Stylesheets:
https://www.youtube.com/watch?v=2P_LUPc2HrM&t=7s

Your web pages must be online and uploaded to your website in order to be graded. Submit your URL/Web address to the assignment dropbox. Our course is Web Page Development, not Desktop Development. I cannot grade multiple webpages (index.htm and resume.htm), multiple images, folders (images), and your .css stylesheet each week unless they are properly uploaded and organized online.

Short Interactive Tutorials:

W3Schools External Styles:

W3Schools Divs Tutorial:

W3Schools Formatting Tutorial:

W3Schools Buttons Tutorial:

W3Schools Box Shadow:

W3Schools Nav Bar Tutorial:

Try It Yourself

Try It Yourself

Try It Yourself

Try It Yourself

Try It Yourself

Try It Yourself

Caution: It is OK if you are reluctant to put your real personal home address and personal phone number on the Web.

I. Your Resume and ALL other pages (Home, Resume, Portfolio, Newsletter, Resume) should be:

  • Full, attractive and professional looking pages, on a college level, with consistent formatting.
  • All pages must use the same External Cascading Stylesheet (see section II. below), the same masthead banner, and the same Navigation.
  • There should no longer be an "Internal" Stylesheet or Inline styles. (Exceptions may be made when a style is unique to a page.)
  • All webpages must be centered on the screen and have the same width, which should not exceed 1200px. This can be done by adding a stylesheet line similar to the line below:
    body {width:1000px; margin:auto, background-color:     ...}
  • Notice how this page is centered on the screen, but it does not display across the entire screen on a wide PC monitor. However, this paragraph and almost all of the text on this page is NOT centered. Do NOT center all of your text and images on your webpage.

II. Create an External Stylesheet from your existing Internal Stylesheet from your previous assignment:

  1. Highlight all the style definition content within your current Internal Stylesheet: That is, highlight everything between the <style> and </style> tags. Do not highlight the <style> tags or any html tags.
    (Your stylesheet must only contain styles, no html tags. That is h1{color:blue} belongs in the stylesheet, but not the actual <h1> and its content, which belongs in the <body>).
  2. Copy all the highlighted content between <style> and </style>. (Ctrl + C, or Edit > Copy)
  3. Open a new document in Notepad, in the free Notepad ++. or in the free Visual Studio Code.
  4. Paste the copied content into the new empty document. (Ctrl + P, or Edit > Paste)
  5. Save the new document as YourSiteName.css
  6. Go back to your webpage and delete everything between <style> and </style>, including the <style> tags.
  7. Add the following code to both index.htm and resume.htm to replace the Internal stylesheet with the new linked External stylesheet:
    <link href="YourSiteName.css" rel="stylesheet" type="text/css">
III. Below is one way to save time and also make your pages consistent:
  1. Save your refined index.htm as resume.htm. You will now have two files, index.htm and resume.htm.
  2. This will allow you to use the same .css Cascading stylesheet, same masthead/banner/header, and same navigation <nav> element for your home page, resume, and future portfolio, newsletter, and contact page.
  3. Replace or delete the specific home page content from index.htm.
  4. Make sure the <title> tag, <meta> tags and <h1> are changed to be specific for the new resume.htm page.
  5. Place your resume content within the <main> and </main> element inside the <body>.
  6. In the end, when you switch from your home page to your resume page, the banner and navigation and header will appear in the same place when displayed in the browser.

There are 3 types of selectors used with cascading stylesheets.
GROUP SELECTORS IN THE ORDER SHOWN BELOW (Existing Tags, IDs, Classes)
1. Existing HTML tags and Elements. Examples: <body> or <h1> or <p> Examples:
Syntax: Tag {property: value; property: value; }
   body {width:1000px; margin:auto} /* center page on screen */
   h1 {font-family:Arial, Helvetica, sans-serif; text-align:center; color:#036} /* dark blue */
   header {background-image:url(images/banner.jpg); background-color:#ccc} /* silver */
   nav {text-align:center; padding:12px; background-color:#FF9} /* light yellow */
   main {color:#009; background-color:#FFF} /* dark blue on white */
   aside {width:25%; color:white; background-color:blue; box-sizing:border-box;}
   section {width:75%; color:white; background-color:blue}
   footer {font-size:.8em; color:#FFF; background-color:#369;} /* white on light blue */

Unless there is an inline style or internal stylesheet to override the properties above, all h1 tags in the website will inherit the properties defined in the External Cascading Stylesheet.

2. ID Selectors are used in a stylesheet to define a division or section on a page. They start with a #, for example:
They should not be reused - that is only use a particular ID one time per page.
Syntax: ID {property: value}
   #wrapper {background-color:#FFF; border: 2px #009 solid} /* dark blue border around content */
   #social {background-color:#FFC} /* used for Facebook, Instagram, Twitter links... */
   #column1{...}
   #topNav {text-align:center; padding:12px; background-color:#FCF}   Use new nav tag
   #leftColumn {width:186px; color:white; background-color:blue}>   Use new aside tag

3. Class Selectors are custom defined styles that may be reused multiple times per page. They start with a period (.) 
Examples:
   .chapterTitle {font-size:28px; font-weight:bold}
   .important {color:red; font-weight:bold}
   .selected {color:#C0C0C0} /* light grey for current page selected in nav */
This class can be used in the nav element body to indicate what page you are on:
  <li><a href="resume.htm"><span class="selected">Resume</span></a></li>

CSS pseudo-elements are used to add special effects to some selectors.
Syntax: selector: pseudo-element {property: value}
Examples of setting pseudo-element values in CSS:
a:hover {color:#F0F}
h1::before {content:url('images/arrow.gif')}
nav a:hover {color:#006} [also a:visited, a:active, a:link (unvisited)]

This is a Web Development class. By now you must have a live online website.
Your assignment will not be graded if it is not live, on your website.

Resume Example and HTML Tutorials

For a sample Resume see:
https://bradentonwebsitedesign.com/resume.htm

For an example of HTML structure and a stylesheet:
CascadingStylesheetDemo.htm

Responsive Web Design (RWD) Demo and Template (with Pancake)

Make sure you MEET ALL GRADING CRITERIA below.
Topic Directions Points
You need
A unique <title> briefly describing your page
Meta Description: <meta name="description" content="Longer Page Description">
Stylesheet: <link href="YourSiteName.css" rel="stylesheet" type="text/css">
The same <nav> <header> <footer> and stylesheet (.css) as your Home page and Resume
A comment for each closing </div>  Example: </div> <!-- close wrapper -->
If you do not have a security certificate your URL/Web address is http://site.com, not https://site.com
You do not need a security certificate. So there is no need to spend the extra money on an SSL.		 Points
-5
-5
-20
-10
-3
-1
All of your pages should now include all of the lines shown in the middle column.
Set the charset (character encoding) as shown.
Include a unique and proper page Title that appears in the Title bar.
Enter an appropriate and unique meta tag for Page Description.
Use the Viewport to set a Responsive Web visible area on mobile and desktop devices.
Link to your external CSS file -- you should no longer have any internal stylesheets or inline styles, unless the style is limited and unique to the page.

Also see:
DivDemo-VerySimpleNav.htm

All text and image and nav and header content belongs in <body>		 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"> <!-- language support -->
 <title>Resume for Your Name</title>
 <meta name="author" content="Your Name">
 <meta name="description" content="Resume for Your Site. Unique Page Description up to 155 characters">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="yourSite.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
 <header>...with site name and/or graphic banner </header>
 <nav>...with hover and selected effect... </nav>
 <main>...main text content and images... </main>
 <footer>... © / phone, style defined in css... </footer>
</div> <!-- /wrapper -->
</body>
</html>		 (You can just copy and paste and edit for your particular page)

Be sure to add:
charset (Goggle it)
meta tags
viewport
css link (p 234)

Make sure you have:
<header>
<main> or <section>
<nav>
<footer>


Link your resume to your existing cascading style sheet.

Use your existing Navigation. ALL pages should be linked through the same <nav>.

Add a pseudo-element to your hyperlinks to give a rollover effect. Example:
selector: pseudo-element {property: value}
nav a:hover {

Make sure you have 3 nav effects:
Unselected (normal)
Hover (a:hover)
Selected (.selected)

Note: The navigation code shown at the right works. But it is very basic. Make your code look and work nice and at a college level. Use your customized styles and colors. All pages will use the same navigation.

Note: You usually open new a window when you go to a new site (target="_blank") so that your site is still up. But do not open a new window when you are on your own site and just going to another webpage on your site.

For a live sample showing the html/css structure, see:
DivDemo-VerySimpleNav.htm

For a sample student Resume see:
SampleResume.jpg

Your stylesheet must only contain styles, not html tags. That is h1{color:blue} belongs in the stylesheet, but not <h1>.

 The <ul> tag is for an Unordered List. But it is often used for navigation. By default, list items <li> are displayed vertically. Display inline allows for horizontal nav for a PC. Display block allows for a vertical nav for a smartphone, which we will see later when we introduce media queries.
Link your stylesheet:
<link href="yourSite.css" rel="stylesheet" type="text/css">
 Be sure to set body attributes in CSS - -
{width:1000px; margin:auto}

Define a nice consistent nav effect in the .css stylesheet, for example:
nav a {
color:blue; background-color:white;
text-decoration:none;} /* no underline */

nav a:hover {
color:white; background-color:blue}

nav nav ul li.selected a {
color:white; background-color:gray}

nav li {display:inline; padding:0px 14px;
list-style:none} /* no bullets */

In the body, use the nav element defined above in your stylesheet:
<nav>
  <ul>
   <li><a href="index.htm">Home</a></li>
   <li><a href="resume.htm"><span class="selected">Resume</span></a>
   </li>
   <li><a href="portfolio.htm">Portfolio</a></li>
   <li><a href="contact.htm">Contact</a></li>
  </ul>
</nav>

Notice the <span class="selected"> for "selected" Resume link above.

All pages (Home, Resume, Portfolio, Contact... ) must have attractive college level content, and a common Masthead, linked to a common Nav (with a rollover/hover effect), and the same CSS file.

20 siteName.css
10 nav with hover and selected effect
(or p 434 class="current" and p 446 nav li a.current )

All pages link to the same "External" Stylesheet. There should no longer be an "Internal" Stylesheet.

All pages must have the same width and must be centered on the screen.

That does not mean you should center the page content on the webpage.

All pages have the same consistent HTML5 Nav

Organize your external css and html consistently for the current HTML5 elements:
<header>
<nav>
<main>
<footer>

This is your resume. Make it look good. See sample links at left
Note: Set your navigation up for Home | Resume | Portfolio | Newsletter | Contact, but make sure you do not change the size of the "hover" or "selected" page link. For instance, if you hover over the Portfolio link and you set the css nav a:hover to bold or a larger font, then Home | Resume will push or bounce to the left and the Newsletter | Contact will bounce to the right. This is unsightly. 10 nav with hover and selected effect
See above
Enter your name, address and email address at the top of your resume.

Note: the proper way to display Florida in an address is FL (not Fl).

Use both an <abbr> and an <address> tag.
Include a working link to your Email address
See examples at right.		 <h1>William Smith</h1>
<address>
Bradenton, FL 34210<br>
<a href="mailto:Me@MySite.Net">Me@MySite.Net</a>
</address>

I am <abbr title="Certified Internet Web Associate">CIW</abbr> certified. 		5 <abbr> (p 53)
5 <address> (p 55)
with mailto:

I am CIW certified.

(Hover over CIW at top. Add a style to abbr selector to make it distinctive.)
Use a 2 or 3 column div or semantic element structure (such as aside and section) with borders. (Alternative HTML techniques may be used.)

Your resume and other pages (Home, Portfolio, Newsletter) should be attractive, college level, and consistent - all pages using the same CSS Stylesheet and same Navigation; all pages formatted in similar fashion.

Note1: The box-sizing property takes into consideration both padding and borders, making it easier to set percents. This can be very handy and makes size calculations much easier.

You can add the following line to set all css elements for box-sizing:

* {box-sizing:border-box;}

Note2: Later, when you code your site for Responsive Web Design, you may use a media query to remove the aside and section widths and the float attribute to allow the <h2>Education</h2> to display on top of its data when viewed on mobile devices.

To REFRESH your browser to see changes:
Tap F5 or the Refresh icon to refresh your HTML code after you upload a revision.
But you also may have to refresh your CSS code.
To refresh your CSS code:
Right-click and choose View Source.
Look for the link to your Cascading Stylesheet in your HTML file. For instance:
<link href="yourSite.css" rel="stylesheet" type="text/css">
Click on the underlined link to open your CSS file online.
Tap F5 or Refresh to refresh your CSS file.

 

 Note1: There are a number of ways to create a nice HTML resume. Feel free use an alternative method, but be sure to meet all the grading criteria.

/* External Stylesheet */
body {width:1000px; margin:auto}
main {border: 2px blue solid}
aside   {width:25%; float:left;
        text-align:right; padding:14px;
        box-sizing:border-box;}
section {width:75%; padding:14px;
        box-sizing:border-box;}

Example of creating columns:
<main>
     <aside>
      <br><br><br>
      <h2>Education</h2>
      <br><br>
      <h2>Work<br>Experience</h2>
      <br>
      </aside>

     <section>
       <h1>Resume for Will Smith</h1>
       <p>2021-23 State College of Florida<br>
       Courses: Web Development, Math</p>
       <p>2018-21 Manatee High School<br>
       Varsity Soccer</p>
        <p>2022-2023 Taco Bell<br>
       Working with the public<br>
       Working the cash register<br>
       Taking inventory</p>
     </section>
</main>

= = =

Another technique for more than two columns:

www.w3schools.com/howto/howto_css_two_columns.asp

 20 2 columns

(or see p 432, 436)

This assignment is about columns.

Two column
Resume Demo
from code at left

Responsive Flexbox
Resume Demo 2

 
External hyperlink and a Local (relative) hyperlink to somewhere on the same site. Add at least one external (absolute) hyperlink to another website, such as SCF.edu -- use target="_blank"
Add local hyperlinks to index.htm, portfolio.htm...		 10 <a href...
with
target="_blank"
Scaled image or a linked logo or a linked button.

Miriam Salpeter, U.S. News & World Report, states that having no photo on your LinkedIn profile may make others assume that you're either "really ugly" or "don't know how to upload a picture."
If a person will not hire you if you are grey haired or bald or ..., why waste your time?		 Insert a Scaled/Responsive .jpg image of yourself or a logo image, with Alt text. Don't just grab the first picture you find; consider a flattering, professional, and well cropped photo.
CSS
img {max-width:100%; height:auto; display: block;}

HTML
<a href="index.htm">
<img src="Logo.gif" alt="Home Page">
</a> 		10 <img
Responsive design dows not use the older img height or width -
so it is responsive for both mobile and desktop devices.

Use Alt tags
(p 99)
Categories
Use an <h2> tag that is customized in your cascading stylesheet so it can be attractively and consistently used for each category (Education, Employment, Certifications, Skills, References...).		 Include at least 3 major categories, such as Education and Employment, Certifications, References as <h2> tags with a distinctive font and color defined in the style sheet.
Add dates where appropriate, all dates listed as most recent first.
Add city or locations where appropriate.
Spell check everything and make everything attractive.
Example of a categories:
<h2>Education</h2>
<p>Education Content Here</p>

<h2>Work Experience</h2>
<p>Employment History Here</p>
 10 categories
<h2>
Reminder: Deprecated (outdated and replaced) tags will not be accepted in this course. Also remember: ALL tags should be in lower case. Do NOT use: <center>, <font>, bgcolor, or <a name="Top">Top</a>
Use instead: <span style="text-align:center; font-family:arial; color:#0FF">
It is far better to use a class in your stylesheet.		 -5 for each use of deprecated tags
Check your code to make sure you do not have any autostyles. Autostyles are inserted by Dreamweaver and Expression Web whenever you format objects through the menu bar or properties sheet. Both editors name each new occurrence as Autosyle1, Autostyle2... These are not descriptive or helpful names. Edit these names so they are renamed .ChapterTitle or .important or... If you use and editor like Expression Web or Dreamweaver it may create .auto-style. Do not use .auto-styles. Right-click any .auto-style1 in the Manage Styles panel (on the right-hand side) and choose Rename to provide a relevant name for every reference to .auto-style1. This will rename it in the internal stylesheet and each time it is referenced as a class. Later cut the style from the internal stylesheet and paste it to the External Cascading Stylesheet that is used for your entire site.

If you cannot see the Manage Styles Panel, choose Panels > Manage Styles or choose Panels > Reset Current Workspace.		 -5 for any autostyles that are not appropriately renamed

Avoid "inline" styles.
There should no longer be an "Internal" Stylesheet.
General Check List:
HTML 5 DOCTYPE
Same professional Masthead for all pages
Same professional Nav for all pages
Same External Cascading Stylesheet for all pages
Centered page on monitor, (do not center all content)
 General Check List:
Unique page specific <title> for Resume -5 pts each
Unique page specific <meta name="description" for Resume
Unique page specific <h1> for Resume heading
Comment for all closing </divs> -5 pts each
No deprecated tags like <center> or <font> -5 pts each
No AutoStyles (double check code before you submit)
No spaces for file or image names

You will lose between 3 to 10 points for any of the items to the left that you overlook.

- 5 points for each error or spelling mistake.

1. Validate and FTP your page to your website.
2. Upload the complete URL address  (http://yourDomain/resume.htm) into the Message portion of the Canvas [Assignment Dropbox]. 		Create your code according to current HTML 5 standards.
Validate your pages. See: https://validator.nu/
Then FTP your file(s) to your website.
This project will not be graded if it is not on the Web.
NOTE: as you make changes to your external CSS file, some browsers may not automatically update your CSS file and therefore may not reflect your most recent changes. To force a CSS update - load your web page then right-click and View Source. Then double-click the <link href="yourStyles.css"> link to open your CSS file. Then hit Refresh or tap F5 to update the CSS file as well. Finally, refresh your html page. Confirm that you can see your changes in the CSS code.

You may also try a Hard Reload:
[Ctrl] + [F5] to Force Hard Reload to display the most recent images, styles and scripts
Preview your page in FireFox, then right click and choose View Source, and look for any errors displayed in red. Hover over flagged errors for hints. -10 points for each error. Note: the html line in red may be OK, but it may be flagged due to an error above it.

Test your site on multiple browsers: such as Edge, FireFox, Chrome, Safari. Also test on your smart phone.

Make sure your finished resume is attractive and complete, fills a full page and will reflect well on your abilities.
The root folder of your actual local C:\Users\UserName\Documents\My Web Sites\YourDomainName and the pubic_html folder in the remote (webserver) website should look now like this:
YourWebSiteName   [Dir] This is your main Folder as seen on drive C - Your image folder and all your .htm files go here
    images     [Dir] This is a subFolder under the root folder (which should be your WebSiteName). All images go here. 
       index.htm Your Home page (usually must be in lower case)
       resume.htm Your resume in two columns
       yourSiteName.css Your external stylesheet