A Responsive ePortfolio DEMO, based on HTML5, Bootstrap CSS3, and Javascript


I had to create a ePortfolio for the MIS316 course as my second to final project. The requirements were:

For this project, you will create a personal website using the responsive design techniques discussed in class. You will need to have at least 3 webpages for your website with at least one being index.html (i.e., your homepage). For this project, you have the option of using either the HTML5 techniques discussed in class or Bootstrap. Remember to follow all the previous guidelines for the SEO techniques.

Part A: Building your webpages

There should be consistency across all three pages (i.e. the same navigation and look/feel).

For the Homepage

Your homepage should contain information about yourself including name, degree, year in program, etc. (look at your resume to think of things to add). There should be header, navigation, content (either1 aside and 1 article or at least 2 columns in Bootstrap) and footer. In the footer, include the following hyperlinks: UNCW homepage, CSB homepage, major homepage (IS or IT).

For the Courses Page

For this page, you will need to have a header, nav, section and footer. Your courses should be in a table that consists of the following columns (with at least 5 courses listed):  Course Number (e.g. MIS310) , Course Title (e.g. Web Development) , Description of what was covered.

You should also create a print.css stylesheet for this page that includes the recommended styles for printing (Be sure you create the link to the stylesheet correctly, i.e. media).

Any Additional Page (e.g. Class Projects, Hobbies, etc.)

The site had to have at least 2 Javascript features. In this case, it featured Modal images, and a Slideshow. The slideshow may not be so obvious… the jumbotron has the slideshow in it, and the text of quotes are within images done in Paint. Simple.

Next, Add TWO jQuery or JavaScript examples to your project (does not need to be related to your website)

Go to the jQuery example page (for your first example)

General guidelines for each feature a. Add in the <link… to the jQuery library in the head segment of your page b. Add in the <script….. .. code to your head segment of your page c. If there is a style needed, create a separate style page just for this example (normally we would put in one big style CSS page, but let’s avoid any conflicts when new).

This is a demonstration ePortfolio for the sake of completing the assignment. This blog is my active ePortfolio. So, do check out my UNCW ePortfolio / UNCW “Myspace”.
[See it here]


Leave a Reply