user manual salman alam and kyubin han

/*

Name: Salman Alam and Kyubin Han

Course: ENGL 170

Program: Electronics and computer engineering

Instructor: Joe Benge

Date: Mar 20, 2015

*/

HOW TO MAKE A WEBSITE FOR PROFESSIONAL PORTFOLIO

Table of Contents

1) Introduction …………………………………………………………. 12) 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

i


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.

1


Part A: Download and 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. Downloading the program

Section 1: Download Files

1) Go to http://www.sublimetext.com/2 .2) Download the text-editor Sublime Text 2 for your operating system.3) Visit this website

https://s3-us-west1.amazonaws.com/engl170/Professional+Portfolio+Website.rar .

You will be prompted to download a file.

4) Download and Save the file.5) Unpack the file you download he file called “Professional Portfolio Website.rar”.

2

https://s3-us-west1.amazonaws.com/engl170/Professional+Portfolio+Website.rar

http://www.sublimetext.com/2


Figure 2. Open the Sublime Text 2

Section 2: Installation and Setup

1) Install the Sublime Text 2 file which you downloaded previously.2) Open the folder “Professional Portfolio Website”.3) Right-Click on the file called “Index.html”.4) Mouse over – Open with from dropdown.5) Choose Sublime Text 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.

3


Figure 3. Open the 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 that you opened with Sublime Text 2.

2) Go the “Professional Portfolio Website” and right click the file.3) Mouse over Open with and this time click Chrome.

A new Chrome window should open that should show you the current template of the website.

4


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

5


Change your name, profession and avatar:

1) Open “index.html” with Sublime Text 2.2) Go to line 37, replace the white colored text between the tags <h1>Joe Benge</h1> to your

name.3) Change the text in line 39 between the tags <p>English Instructor</p> to your current

profession.

Figure 5. Changing the 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 an existing avatar of yourself with the name “avatar.jpg”.

2) Go inside the “Professional Portfolio Website” – Go inside the “images” – Replace the image called “avatar.jpg” with the picture of yourself which you just renamed to “avatar.jpg”

Change the titles of the sections in your 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 colored text in line 59 to the new section title (default “Intro”).2) Change the white colored text in line 60 to the new section title (default “Portfolio”).3) Change the white colored text in line 61 to the new section title (default “About Me”).4) Change the white colored text in line 62 to the new section title (default “Contact”).

Look at the following code snipped below to see where to change the code.

Figure 6 Changing the titles in the sidebar

6


Add links to your social, networking and professional 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 link to your Twitter account by placing the link of your Twitter profile inside the “ ” after href= in line 72.

2) Provide link to your Facebook account by placing the link of your Facebook profile inside the “ ” after href= in line 73.

3) Provide link to your LinkedIn account by placing the link of your LinkedIn inside the “ ” after href= in line 74.

4) Provide link to your Email account inserting the link inside the “ ” after href= in line 75.

This picture below shows the code snippet to make the changes above.

Figure 7. Changing the platforms

Section 2: Intro

Figure 8. Intro

7


Change the Welcome text of your webpage:

1) Change the text colored in white in line 90 and line 91 to provide your own welcome text. The text between the tags <strong>…</strong> will appear bolded when you load the page in the browser.

Figure 9. Changing the text

Put a background image or photo in the welcome section:

1) Choose an image from own personal photo gallery that you want as background.2) Change the name of the image to “welcome-banner.jpg”

3) Place this image inside the “images” inside “Professional Portfolio Website” .4) Your image should replace the photo called “welcome-banner.jpg” that is already inside the

“images” .

Now refresh your webpage to reflect the change.

8


Section 3: Portfolio

Figure 10. The default portfolio

Change the title of the section:

1) Change the name of the title of this section (default is “Portfolio”) by going to line 106.2) Replace the text “Portfolio” with the title of your choice.

Change description in the portfolio section:

1) Enter a professional description of yourself in line 109. Replace it with the existing text. Any text between the <strong>…</strong> tag will appear as bolded in your browser.

Here is the code snippet to show you where to make the change.

Figure 11. Changing the description

9


Update the portfolio gallery:

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, follow these steps:

1) Choose 6 photos that you would like to showcase. (You may only add 6 photos)2) Rename all the 6 photos as “exp1.jpg”, “exp2.jpg”, “exp3.jpg”, “exp4.jpg”, “exp5.jpg”, and

“exp6.jpg”

3) Place the 6 photos you just renamed inside “gallery” which is inside “images” which in

turn is inside “professional portfolio website” .4) Your 6 photos should replace the 6 photos with the same which is already inside the “gallery”

.

Refresh your web browser to see the changes.

Figure 12. Updating the pictures

10


Section 4: About Me

Figure 13. The default of About me


1) Change the name of the title of this section (default is “About Me”) by going to line 165.2) Replace the text “About Me” with the title of your choice.

Update the short personal summary:

1) Enter a personal short description of yourself in line 170. Replace it with the existing text. 2) Here is the code snippet to show you where to make the change.

Figure 14. Changing the summary

11


Section 5: Contact

Figure 15. The default of Contact


1) Change the name of the title of this section (default is “Contact”) by going to line 180.2) Replace the text “Contact” with the title of your choice.

Update contact details and description:

1) Provide a short detail of how to contact you in line 183.

Figure 16. Updating contact details

12


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.

13

https://wordpress.com/

http://aws.amazon.com/s3/

https://ca.godaddy.com/

user manual salman alam and kyubin han

Documents

file youdownload

downloadingthe program

rightclickonthe file

required files

sublime text

openthe sublimetext

actual program code

default program