Home   CGS 2820C
  Web Development 		#08 Grading Criteria for:
Create a Responsive 2 to 3-column Portfolio using Responsive Website Design (RWD).

Description: Create a new and attractive portfolio (a showcase) page using at least four (4) images and two (2) responsive columns. This means that on a desktop you will see at least two full columns, but on a smart phone you will only see one vertical column of images. No half or partial columns/images will appear as you resize your window. The portfolio page could contain your own real photos, drawings, thumbnails or photos of projects, items for sale, screen captures of programs... to show off the type of work that you can do. Unless, you have a good reason for another name, please name this page: portfolio.htm. The portfolio.htm page will have the same <nav> navigation, <header> masthead/banner and External cascading stylesheet (.css) as your Home page and Resume.
Your <nav> for all pages will eventually contain:
Home | Resume | Portfolio | Newsletter | Contact
(and Transcript if you choose to add it to your nav)

Short Interactive Tutorials:

W3Schools Semantic Structure:

W3Schools RWD Tutorial:

W3Schools RWD Images Tutorial:

W3Schools RWD Nav Tutorial:

W3Schools Templates Tutorial:

W3Schools Formatting Tutorial:

Try It Yourself

Try It Yourself

Try It Yourself

Try It Yourself

Try It Yourself

Try It Yourself

Your portfolio page will have the same <nav> navigation, <header> masthead/banner and external cascading stylesheet (.css) as your Home page and Resume. Use Responsive Website Design (RWD) so that your site is optimized for each device and displays differently on a smartphone and tablet, in Landscape or in Portrait, as well as differently on a desktop PC. This means that as you resize your window the entire image or the entire column is displayed, not just part of the image or part of the column.

Below is one way to save time and also make your pages consistent:
  1. Save your refined index.htm or resume.htm as portolio.htm.
  2. Delete the specific content from the index or resume page.
  3. Make sure the <title> tag, <meta> tags and <h1> are changed to be specific to the portfolio page.
  4. Place the portfolio content within the <main> element inside the <body>.
  5. Use the same External Cascading stylesheet, and the same <header> masthead, <nav> and <footer> for your home page, resume, portfolio, newsletter, and contact page.
  6. In the nav, set the portfolio.htm page as selected.

Positioning:
Absolute positioning: places content relative to the upper-left corner
Relative positioning: relative to current block
Fixed: places background image relative to the upper-left corner but allows the image to stay fixed as the page scrolls
Example1: <img src="images/pic.jpg" style="position:fixed" alt="fixed pic">
Example2: <img src="images/pic.jpg" style="position:fixed; right:20px" alt="fixed">
The above image will be locked in place 20px from the right margin, even as you scroll.

Sizing:

Consider adding this to the top of your CSS stylesheet:
* {box-sizing: border-box;}
/* Add the above line to your Cascading Stylesheet to ensure all elements are sized to include 1. The element or div or container width. 2. Any PADDING in the element or div. 3. Any BORDER around an element. So the result is the total width and height of all three components. This makes it easier to calculate element or div sizes when using PERCENTS when you have two or more elements left to right */
/* For instance: */
/* If aside is 30% and main is 70% both will now be able to fit left to right. */

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.

Examples and HTML Tutorials below

Also see: https://www.w3schools.com/w3css/ and
 https://www.w3schools.com/w3css/w3css_templates.asp
for responsive mobile first design templates.

See below for a sample Responsive Portfolio page:
http://faculty.scf.edu/winters/0ClassFolders/2820Web/RWD/RWD-Portfolio.htm
https://bradentonwebsitedesign.com/portfolio.htm

Responsive Web Design (RWD) Demo and Template (with Pancake)
Basic One-Page Responsive Church site with Pancake and Figure
Also see Favicon Tutorial and Favicon Generator

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

Make sure you MEET ALL GRADING CRITERIA below.
Topic Directions Points
You still need
A unique <title> briefly describing your page
Meta Description: <meta name="description" content="Longer Page Description">
The same Stylesheet: <link href="SiteName.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
 Points
-5
-5
-10
-10
-3
-1
The viewport is the visible area of a web page. It varies with each type of device. It is smaller on a cell phone, and larger on a desktop computer monitor. But it is readable, attractive and properly sized on both devices, whether in Landscape or in Portrait. Add the meta viewport command below under your existing meta tags:
<meta name="viewport" content="width=device-width, initial-scale=1">
"width=device-width" sets the width of the viewport to the width of the device.
"initial-scale=1" sets the initial zoom level when visiting the page.
10 viewport

Viewport is required to make page responsive to various device widths.
There are numerous techniques to build a responsive portfolio. Feel free to do a web search and do it differently than the sample below. Just make sure you understand it. But be sure set responsive img tag attributes in the css, and to use the <figure> and <figcaption> tags somewhere. See these tags below.

Use at least four images and at least two responsive columns		 10
img attributes
<figure>
<figcaption>
(p 120)
The responsive CSS trick to the right is to set the width of the element (in this case the <figure> tag) that holds the images. In this example it is 300px. This will allow up to three images to fit side-by-side if the resolution was 1000px. If you resize the window to 720px, only two images could fit side-by-side. And on a mobile phone in portrait, only one images would fit, as the rest would be stacked underneath the top image.

For a simple live sample see:
Responsive-Portfolio.htm

For two sample student portfolios see:
SamplePortfolio.jpg

Feel free to search for and use another technique. But be sure to test it on a desktop PC and a smartphone.		 Set your CSS up to allow your images to be responsive. BEFORE you start your css media queries, you can use the <figure> tag or create a class for a div or section to hold the images.

body {max-width:1100px; margin:auto; padding:20px}
img {max-width:100%; height:auto;}
section {text-align:center}
figure {display:inline-block; margin:15px; width:320px; text-align:center}

Note1: width:320px will allow for three columns on a 1000px body. But if you want larger images for readability, set the width to about 480px to only allow two columns.

Note2: When you start revising your website and make changes to your external .css cascading stylesheet you may need to tap [Ctrl] + [F5] to refresh your background images and background styles.

Another technique is to define a column1 div and a column2 div. Float column1 div left and float column2 div right for large screens - this displays both columns next to each other. Then use a media query (covered later) without floating left and right, to stack the columns on top of each other for smartphones in portrait view.
 20 responsive css

Add real and relative content. Do not just "do" this assignment. Do it well. This is your Portfolio. See links for samples at left.

All pages have the same CSS. Make your Nav look good!!!

Use the same <header>, <nav> and <footer> for all pages
Make sure the viewport is set in the HTML <head> tag.

CSS Code:
/* Define for Mobile first */
* {box-sizing: border-box}
body {width:98%; margin:auto}
img {max-width:100%; height:auto;}
section {text-align:center}
figure {display:inline-block; width:320px; text-align:center;
margin:5px}
/* margin set to 5px because figure has default 40px margin */
nav ul {list-style-type:none;...
nav li a {display:block;...

@media only screen and (min-width:720px){
nav a {display:inline}
} /* close 720 Media Query */

@media only screen and (min-width:1000px){
body {max-width:1000px}
} /* Close 1000 Media Query */

(p 272-287)

In the HTML body set:
One <section> or <main> containing
two to four properly "nested" <figure>s
each containing an <img src="images/pic.jpg" alt="Pic">
each image with a <figcaption> under it.

For example:
<section> or <main>
<figure>
  <img src="images/pic1.jpg" alt="Pic 1">
  <figcaption>Image 1</figcaption>
</figure>
<figure>
  <img src="images/pic2.jpg" alt="Pic 2">
  <figcaption>Image 2</figcaption>
</figure>
<figure>
  <img src="images/pic3.jpg" alt="Pic 3">
  <figcaption>Image 3</figcaption>
</figure>
</section> or </main>

See: 2820Web/RWD/RWD-Portfolio.htm

NO partial images should display when resizing the browser window! If coded correctly, either an entire image fits and is displayed or it does not show at all.
Also Note: This is your portfolio. Make it look attractive. Try to make your images the same height and width.

Center the contents of container that hold your figures. Consider making a container just for your portfolio called <div id="figureContainer">. That way you do not center the contents of your other pages. Figure out the best way to get this done. Perhaps do a web search or use AI to ask:
"how do I center the images in an html div" (5 points)

20 responsive html
(p 272-287)
Use viewport and
<figure>
<figcaption>

When viewing on a smart phone 360 screen, only one full 320px figure will display from left to right, resulting in one (1) column of images

Center the figure container: -5 points

When viewing on a PC screen, three or four full 320px figures can display side by side, resulting in three or four columns of images. Or two 480px figures will display side by side, with 2 columns. Play with the figure widths for best results.

You will lose points if you use raw photos from a camera which can be 2000 to 4000px and 2 to 4Mb. Large image files will cause your page to load slow.

Be sure to optimize the file size of your images: that is - try to keep the pixel size (width and height) to 1200px or less and the file size to less than 300 or 400K. In most photo editors, like Adobe Photoshop, choose Image > Image Size to resize the width and height in pixels and to optimize your images in byte size (K). In Windows Paint (click Paint from the Windows start button) select the [Home] tab, then click the Resize icon.		 10 Add at least six optimized portfolio images.

-5 for images that are not optimized
Add an attractive and optimized Background Image to your css stylesheet that displays either:
1. In the top banner/masthead/header
OR
2. On your page for the body.

Depending on the size of the image, you may need the add the following code to your selector:
background-repeat:no-repeat; 		Example 1 in css:
header {background-image:url('images/bg.jpg')}

Example 1 in html page:
<header>
 
 <!-- All masthead content comes from .css -->
</header>
OR
Example 2 in css:
body {background-image: url('images/bg.jpg')}

See the section on image positioning at the top of this page.		 10 background img

The background image must be optimized, relevant, attractive and properly spaced.
General Check List:
HTML 5 DOCTYPE
Same attractive Masthead for all pages
Same attractive Nav for all pages
Same Styles for all pages
Centered page, (not content)
Unique <title> for Portfolio
Unique page specific Meta Description
Unique page specific <h1> for heading
Comment for all closing </div>s
No deprecated tags like <center>
 No spaces for file or image names

Optimize your page and your image sizes - you do not want to use a 3000px photo from your smart phone when your page is only 1000px. You also do not want to use a 3MB image when it can be optimized to 30K.
Example: In Photoshop > File > Save For Web & Devices or in other versions:
File > Export > Save For Web

See Crop, Resize, and Optimizing hints at:
OptimizingImages.htm

See testing site: web page Optimizer
 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 > double-click the <link href="yourStyles.css"> link to open your CSS file > hit Refresh or tap F5 to update the file as well. Then refresh your html page. Confirm that you can see your changes in the CSS code.
You may also try a Hard Reload:
[Ctrl] + [F5] Force Hard Reload to display the most recent images, styles and scripts

Validate your file using W3C validator - only valid HTML documents will be graded.
See: http://validator.nu/
HTML 5 validation requires a DOCTYPE definition and encourages the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

The above line sets the Character encoding for the most current version of Unicode, which is a universal character set. As of 2018, it covers 146 scripts or writing systems/alphabets representing 137,439 characters. Be sure to add the language and utf-8 code to ALL of your html pages.
 10 validate

- 10 points for each red error that FireFox View Source shows in red.

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

Make sure your code meets current HTML standards.

Add:
<html lang="en">
3 points out of the 10
Test on multiple browsers: such as Edge, FireFox, Chrome, Safari. Also test on a smart phone.

1. Save your file as portfolio.htm
2. FTP portfolio.htm and your image files to your website.
3. Copy and paste the complete URL address (http://yourDomain/portfolio.htm) into the Message portion of the Canvas Assignment Dropbox] for this assignment.

  		Make your portfolio.htm page look attractive. If you are using images, use at least 4 images (stored in the images folder) that are similar in size and relevant, properly cropped, and clear. Optimize your images - not too large in pixel size; not too large in byte size.

When done, FTP it to your website as well as the pictures which will be stored in the images folder on your website.

All pages must have UNIQUE:
title content, meta description and keywords tags.

You will lose 3 points for each day late.
Your assignment will NOT be graded if it is not live, on your website.

 10
Make this page look beautiful!

Use the same Nav, Header and CSS for all pages.

Rename any auto-style classes to logically named classes.

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:
 images      [Dir] This is a subFolder under the root folder. All images except possibly favicon.ico go here
   favicon.ico This is often in the images folder. See Favicon Tutorial and Favicon Generator
   index.htm Your Home page (usually must be in lower case)
   portfolio.htm Showcase your work as images in at least two responsive columns
   resume.htm Your resume in two columns
   transcript.htm A transcript page using an unordered, an ordered list and a description list
   yourSiteName.css Your external stylesheet