Electronic Portfolio Tutorial © Jerry Belch

Day 1

Project Overview

Digital Portfolio Information
  1. Take a look at the article above. It contains excellent information about what should be included in the content of a digital portfolio. It was written by Cory Rubay a Virtual Enterprise teacher. In the Samples page, click on Digital Portfolio. Chapter 1 includes what should be included in a digital portfolio. I followed these guidelines when putting together this assignment. My assignment will focus on using HTML 5 as the program for creating the portfolio. If you are not technically oriented, do not fear. I believe that anyone with basic computer skills can make a digital portfolio using HTML5. There are numerous Step By Steps that I put together on this web site, illustrating the advantages and how to work with the method.

    Our focus here is to create an electronic portfolio using HTML 5 and put the information on a CD or DVD. Templates are supplied for you. All you need to do is to modify it with your information. The assignment should take about 10 hours to complete. The pages in the digital portfolio include the following:

    1. A home or splash page
    2. A cover letter page
    3. A resume page
    4. A page used to post your awards
    5. A work experience/volunteer page
    6. A page featuring samples of your work
    7. letters of recommendation

    Materials Needed
    1. Have downloaded a copy of Notepad++ on your computer
    2. Google's Chrome Browser is recommended as the browser to use for this assignment.
    3. A good digital picture of yourself
    4. Examples of cover letters. Microsoft's Word Program has copies that can be downloaded and modified.
    5. Resume - hard copy or digital copy
    6. Awards you want to include.
    7. Work Samples you created: accounting forms, sales catalog, employee manual, newsletters, web pages, booth set ups, business or marketing presentations.
    8. Letters of recommendation
    9. Make a special folder for all of your portfolio files. All work should be saved in this folder.
    Teacher's Responsibility
    1. Having Notepad++ downloaded onto each students machine
    2. Have available Google's Chrome as a browser.
    3. A copy of Adobe's acrobat reader on your machine
    4. Grading sheet for project and lesson plans for the project. Sample Grading Sheet and Lesson Plans
    5. Or Progress logs

    Day 2

    How to make the home or splash page

    1. The splash page or first page is the key to catching and employers interest. My example contains name address phone number, cell and land line phone numbers, address and email information. They are contained in the header and footer of this document.
    2. A large digital photograph of you should be front and center.
    3. The page should show immediately what kind of job you are applying for.
    4. A graphic that is representative of the type of work applied for is a nice touch
    5. The page should also have a navigational section, to direct the employer to different sections or pages of the portfolio.
    6. The template that you will be working on is shown below.
    7. Let us examine the different sections of the template.
    8. First there is a header which is beige in color.
    9. Next you will see a navigation section on the left. It is a gray color
    10. There is an article section in the middle of the page. It is an off-white color.
    11. On the right-hand side is the aside box and it is a gray color
    12. At the bottom, is the footer and it is beige in color.
    13. This template started out as a flexible box model in html5.
    14. Flexible box models were designed so that they could include many additional features and accommodate a number of devices like cell phones and tablets.
    15. If you end up posting your digital portfolio to a web site, prospective employers could access it on their cell phones and tablets.
    16. When you make the window smaller, each element collapses, but you can see all the information. It is pushed down.
    17. Also, columns collapse and for smaller devices, there is one column instead of 3 or 4.
    18. Once you load the template into Notepad++, drag the right side of the window to the left and watch what happens.
      • Every thing get narrower.
      • The words in the navigational section move downward, but are still readable.
      • If there were information or pictures in the aside and article boxes, they would also get pushed down the page and resized.
      • Eventually the columns collapse down to one column.
    19. The page works with two different files: html and cascading style sheet. The cascading style sheet file tells the browser how to interpret and process the code in the html or main section.
    20. The code for the blank template looks like this.

    21. Position the cursor at the top, left hand corner of the box above. Click the mouse then highlight the code in the box above by dragging the cursor to the end of the document.
    22. Put the html code on your clipboard by pressing CTRL + C
    23. Open Notepad++ - Select File - Click on New - Press CTRL + V to paste the code into Notepad++.
    24. Save it as home.html. in your project folder.

    Getting the cascading style sheet file

    The style sheet file is called at the beginning of the html section between the head tags, <head> </head>. <Link Rel="StyleSheet" Type="text/css" href="DigPort.css"/>> This file tells the main file how to look. It contains formatting codes. We need this file as well as the home page file. A copy of the file is listed below so that you can copy it, paste it into notepad++ and save in your own folder. It is called DigPort.css




  2. Position the cursor at the top, left hand corner of the box above. Click the mouse then highlight the code in the box above by dragging the cursor to the end of the document.
  3. Put the cascading style sheet code on your clipboard by pressing CTRL + C
  4. Paste it into a new file in Notepad++
  5. Save it as DigPort.css.
  6. The style sheet file is quite lengthy.
  7. Three sections are almost identical. Each of the three sections represent the code for either a desktop/laptop computer, a tablet and a cell phone.

Adding your own information for the header
  1. home.html is the name of the first page of your portfolio.
  2. Find the tag <header>.
  3. Then type in your personal information :your name, home phone, your cell phone number and your address. Put the information after the colons and before the ending paragraph tag, </p>.
  4. Save your file as home.html.
  5. Run and launch your application in Chrome.
  6. How does it look? Correct if necessary.

    Here is what a finished copy might look like.


    Example of a finished splash page

    Color changes of the flexible boxes, borders, fonts.
    You may not like the color palette of the page. There are three colors involved. Below is a table, for you to look at, that shows additional colors that you may want for your portfolio.
    Color Possibilities
    Color NameHex Color
    teal#008080
    gray#a9a9a9
    off white#ececea
    blue violet#8a2be2
    orange#ffa500
    black#000000
    blue#0000ff
    red#ff0000
    white#ffffff
    orchid#da70d6
    seashell#fff5ee
    light coral#f08080
    violet#ee82ee
    dark sea green#8fbc8f

    Remember if you use a dark background, you will need to use light colors for text. Conversely, if you have light backgrounds, use dark colors for text.
    1. Open the file and calledDigPort.css. Make sure you match the case of the letters.
    2. Now we want to change the background color of the article flex box.
    Follow these steps to replace colors. Notepad++ has a search and replace feature that makes changing colors and other information very easy.
    1. Make sure that DigPort.css is on your screen.
    2. Position your cursor at the top of the document.
    3. Find the binocular icon on the tool bar for Notepad++ and click on it.
    4. Click on the Find tab
    5. Find What, Type dddd88. This is the current color of the article flex box.
      • Make sure match case and match whole word buttons are unchecked.
      • Search mode is normal. Check button should be on.
      • Direction button has to do with where you are in the document. If your cursor is at the top of the document, then click on down for the direction.
      • Transparency button should reflect On losing focus.
    6. Click on Replace All button.
    7. A message box will pop up telling you that 3 occurrences were replaced.
    8. There are three sections in the DigPort.css file where the background color is defined: one for desktop/laptops another for tablets and the third for cell phones
    9. Click OK
    10. Close the box.
    11. Save your file as DigPort.html
    12. Make sure that you capitalize the D and the P.
    13. Load home.html in Notepad++
    14. Click, Run and launch in chrome to see your color change.
    The footer information

    The footer information in this example will contain email contact information.



    1. Type in your information
    2. After the mailTo:key in your email address
    3. Replace the nameGerald Raines with your name
    4. Change the address to your home address
    5. Save file. Usehome.html as the file name. Remember case matters, so the file name must be in all lower case letters.
    6. Run and launch in Chrome to see this information.

    Article Section
    Adding your digital picture

    Look for the html section and find the article flex box section of your page



    1. Key in the centering tag, <center>
    2. Next we are telling the browser to use a special paragraph tag.
    3. The tag is used to format the job you are looking for. Key in the position that you are interested in.
    4. Key in the name of the file containing your picture followed by it height and width.
    5. Here is an example <img src="your picture file name" height=600 width=500>
    6. Substitute your digital picture's file name for the picfilefilename
    7. Turn centering off. </center>
    8. Save file home.html and test.


    Aside flexible box background

    For your splash page or home page, you might want to put a background image in the aside flexible box. Remember this is the box on the right-hand side of the page. It already has a background image called Lambswool.jpg. Background images can be used instead of background colors to give a different visual impression. Background images are usually small and can be repeated over and over to fill in the area. Other background images available for you are:


    ImageImage name
    Clear Day Bkgrd.jpg
    moneybkgrd.jpg
    paper-linen.jpg
    paper-pinkplaster.jpg
    Lambswool.jpg

    To get a copy of the background image, if you want to change it follow these steps.

    1. Right-Click on the image.
    2. Save image as
    3. Select jpg
    4. Use file name suggested, just remove the two parentheses and the number between them.
    5. Save home.html in the same folder as your digital portfolio

    I used a picture for the template was Lambswool.jpg. Experiment by changing the name of the background image. The section is in the DigPort.css file. See below.

    Once you have decided on your background, you can use the search and replace feature of Notepad++ to substitute your image for the existing one. Make sure that you are changing the DigPort.css file and not the home.html file.

    If for example, you wanted to use the money picture instead of the Lambswool.jpg follow these steps.
    1. Click on the binoculars icon on the Notepad++ tool bar
    2. Click on Find Tab.
    3. Find What Lambswool.jpg
    4. Click on Replace Tab.
    5. Replace with moneybkgrd.jpg
    6. Click Replace All button.
    7. Save home.htmland test.
    8. The Lambswool background should have changed to a bunch of bills- money background
    9. You can use any image as a background image. Just make it small and either repeat the image or not.
    10. Microsoft Paint has a way to resize images. This works well in making your image smaller.
    11. You can, of course, just delete the Lambswool.jpg and key in the name of the background you want.
    12. The Lambswool.jpg appears in the DigPort.css file three times: One for laptop/desktop size screens, one for tablets, and the third for cell phones.

    Formatting of colors

    Colors in web design can be set in a number of ways. We have worked with the hex decimal numbers, the name of the color and now we will look at the red, green, blue selectors for color.You can use the rgb color selectors to set a background color using different amounts or red, green and blue. See the table below for some examples.

    Color Picker program
    RedGreenBlueColor
    144204212light blue
    212144211plum
    212171144beige
    144212146forest green

    In the DigPort.css file in the aside sections,you would type


    background-color:rgb(0,0,255);

    This color is bright blue. You need to key in the statement concerning background-color for all three screen sizes: Each section begins with the - @media screen only statement. Next you need comment out // the lines that call for the background image and the background repeat statement. Remember all three sections

    Save your DigPort.css file then run the home.html file to see the changes. Try this out. Your css file for the aside background should match the code in the box below.



    The line that states background-color:rgb(0,0,255); will give you a blue background in the aside flex box. Did the aside section become a bright blue?


    Opacity and background images

    You can do some interesting things using background images and the location, the number of images, and the transparency of those images. Suppose you want to have a background image repeated a number of times and text that shows through the background image. Let's see how this works. Make the css section of the aside box look like the information below.

    Save the DigPort.cssfile and run home.html. You should see a picture of a man, guy2.jpg, filling in the entire space of the aside flex box. Make the following change. In the line that states background-repeat:repeat;, make the last repeat say repeat-x. Save it and run it. What happened to the image of guy2.jpg? Did the image only repeat horizontally? It should have. Change the x to y and try it the image should just appear vertically down the page. The word Repeat by itself repeats both horizontally and vertically.
    Opacity setting

    Experiment with the opacity setting. Remember that 1.0 gives you the lightest and 0.0 the darkest.


Cover page with cover letter and course description.

The job Description
Instead of just writing out the job description that you had in Virtual Enterprise, we might use the extra power in a digital portfolio and make an audio file explaining each job description. I have made audio files for each job description and all you have to do is change the job title and the audio file name. The following table shows what the different titles are and the name of that audio file that you can use.
Job TitleAudio File Name
Chief Executive Officerceo.mp3
Chief Financial Officercfo.mp3
Vice President of Salesvpsales.mp3
Vice President of Marketingvpmarketing.mp3
Vice President of Advertisingvpadvertising.mp3
Vice President of Human Resourcesvphr.mp3
Vice President of Information Technologyvpit.mp3
Administrative Assistantadm.mp3
Event Plannerep.mp3
Sales Associatesa.mp3
Marketing Associatema.mp3
Advertising Associateaa.mp3
Accounts Payable/Payroll/Accounts Receivableaparpay.mp3
Branch Bankerbanker.mp3
Human Resources Associatehr.mp3
Web Designersweb.mp3

  1. To customize the audio file for your job title follow these instructions:
    • Copy to the clipboard the information above in the text area box.
    • If this is not your job title, change it. Use titles from table above
    • <source src="cfo.mp3" type="audio/mpeg"> is where the audio file name is inserted
    • Find the audio file name for your job description and put the file name in place of cfo.mp3
    • Save file as cover.html and test in a browser.
    • You should see the audio control.
    • Click the play button to hear the job description.

Your completed cover letter page should look like this example. Cover page with cover letter, course description and audio job description

  • If you would rather record your own voice for your digital portfolio, follow these instructions.
    1. You will use the sound recorder program which is found in the accessories group programs in Windows.
    2. Make sure that a microphone is attached or built in to your computer.
    3. Get your script out - the one you want to read into the sound recorder. Job descriptions can be found on our web site at Job Descriptions
    4. Click on the start recording button and speak into the microphone
    5. When finished, stop the recording and save the file in your portfolio folder.
    6. The file format saved when using the sound recorder is wma - Windows Media Audio.
    7. To use the file in your portfolio cover page, you need to convert this file type to MP3.
    8. There are many conversion programs available that do just that.
    9. After converting the program, replace the cfo.mp3 file name with the name of your file. Make sure that it is saved in your portfolio work folder.
    10. Also change the job title to match your job description.
    11. Save and test out by clicking on the play button of the audio controls.
    12. The size of the player is controlled by the DigPort.css file. It sets the player to a size of 30% : #player{ width:30%; }

    Day 4

    Resume

    On this page we will feature your resume and your educational goals. To create this page, follow the instructions below. Converting your existing resume into a pdf.
    1. Load your resume into Microsoft Word.
    2. Highlight the text
    3. Drag the right margin back to 6 on the scale
    4. Use Save AS "Your name resume.pdf"
    5. Make sure you save it in the portfolio folder with the rest of your work.


  • Put a copy of resume.html on the clipboard. The code is in the box above.
  • Open Notepad++
  • Start a new file.
  • Paste the contents of the clipboard into Notepad++.
  • Save the file as resume.html. This is the template file for this page.
  • Copy and paste the information for the header and footer. Use one of the other completed pages for information needed.
  • Scroll down to the article section and just after the <center> tag, type <iframe src="Your Name Resume.pdf" height=900 width=600 frameborder=0></iframe>
  • Your Name Resume.pdf is what you call your resume after it has been converted to a pdf file The file name should have an .pdf extension after the name of the file.
  • Save your resume page as resume.html and test it out.

    Aside flexbox information
    In the aside box we need to list your educational goals. Next to each <li> key in one of your goals. If you are still in high school the first goal might be "To graduate from high school". the <li> are lists. A bulleted list is established. Another goal might be to attend a community college. Another to major in ____. Another might be to attend a four-year college. The purpose of this section is for your employer to see how your working for them fits into your educational plan.
    I feel these educational goals are important for me

    Next to each <li> key in why the educational goals set out in the section above are important to you. You might say I have always had an in interest business, or I enjoy working with numbers, coding web pages is rewarding, or I enjoy working with people and persuading them to buy products or services. Save your file as resume.html Here is an example of a finished resume page
    Completed Resume page

    Day 5

    Work Experience article1 and article 2

    This page of your digital portfolio is designed to showcase your work experience. Even if you do not have any paid work experience, I know many of your have volunteered, done intern-ships, etc. Baby sitting or gardening for an individual will work nicely here.

    Get a copy of this page using the information in the box below.



    This page. It is called work.html Copy and paste the information for the work experience page into Notepad++. Save it as work.html Copy and paste the header and footer information from another page.
    The page is formatted at this time to show two different jobs. There are two article flex boxes. One for each job. For each job, just before the job responsibility section, write a paragraph describing the jobs. Under job responsibilities enumerate the things you did on the job. The list tag works nicely for this kind of information. Next to each <li> list a responsibility. You can make as many of these list items as needed or delete some of them.

    Here is an example of a completed page for work experience showing the header, footer and both article boxes.


    Key for this section of work experience page.
    Aside
    I used the aside flex box to describe the businesses that I worked for. I put in a picture of each business and also created a place to make a link to their company web page. An unordered list was created with the <ul>. An ending tag is also necessary after listing each item ,</ul>. Each list item <li> is designed to describe product or services of each business.


    Here is an example of a completed work experience web page.

    Save your file as work.html

    Day 6

    Awards

    This page is used to feature your accomplishments in school. I designed the article section to feature certificates earned that would relate to getting a job. The aside section is for additional awards, like athletic letters, ASB positions, clubs you participated in, etc.

    The code for the awards.html template is listed below. Use copy and paste to create an awards.html file in your own folder.

    Copy and paste the information in the header and footer into the document and save it as awards.html The portion that we will be working with appears below.

    1. First we need to decide which certificate to feature. There is an overall Virtual Enterprise certificate and individual certificates earned in certain departments. I used the accounting certificate, since the goal of our fictitious student is to obtain a job doing accounting.
    2. We need to obtain a digital copy of our certificate.
    3. A digital copy of the accounting certificate can be found at janetbelch.com
    4. The certificate is a Microsoft Word document and it is located on page 11 of the teacher's manual.
    5. Ask your teacher for digital copies of certificates you have earned.
    6. If none are available, then scan them.
    7. Convert it to a .pdf Adobe Acrobat file.
    8. Some scanners give you the scanned output as a pdf file.
    9. Find the beginning and ending article tags
    10. Insert the following line between the tags, just after the word Certificates
    11. <iframe src="Virtual Enterprise Accounting Certificate.pdf" height=900 width=570 frameborder=0></iframe>
    12. Substitute the name of your file where it saysVirtual Enterprise Accounting Certificate.pdf
    13. You may have to adjust the height and width dimensions so that the certificate looks good on the page.
    14. Save file as awards.html
    15. Test it our using Chrome.
    16. Your page should look something like this:
    17. This page features the accounting certificate as an example. Awards

    Additional awards

    The aside section is designated for the place to list all other kinds of awards, like athletic letters, scholarship awards, HS diploma, clubs, leadership. The placement of this information is in the awards.html file.Follow these steps to put in your personal information.

    1. Load awards.html.css page into Notepad++
    2. The information below puts a canvas element into the aside flex box. It makes a drawing area of 193 pixels by 500 pixels with a dotted black border.

    3. Now it is time to make some changes in the DigPort,css file

    4. This may look a little strange to you. It is a javaScript function that provides the designer a canvas to draw an put text on.
    5. We are not going to go into this code, just suffice it to say that it places the two red triangles in the top of the aside flex box.
    6. The part we need to be concerned with is the text.
    7. Here is where we will list our awards.
    8. There are 4 lines set aside to list your accomplishments.
    9. The lines look like ctx.fillText("",15,60);
    10. We want to list the awards between the quotation marks.
    11. If for example your lettered in football, your line might look like ctx.fillText("Lettered in Varsity Football",15,50);
    12. The numbers indicate the horizontal and vertical placement in the canvas element.
    13. The 15 is the horizontal placement and the other numbers indicate vertical placement.
    14. You may add more lines or delete some lines.
    15. If you add lines begin horizontal placement at 15 and adjust vertical alignment by 40.
    16. Save your file as awards/html and test it out.
    17. Your final version might look something like this Awards

    Day 7 & 8

    Work Samples

    The purpose of this section of your digital portfolio is to show prospective employers samples of your class work. There are certain highlight assignments in Virtual Enterprise: sales catalog, employee manuals, video commercials, newsletters, financial statements and forms,how your company is organized, web page design, Internet commercials, How inventory is handled, booth set up, sales techniques, etc. The example I used was for a person in the accounting department.

    To see my final version, click on the link below. I used the article sections for an income statement, a balance sheet a payroll spreadsheet and a break-even analysis. In the aside section I put in a jpg of a video camera and made links to two videos: One on how to use a general ledger program, and the other on how to do a cash flow analysis. I used Camtasia software to create these. It is a great tool to capture what is happening on your computer screen, click by click. Examples of videos might include: video of business plan presentation, Marketing plan, salesmanship at the booth, presentations given to service clubs and organizations. An audio track is easily added. The last I checked it was $179.00 education price. It is easy to upload your work to Camtasia's web site called ScreenCast. You can also link to UTube.


    Samples Key
    1. To begin, load samples.html template into Notepad ++
    2. The template, contains two article sections,and a aside box along with header and footer boxes.
    3. Copy and paste your header and footer information from one of your other pages into the template, save it as samples.html> and test it out.
    4. Decide what work samples you want to use: pictures, text documents, videos, audio clips.
    5. Convert word or text material into pdf file extensions as in other pages.
    6. Below is an example of the code used to display the documents inside the iframe tags.
      • Put the name of your pdf file inside the quotation marks.
      • Adjust the height and width of the iframe. You can use pixels or percentages
      • Experiment by running the page and see how it looks.
      • Inside the h1 tags, I put the text Work Samples
      • I used the h3 heading tags for the specific name of the work sample.


    Day 9:

    Letters of Recommendation

    This page is used to feature two letters of recommendation. I used the example of a supervisor at work and a high school counsellor. Choose any letters you wish to feature on your digital portfolio. Make sure that they are adults, not friends and a person who is in a position to evaluate you as a person and or worker.

    1. First determine which two letters you want to use.
    2. They need to be converted to a pdf file format.
    3. If you do not have a digital copy of the letter, you can scan them and publish them as a pdf file.
    4. You could also type the letter into a word processing program that has the capabilities of saving as a pdf file.
    5. Copy and paste the file listed below called letters.html into Notepad++.
    6. Save and test
    7. Copy and paste your personal information into the header and address sections of the page.
    8. Change the green lettering if you are using not using letters from a supervisor or counsellor.
    9. Key in the name of the .pdf file between the quotations marks in each article section.
    10. Specify the height and width of the letter in pixels or percentages.
    11. Save as letters.html
    12. Test it out.
    13. Find the aside section and key in the file name of your picture between the quotation marks.
    14. Remember, you used your picture on the home page.
    15. Adjust the height and width so that the picture fits inside the aside flex box.
    16. Save as letters.html
    17. Run it in the browser.

    Here is and example of a completed letters of recommendation page. Letters key

    Day 10

    Burning a Portfolio DVD.

    Your digital portfolio can be distributed in a number of ways.

    1. You could have a stand alone web site with a link to your digital portfolio.
    2. Your portfolio could be accessed by a link on your VD company web site.
    3. Your company could make a special web site dedicated to all students' digital portfolios.
    4. You could submit your portfolio information to a job search company and have them feature it on their web site.
    5. You could email prospective employers and have a link to your digital portfolio.
    6. You could burn a CD or DVD and send it to prospective employers. This is the method that we will explain here.

    What you need to do to create a digital portfolio on a DVD
    1. First verify that all items needed are in your portfolio folder that you created at the beginning assignment
    2. Go through all pages: home, cover letter, resume, work experience, awards, work samples and letters of recommendation.
    3. The most commonly used DVD is the DVD-R format
    4. Here are the instructions for making a DVD with your digital portfolio using Windows Explorer- live file system
      • If your computer has a CD or DVD burner, you can copy file to a writeable disc.
      • Insert writeable DVD-R disk into drive.
      • Auto play box should appear.
      • Click Burn files to disk using Windows Explorer.
      • If auto play does not appear, click Start button, click on Computer and double click the disc burner.
      • In the burn a disc display box, type a name for the disc in the disc title box.
      • Click on like a flash drive button.
      • Click Next
      • The disk will be formatted. When the formatting is completed, a an empty disc folder opens.
      • Open the folder that contains the files that you want to burn, and then drag or paste them into this folder.
      • To select more than one item, press and hold the CRTL key and click the files you want burned to the disc.
      • They will be copied to the disk.
      • You could also drag the entire folder over since you will need all items in the folder for your portfolio.
      • Close the disc session to finalize the DVD of CD.
      • Eject the disc.
      • There a number of other ways to burn a CD or DVD with your portfolio files.
    5. You will want to include some instructions for your prospective employers when you send them the disc.
      • Insert the DVD or CD into the drive
      • Open folder to view files.
      • If a folder was copied over, instead of just the individual files, Open it
      • Double click on Home.html

    Step by Step Tutorial Written by Jerry Belch