Home   CGS 2820C
  Web Development
#07 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 two responsive columns.  The portfolio page could contain your own real photos, drawings, thumbnails of projects, items for sale, screen captures of programs...

Use the same nav, masthead and external cascading stylesheet 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.

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 page.
  3. Make sure the <title> tag, <meta> tags and <h1> are changed to be specific to the resume page.
  4. Place the resume content within the <main> element or within a <section> element inside the <body>.
  5. All pages should have the same centered width (but not across entire screen): body {width:1000px; margin:auto ...
  6. Use the same Cascading stylesheet, same masthead, and same navigation inside the <nav> element for your home page, resume, portfolio, newsletter, and contact page.
  7. 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.

This is a Web Development class. By now you must have a website.
If you do not have a website yet, see: See: Domains and Hosting and FTP
Also see: IE-FTP
Your assignment will not be graded if it is not live, on your website.

(Make sure you meet all grading criteria below.)

See below for a sample Responsive Portfolio page:
http://faculty.scf.edu/winterf/0ClassFolders/2820Web/RWD/RWD-Portfolio.htm
https://bradentonwebsitedesign.com/portfolio.htm
Topic Directions Points
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 computer monitor. 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 the img tag attributes in the css, and to use the <figure> and <figcaption> tags somewhere. See these tags below. 10
img attributes
<figure>
<figcaption>
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:
2820Web/RWD/RWD-Portfolio.htm

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.

img {max-width:100%; height:auto;}
section {text-align:center}
figure {display:inline-block; margin:15px; width:300px; text-align:center}


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.

Use the same styles, masthead, and nav as your index.htm
Make sure the viewport is set in the HTML <head> tag.

CSS Code:
/* Define for Mobile first */
body {width:98%}
img {max-width:100%; height:auto;}
section {text-align:center}
figure {display:inline-block; width:300px; text-align:center}
nav ul {list-style-type:none;...
nav li a {display:block;...

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

@media only screen and (min-width:1000px){
body {max-width:1000px}
} /* Close 1000 Med Query */
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 or it does not.
20 responsive html

If the viewport is set and the css and html code is correct --
When viewing on a 360 screen, only one full 300px figure (or 250px figure) will display from left to right, resulting in one column of images.

When viewing on a 720 screen, two full 300px figures can display side by side, resulting in two columns of images.

Use HTML5
<figure>
and
<figcaption>
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 </divs>
No deprecated tags like <center>
No spaces for file or image names
Optimize your images - most should be under 50K.
Validate your file using W3C validator - only valid HTML documents will be graded.
See: http://validator.w3.org/ or 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.

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

Right-click and View Source in FireFox. Errors will show in red.
10 validate

- 10 points for each red error that FireFox 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.

Reminder: Every page should use the same <nav> and be linked to the same external css.
Test on multiple browsers: such as IE, FireFox, Chrome, Safari, Opera. Also try to 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 table 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.
See: FileZilla or IE-FTP
Also see: 0ClassFolders/Common/GoDaddy_FileManager.pdf
But it is far easier and quicker to FTP to your site instead of using a File Manager.

10
Make this page look beautiful!
The root folder of your actual local (USB thumb drive or 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 - All images except possibly favicon.ico go here 
   favicon.ico This is often in the images folder
   index.htm Your Home page (usually must be in lower case)
   portfolio.htm Showcase your work
   resume.htm  
   transcript.htm A transcript page using unordered and ordered list.
   yourSiteName.css Your external stylesheet