• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!


Step-by-Step Directions for ePortfolio

Page history last edited by Janice Wilson Butler 10 years, 3 months ago


How to Create Your ePortfolio Framework using PBWorks


Click here to go to Steps 7-12  >>>

These directions will show you how to set up and populate your ePortfolio with the page framework, artifacts and reflections from your coursework.  All the source code that you need can be found by clicking on the appropriate link found at the bottom of this page.  The detailed directions to competing your ePortfolio follow the links.



Step 1: Setting up a wiki or adding pages to an already created wiki for your ePortfolio


Go to https://plans.pbworks.com/academic to create an educational wiki for your ePortfolio. We recommend that you start with a free wiki and upgrade later if you find that you need more features.


Please note: If you already have a wiki that you use, you may use it for your ePortfolio rather than creating a new wiki.  If you are going to use a wiki you have already created, begin by creating a new page that will serve as the home page for your ePortfolio. Name the new page, "My ePortfolio" or "Your Name's ePortfolio."


For directions on how to create and use a wiki, the following resources are helpful:



The following link takes you to a pretty comprehensive set of training videos. You can click on the links along the left side to go to particular topics: http://www.teachertrainingvideos.com/pbworks/ 

Step 2: Add edtech faculty as administrators for your ePortfolio.


  • Add the following faculty to your wiki as administrator:

Dr. Janice Butler -  janice.butler@utb.edu


See above links (in Step 1) to tutorials that will help you to learn how to use PBWorks.

 Step 3: Add the contents of the template to your ePortfolio home page - using source code


  1. The first page you will set up (using the template) will be your ePortfolio home page.  Please click here to see how the finished template should look. When you are finished looking at the page, click on your back button to return to these directions.
  2. In order to build your ePortfolio framework, you will have to copy some content and paste it into your wiki. The content you will be copying is called HTML or source code. This source code is the "behind the scenes" code that defines how the page is going to look and what it will do in a browser window such as Explorer or Firefox. When you are ready to begin adding content to your ePortfolio home page, click here to get the source code for that Home Page.
  3. Select and copy all the content of the page in the wiki window.  Note: You do not need to be in the editing window to copy the contents on the above mentioned page.
  4. Once you have copied the contents of the template page specified above, go back to your ePortfolio home page.
  5. Click on EDIT to open the editing window of your ePortfolio home page. Clicking on Edit will take you into the What You See Is What You Get or WYSIWYG (pronounced /ˈwɪziˌwɪg/) editor.
  6. From the WYSIWYG editing window, click on Source to go into the source code windowPaste the copied content into the source code work window.
  7. After pasting the content, click on Save.


Below you will find a short tutorial about how to enter the source code into your ePortfolio Home Page.


Fliqz has shut down their service. To access this video, email support with this video id: 9d8c91e7a8f84789b2ea98277a0876ea


Once you have set up your home page, you are ready to begin creating the additional pages and adding content to your ePortfolio framework.

Step 4:  Adding your photo


First, you want to add your photo to the home page of your ePortfolio. Follow the tutorial directions to add your photo to your ePortfolio:http://www.teachertrainingvideos.com/pbworks/ (Refer to Step 7)


We suggest you add your photo and center it between the headline and the top menu bar on your Home Page.  If you change your mind about your photo selection, you can always go back and change your photo.  Please note - since this is a professional ePortfolio, please be sure that you post a professional photo on your final submission.

Step 5:  Creating additional pages for your ePortfolio


Next, you will be creating additional pages and links for your ePortfolio menu bar at the top of your home page.

You will be creating pages and/or hyperlinks for the following:


| Home | Reflection Letter | Matrix | Courses Taken | Leadership | Program of Study | Contact Me | (optional) Profile |


You can copy and paste the above or just type it in at the top of your home page.


Then, make links to Home, Reflection Letter, Matrix, Courses Taken,  and Leadership. This is a very simple process.


  • First make a link back to your ePortfolio Home page. You can do this two different ways. First, copy the URL for your Home Page. (This is found in the address bar of your Web browser when the page is not in edit mode.)
  • Next, click on Edit, then highlight Home and click on the Add Link icon --> .  
  • Click on the down arrow and select URL, then paste the URL for your home page into the appropriate area (see below).



  • Click OK.
  • For the rest of the menu links, you will be following the process detailed below:


Second Method - For new pages.

  1. For each of the next menu items:
    1. Highlight each menu item individually.  You will follow two different procedures - depending on whether you already have to page created or it will be a new page.  First, you will look at how to create a new page.
    2. Create a link to a new page using the Add Link icon.  To do this, highlight the menu item and then, click on the Add Link. Then, click on New Page and type in the name of the page.  In this example, the new page is Reflection Letter.  Remember, this is for a page that you have not yet created.
    3. Click Insert Link at the bottom of the window.




Second Method - For pages already created.

    1. Highlight each menu item individually. 
    2. Create a link to a new page using the Add Link icon.  To do this, highlight the menu item and then, click on the Add Link. 
    3. Click on Existing Page, File, or Folder.
    4. Scroll down (or up) to find the page that you have already created. Click on that page.
    5. Click on Insert Link. 


The tutorial below will show you how to create page links for each of the items in the menu bar.


Fliqz has shut down their service. To access this video, email support with this video id: 7922b2ef152f4dd68788dc50bd441bb2


Step 6: Populating the URL pages you created


Once you have created the hyperlinks to your ePortfolio pages, you are ready to activate the pages and add the initial content for each of those pages beginning with with the Reflection Letter page. You will be adding content similarly to the content that you added on the Home Page of your ePortfolio.

  1. First, click here for the code for the Reflection Letter page.
  2. Copy the code that is on the above referenced page.
  3. Navigate back to your ePortfolio Home Page and click on Reflection Letter in the upper menu bar. This should be an active link that you created in Step 5.
  4. A popup window will be displayed (as you see below). The name of the page will match your hyperlinked text.



    1. Once you have ensured all is correct, click on Create Page. You will be taken into the editing window of your Reflection Letter page. 
    2. Once on the Reflection Letter page, click on Source.
    3. Paste the contents you copied into the source code work space. You may click back on Source to see what your page will look like.  Make any changes you would like.
    4. Save the page. See tutorial in Step 3 above if you are not certain how to do this.
    5. You will be doing this for each of the links on the top menu sidebar on the ePortfolio Home Page you have created.

Links to code for pages:

Home Page Code

Reflection Letter Code

Matrix Code

Courses Taken Code

6320 Artifact Report Code

6321 Artifact Report Code

6323 Artifact Report Code

6325 Artifact Report Code

6332 Artifact Report Code

Leadership Report Code


Artifact Code with all Competencies

Artifact Report Code - general page


Click here to proceed to Step 7 and the rest of the directions. 



Comments (0)

You don't have permission to comment on this page.