This document outlines Saruta Bualop's process for designing her personal website. She brainstormed ideas but didn't feel her portfolio, company site, or hotel site were suitable. After looking at inspiration sites, she decided on a simple site introducing herself, her interests, and work. She describes the layout and content for four pages: the index, blog, about page, and contact page. Saruta discusses technical challenges faced and lessons learned from the class, such as CSS, JavaScript, and jQuery. She thanks those who helped and promises to continue learning.

2. Self Brainstorming
?
?
?
?
?
?
?
?
? ? ?

3. Don’t know what to do !
Portfolio ? – No ( I don’t have too much my works)
Company Website ? – No ( Nothing New about it )
Hotel Website ? - No ( I don’t have enough photos)
I want to do something that I like and feel fun
✔✔Home Page, Blog, Diary, Photos Book
- Yes ( That’s What I like)

4. Then
Looking for Inspiration
http://www.siteinspire.com/
http://onetwentysix.com/blog/http://fffflckr.com/

5. Finally
I got my concept
Who I am…
What I like…
What I do…

6. This’s What I get

7. Talking About My Webpage
Simple
Clean ( as much as possible)
Easy to read
Easy to access
Modern Style

8. Frist Page ( Index or Home)
Divide into 3 parts
Top
Body ( Header and Navigations)
Bottom ( Photo Albums)

9. Top (Bar)
<div class="head-top">
<span class="right">
<a href="#">©Images by Saruta Bualop</a> </span>
<div class="clr"></div>
</div>

10. Body ( Header & Navigation)
<header><h1></h1><div
id="nav"></div>
<!--What's this all then-->
<div id="text1" class="lb-
overlay"></div>
<!-- End WTAT
<!--Get in Touch-->
<div id="text2" class="lb-
overlay"></div>
<!-- End GIT-->
</header>

11. Bottom ( Photo Albums )

12. Click and Show Large Images
For Photo Albums Part, Using CSS and JavaScript
Click to go
back main
albums
Click to previous photo Click to next photo

13. Page 2 ( Blog )
Have arrows to go back to
the main page ( First Index
Page )
Click on Photo or
Read more to get the
new page of that
story

14. On the each story page
Photo
Video ( depends on
what I write about )
Arrows to go previous
story and next story Comment Box
http://www.freecommentscript.com/
Click to go back the
Main Blog Page

15. Page 3 ( About me )
About Me or What’s this all then
Using the Lightbox
Click X to close the lightbox
Using Css for Lightbox
.lb-overlay
.lb-album

16. Page 4 ( Contact )
Contact or Get in touch
Using the Lightbox
Click X to close the lightbox
Using Css for Lightbox
.lb-overlay
.lb-album
Link to E-mail
Link to Facebook
Link to Instagram

17. The Problem that I face
The position ( all the time. , but it’s not to difficult)
The size of the page, big screen mess up my site (
still don’t get it very well, but I’m trying to fix and
learn)
The lightbox code ( try many codes but not
work, but finally Dave recommended me some code
and it works ! Thanks a lot )
jQuery ( don’t get it, but I will)
And, Etc.

18. What I have learned ( from this class)
CSS ( a lot of new and cool code, design )
JavaScript ( Difficult but worth to learn )
jQuery ( Still don’t get it, need to learn more )
Sharing Experience in the classroom.
Friendships

19. The Last
Thank you everyone who has helped me, and
encouraged me.
Finally, I did finish my website.
I promise to myself I will continue learning and
doing my websites.
Hope everyone have a great time in Summer !

20. Thank You for Your Time
Saruta ( Sandy ) Bualop