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">
10 viewport
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.

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. You can use the <figure> tag or create a class for a div 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
In the HTML body set:
One <section> containing
two to four <figure>s
each containing an <img src="images/image.jpg" alt="Pic">
each image with a <figcaption>

Or create a class for a div to hold the images.

Notice how the tags are "Nested."
For example:
<section>
<figure>
  <img src="images/image1.jpg" alt="Pic 1">
  <figcaption>Image 1</figcaption>
</figure>
<figure>
  <img src="images/image2.jpg" alt="Pic 2">
  <figcaption>Image 2</figcaption>
</figure>
<figure>
  <img src="images/image3.jpg" alt="Pic 3">
  <figcaption>Image 3</figcaption>
</figure>
</section>
20 responsive html
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/
(The validation will work better when a DOCTYPE definition is provided - see next lesson.)

Optimize your page and your image sizes.
Example: In Photoshop > Save For Web & Devices
See: 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.

Make sure your code meets current HTML standards.

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