1. /*
Name: Salman Alam and Kyubin Han
Course: ENGL 170
Program: Electronics and computer engineering
Instructor: JoeBenge
Date: Mar 20, 2015
*/

2. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
i
Table of Contents
1) Introduction ………………………………………………………….1
2) Part A …………………………………………………………………...2
Section 1: Download Files …………………………………….2
Section 2: Installation and Setup …………………….… 3
3) Part B …………………………………………………………………….5
Section 1: Sidebar ………………………………………………5
Section 2: Intro …………………………………………………..7
Section 3: Portfolio ………………………………………….… 9
Section 4: About Me ………………………………………… 11
Section 5: Contact …………………………………………….12
4) Conclusion ……………………………………………………………13

3. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
1
Introduction
In this user manual, you will learn how to make your own website
which showcases your professional portfolio. It will show you in simple
steps the software required and the actual program code that you need
to write to customize the webpage to suit your professional needs.
This user manual will provide you the opportunity to build over a
professionally designed template. Code snippets along with visual
illustrations are provided in this manual to make website building as
easy as possible for a beginner.
Finally after learning to build this website, you will be able to put this
website online to have a professional digital presence for potential
employers, companies and other interested parties.

4. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
2
Part A: Downloadand Install the Required Files.
In Part A, we will be downloading and installing the software and files required for building this
website. It will also serve as a guide to setup the files and software after download.
Figure 1. Downloadingthe program
Section 1: DownloadFiles
1) Go to http://www.sublimetext.com/2.
2) Downloadthe text-editorSublimeText2 foryour operatingsystem.
3) Visitthiswebsitehttps://s3-us-
west1.amazonaws.com/engl170/Professional+Portfolio+Website.rar .
You will be prompted to download a file.
4) Download andSave the file.
5) Unpack the file youdownload he file called“Professional PortfolioWebsite.rar”.

5. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
3
Figure 2. Openthe SublimeText 2
Section 2: Installationand Setup
1) Install the SublimeText 2 file whichyoudownloadedpreviously.
2) Openthe folder“Professional PortfolioWebsite”.
3) Right-Clickonthe file called “Index.html”.
4) Mouse over– Openwith fromdropdown.
5) Choose SublimeText 2.
If Sublime Text 2 application is not shown click Choose default program and locate the Sublime
Text 2 application where it was installed in your computer.
If you were able to successfully open the Index.html file with Sublime 2 Application, you will see
a window similar to the picture below.

6. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
4
Figure 3. Openthe index.html file
After you opened the Index.html file, these is where you make changes to the website to make
changes.
1) Minimize the “Index.html”file thatyouopenedwith SublimeText2.
2) Go the “Professional Portfolio Website” andrightclickthe file.
3) Mouse overOpenwith and thistime click Chrome.
A new Chromewindowshouldopenthatshouldshow youthe currenttemplate of the website.

7. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
5
Part B: Editing the Code to customize the webpage.
In this part we will be showing you how to customize the website. The website is divided into 5
sections: Sidebar, Intro, Portfolio, About Me, and Contact. We will be working on one section at
a time.
Section 1: Sidebar
Figure 4. Sidebar

8. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
6
Change your name, professionand avatar:
1) Open“index.html”with SublimeText2.
2) Go to line 37, replace the white coloredtextbetweenthe tags <h1>Joe Benge</h1>to your
name.
3) Change the textin line 39 betweenthe tags <p>EnglishInstructor</p>toyour current
profession.
Figure 5. Changingthe title and the profession
Front/Facial picture of yourself:
If you would like to put an avatar of yourself beside your name and profession, you may follow
these instruction:
1) Rename anexistingavatarof yourself withthe name “avatar.jpg”.
2) Go inside the “Professional PortfolioWebsite” –Go inside the “images” – Replace the
image called“avatar.jpg”withthe picture of yourself whichyoujustrenamedto“avatar.jpg”
Change the titles of the sections inyour sidebar:
If you would like to change the names of the titles in your sidebar, then follow the instructions,
otherwise you may skip this step.
1) Change the white coloredtextin line 59to the new sectiontitle (default“Intro”).
2) Change the white coloredtextin line 60to the new sectiontitle (default“Portfolio”).
3) Change the white coloredtextin line 61to the new sectiontitle (default“AboutMe”).
4) Change the white coloredtextin line 62to the new sectiontitle (default“Contact”).
Look at the following code snipped below to see where to change the code.
Figure 6 Changingthe titlesin the sidebar

9. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
7
Add links toyour social, networking andprofessional platforms online:
You may add links to your social, networking and professional platforms online by following the
instructions below, otherwise you may skip this step.
1) Provide linktoyourTwitteraccountby placingthe linkof yourTwitterprofile inside the “” after
href=in line 72.
2) Provide linktoyourFacebookaccountby placingthe linkof yourFacebook profile insidethe “”
afterhref=in line 73.
3) Provide linktoyourLinkedInaccountby placingthe linkof yourLinkedIn insidethe “” after
href=in line 74.
4) Provide linktoyourEmail accountinsertingthe linkinside the “” afterhref= inline 75.
This picture below shows the code snippet to make the changes above.
Figure 7. Changingthe platforms
Section 2: Intro
Figure 8. Intro

10. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
8
Change the Welcome text of your webpage:
1) Change the textcoloredinwhite in line 90and line 91 toprovide yourownwelcome text.The
textbetweenthe tags<strong>…</strong>will appearboldedwhenyouloadthe page inthe
browser.
Figure 9. Changingthe text
Put a background image or photo in the welcome section:
1) Choose animage fromown personal photogallerythatyouwantas background.
2) Change the name of the image to “welcome-banner.jpg”
3) Place thisimage inside the “images” inside “Professional PortfolioWebsite” .
4) Your image shouldreplace the photocalled“welcome-banner.jpg”thatisalreadyinsidethe
“images” .
Now refresh your webpage to reflect the change.

11. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
9
Section 3: Portfolio
Figure 10. The defaultportfolio
Change the title of the section:
1) Change the name of the title of thissection(defaultis“Portfolio”) bygoingto line 106.
2) Replace the text“Portfolio”withthe title of yourchoice.
Change descriptioninthe portfoliosection:
1) Enter a professionaldescriptionof yourselfinline 109.Replace itwiththe existingtext.Anytext
betweenthe <strong>…</strong>tagwill appearasboldedinyourbrowser.
Here is the code snippet to show you where to make the change.
Figure 11. Changing the description

12. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
10
Update the portfoliogallery:
In this section you will be able to put pictures of your profession, your work or your projects to
showcase them.
To place the pictures,followthesesteps:
1) Choose 6 photosthat youwouldlike toshowcase.(Youmayonlyadd6 photos)
2) Rename all the 6 photosas “exp1.jpg”, “exp2.jpg”,“exp3.jpg”, “exp4.jpg”, “exp5.jpg”,and
“exp6.jpg”
3) Place the 6 photosyoujustrenamedinside “gallery” whichisinside “images” whichin
turn isinside “professional portfoliowebsite” .
4) Your 6 photosshouldreplace the 6photoswiththe same whichis alreadyinside the “gallery”
.
Refresh your web browser to see the changes.
Figure 12. Updating the pictures

13. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
11
Section 4: About Me
Figure 13. The defaultof About me
Change the title of the section:
1) Change the name of the title of thissection(defaultis“AboutMe”) bygoingto line 165.
2) Replace the text“AboutMe” withthe title of yourchoice.
Update the short personal summary:
1) Enter a personal shortdescriptionof yourself in line 170.Replace itwiththe existingtext.
2) Here is the code snippettoshowyouwhere tomake the change.
Figure 14. Changing the summary

14. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
12
Section 5: Contact
Figure 15. The defaultof Contact
Change the title of the section:
1) Change the name of the title of thissection(defaultis“Contact”) bygoingto line 180.
2) Replace the text“Contact”withthe title of yourchoice.
Update contact details anddescription:
1) Provide ashort detail of howtocontact you in line 183.
Figure 16. Updating contact details

15. HOW TO MAKE A WEBSITE FORPROFESSIONALPORTFOLIO
13
Conclusion:
In this user manual, you learned how to make your own website for
professional website. This skill will be extremely beneficial for having
a professional online presence in our digital era. It will also be useful
for job employers, companies, and other organizations to contact you
through this website.
We have provided additional links below if you are interested to
upload this webpage on the internet.
Additional Links and Resources:
1] https://ca.godaddy.com/ - Domain Name Registration site
2] http://aws.amazon.com/s3/ - Server for hosting your files, images and resources.
3] https://wordpress.com/ - Free websites to upload your web designs.