My Class Website My Reflections

 

MY REFLECTIONS - GUIDE    DIRECTIONS: Refer to this guide to add project reections to the home page of your class  website. Remember, never include personally identi끚�able information in your web projects, e.g.,  full name, address, mother’s maiden name, cell number, etc. 

  Table of Contents  Getting Started  Adding a Reection  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...  ■ Navigate to and open "my-class-website" folder  

  James Colestock 

My Class Website - My Reections

Page 1 of 4 

Adding a Reection   

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 

  When you begin, your My Reections section should be empty: 

 

In index.html, you should see an HTML section where you will write your reections:   

<section id="my-reflections">  <span >My Reflections           

 

❏   Create  Three-Column  Reection Rows  (as needed) 

■ Within section#my-reections, add three-column rows as  needed to contain your project reections  ■ Each column has a container for the project title as well as a  detailed description/reection  

                           

James Colestock 

My Class Website - My Reections

Page 2 of 4 

❏   Complete  Reections  (as requested) 

■ As requested, complete project reections by adding a  project title and brief description/reection using the rows’  free columns  ■ When you run out of columns, create another row (see  above) 

    Famous Quotes  Great quotes, great people, and one  heck of a good unibrow. While working on this project, I became familiar  with not only the wise words of famous people but also how to create lists  and images in HTML.      Code of the West  Yeehaw! I learned the ten rules that  cowboys should live by and how to create and style lists using HTML and  CSS.      Ready for Some Football  Orange and blue...Broncos have been  rocking the Front Range since 1960! In this project, I explored the history  of NFL franchises while I learned how to style using CSS ID selectors.     

❏   Save Page   

■ Ctrl+S/⌘ S or FILE > Save  

The above takes full advantage of the uid layout capabilities of Bootstrap; therefore, the My  Reections section will appear differently depending upon the viewing device.    For example, on medium-size (desktops) and larger devices, three columns will appear: 

   

   

James Colestock 

My Class Website - My Reections

Page 3 of 4 

Whereas on smaller, mobile devices there will be one reection per line:   

 

Publishing   

Step  ❏   Update Class  Website 

Detailed Instructions  ■ Use FileZilla to FTP the updated index.html to your class  website:  http://static.colestock.com/FileZilla_Publishing.pdf 

 

James Colestock 

My Class Website - My Reections

Page 4 of 4