My Class Website About Me

 

ABOUT ME - GUIDE  DIRECTIONS: Refer to this guide to add information about you to the home page of your class  website. Remember, never include personally identifiable information in your web projects, e.g., full  name, address, mother’s maiden name, cell number, etc. 

  Table of Contents  Getting Started  Updating the Page  Publishing 

Getting Started   

Step 

Detailed Instructions 

❏   Launch Brackets 

■ On Windows:  ○ Start > All Programs > Brackets (or use Desktop Icon)  ■ On Mac:  ○ Finder > Applications > Brackets 

❏   Open "My Class  Website" Project 

■ FILE > Open Folder... 

James Colestock 

■ Navigate to and open "my-class-website" folder  

My Class Website - About Me

Page 1 of 4 

Updating the Page   

Step 

Detailed Instructions 

❏   Open Home Page 

■ In Brackets, double-click index.html in the File Tree  or use FILE > Open...  

❏   Launch Live  Preview 

■ To see the web page as you build it, launch Live Preview:  http://static.colestock.com/Brackets_Live_Preview.pdf 

❏   Copy Avatar to  Project 

■ Navigate to your avatar (saved on your USB flash drive)  ■ Copy avatar to the images directory of your My Class Website  project using preferred method, e.g., Ctrl+C/Ctrl+V (⌘ C/⌘ V  on a Mac)  

  In Windows Explorer, the images directory of your project should resemble:   

 

     

 

James Colestock 

My Class Website - About Me

Page 2 of 4 

In Brackets, the File Tree of your project should resemble:   

 

 

❏   Update the Avatar  Image Element 

■ Referring to the example below, update the src attribute of  img#avatar to reflect the name and location of your avatar 

Before:   

  After: 

 

❏   Add About Me  Sections 

■ Find the following comment: 

 

■ Beneath it, briefly describe your past, present, and future  using three paragraph elements (

)  ■ Precede each paragraph with its own subheading ():  ○ Backstory  ○ These Days  ○ Someday...  ❏   Save Page     

■ Ctrl+S/⌘ S or FILE > Save  

 

James Colestock 

My Class Website - About Me

Page 3 of 4 

When we started, your home page should have resembled:   

 

  Afterwards, your home page should resemble:   

 

Publishing   

Step  ❏   Update Class  Website 

Detailed Instructions  ■ Use FileZilla to FTP the updated index.html and your avatar  (place it inside the images directory) to your class website:  http://static.colestock.com/FileZilla_Publishing.pdf 

 

James Colestock 

My Class Website - About Me

Page 4 of 4