Image: The logo of The Frienship Diaries. Forever Safe. Forever Remembered.















The End  ✎  Technology Classes  ✎  Cool Sites  ✎  Design a Website

The End!

Dear Diary,
Friendship takes work, an equal effort. Repurposing items to repurpose our
friendship has helped us so much. But the physical items are not what’s
important. What’s most important is the things we’ve learned from this
experience. Image: Us being goofy! The web design contest by the
Michigan Council of Women in Technology
has brought attention to many important
things in today’s society as well as helped us
improve our technology skills. We were able to
help the planet by repurposing items that
most homes tend to have. We have also
brought attention to the importance of
recycling and repurposing. Our friendship
has never been stronger thanks to this amazing opportunity. Friendship isn’t
about the quality of the things you give each other, it’s about the effort you give
towards the relationship.
                                    Love,

Caitlin Beirne & Jessica Old

Technology Classes!


Technology classes we have taken throughout our years of high school.
Technology Classes
Class & Student(s) Class Description Software Used
Career Technology Foundations The goal of this class is to create a site for employers to find you. You create a weebly and showcase your best qualities, your work samples, and work related documents. Mrs. Candela works hard to get you ready to go out into the world of work in Career Technology Foundations. Weebly, PicMonkey, iPiccy, Microsoft Word
Caitlin and Jessica
Web Design The goal of this class is to create a website based on a theme. Our class is given one of three themes; Genie in a Bottle: Three Wishes, Ancestry, or Repurposing: The Ultimate in Creativity and Recycling. Web Design gives students a look at how to create sites such as the ones they use everyday. Notepad++, Photoshop Elements, PicMonkey, Weebly
Caitlin and Jessica's Websites
Advanced Web Design The goal of this class is to create a website based on the given theme. The theme of this class varies by the theme the Michigan Council of Women in Technology picks for it's annual web design contest. This year's theme is Repurposing: The Ultimate in Creativity and Recycling. Advanced Web Design gives students a look into CSS coding and animations to add creativity to their websites. We also created social media pages for our sites! Notepad++, Photoshop Elements, PicMonkey, Weebly, Photoshop CS6, Dynamic Drive
Caitlin and Jessica
Computer 9 Computer 9 taught me how to use a computer. I was taught how to work Microsoft programs and also how to type on a keyboard. I also learned about the computer itself, how it was made, and how it works. Microsoft Word, Microsoft PowerPoint, and a typing instructor
Jessica

Cool Sites!

"Automatic Bibliography Maker." Bibme: Citation and Bibliography Maker. Web. 11 Nov. 2014.
We used Bibme to create perfect MLA citations for all of the sites we used.
"Befunky" Befunky - Photo Editor. Web. 11 Nov. 2014.
We used Befunky to edit and add the instructions to our DIY repurposing project slideshows.
"Bubbl.us - Brainstorm and Mind Map Online." Bubbl.us - Brainstorm and Mind Map Online. Web. 11
Nov. 2014.
Bubbl.us helped us to organize our thoughts and ideas to create a layout for our site.
"Color Charts - Webmonkey." Webmonkey Color Charts Comments. Web. 11 Nov. 2014.
We used Webmonkey to change our colors to hex codes rather than use color names.
"Color Wheel." Color Wheel. Web. 11 Nov. 2014.
We used Color Wheel to create our own hex code colors for our site.
"Custom 404 Error Page." HTML, CSS, and JavaScript Tutorials, References, and Articles. Web. 11 Nov.
2014.
HTML Dog helped us to create and code our 404 error page.
"Dynamic Drive DHTML(dynamic Html) & JavaScript Code Library." Dynamic Drive DHTML(dynamic
Html) & JavaScript Code Library. Web. 11 Nov. 2014.
We used Dynamic Drive to create our many slideshows and magnify our navigation.
"Google Fonts." Google Fonts. Web. 11 Nov. 2014.
We used Google Fonts to write our content because not all computers have the same system fonts.
"Home Page | Michigan Council of Women in Technology." Home Page | Michigan Council of Women in
Technology. Web. 11 Nov. 2014.
We used the MCWT website to register for their annual web design contest.
"HTML Special Characters." Special Characters for HTML, CSS and JS. Web. 11 Nov. 2014.
This site helped us find a code and symbol for our footers, internal link dividers, and images for our lists.
"HTML Tag." HTML Iframe Tag. Web. 11 Nov. 2014.
We used this site to create Iframes that we used in our technology table to show you our past websites.
"Import Image." Favicon.ico Generator. Web. 11 Nov. 2014.
We used this favicon generator to create the favicon for all of the pages on our site.
"Infographics. The Easy Way." Create Infographics & Online Charts. Web. 11 Nov. 2014.
Infogr.am helped us create our main picture for this page: the word collage.
"PicMonkey." Photo Editor. Web. 11 Nov. 2014.
We used PicMonkey to edit some of our photos.
"QR Code Generator." Create QR Codes for Free (Logo, T-Shirt, VCard, EPS). Web. 11 Nov. 2014.
We used this QR code generator to create a custom QR code for our website, which is found in our footer.
"Replacing List Bullets with Images Using CSS." Tech for Luddites. Web. 11 Nov. 2014.
Tech for Luddites taught us how to create a list with our own images for bullets.
"Slideshare.net." Slideshare. Web. 11 Nov. 2014.
We used slideshare to do most of our slideshows.
"Vimeo, Your Videos Belong Here." Vimeo, Your Videos Belong Here. Web. 11 Nov. 2014.
Vimeo allowed us to take the coded version of our video and plug it into the code of our last page.
"Welcome to Mobilefish.com." Mobilefish. Web. 11 Nov. 2014.
We used Mobilefish to create an imagemap which is the main picture, or the word collage, on this page.

Design a Website!


Step One:
Create a Bubbl.Us: plan your site, remember to create at least two pages(home or content page and then a credits page for citations), and pick a theme or topic.
Step Two:
Use Notepad++ to create the skeleton of your website: html, head, and body.
Step Three:
Practice Photoshop or any photo editing site: you will need a banner for your pages, icons/rollovers, and a background photo.
Step Four:
Start adding to your website: add your background, rollovers/icons, title, and your banner.
Step Five:
Create two tables: you'll need one for your content and another for your footer information.
Step Six:
Write your content: every good page has at least two paragraphs and write up creative subheadings.
Step Seven:
Add your content: learn how to bold, italicize, underline, and center, as well as choosing a font face, color, and size, then post to your page(s).
Step Eight:
Create media for your pages: use some websites such as Infogram, Vimeo, or create another table.
Step Nine:
Add some small details: use this cursor site(or create your own with a code from Dynamic Drive) to select a cursor; add your meta tags; and if you have a longer page, add page anchors. You could also add effects and special codes from Dynamic Drive.
Step Ten:
Finish the website with footer information: add the names of your pages and link them to those pages, state when it was last updated and best viewed.


Flip back up to the top of the page!

Image: Scan to visit our homepage!

Last Updated on November 12, 2014.

© Copyright Caitlin Beirne and Jessica Old. All rights reserved.

Best viewed in Mozilla Firefox with a screen resolution of 1280x1024


Home   ✎   Entry 1   ✎  Entry 2   ✎   Entry 3   ✎  Ever After   ✎   Our Secrets 		        Join Us On Facebook!      Join Us On Twitter!     Join Us On Pinterest!