I'm so Asian

Zen Garden

2010-09-18T15:06:00.000-07:00

Here is my screenshot of what my Zen Garden look like:

From the image above that you see, I have use apple as like my theme for it. You can also see that I have highlight the Header of each topic so that it would be easy to tell with one is the Header. For the background, I changed it to white and also added an apple at the right bottom on the page.

From the image above is what I made in Photoshop as the banner and you can also see it in the from screenshot.

Brian Behind The IDEAS

What I was thinking about changing the CSS Zen Garden as my own, I really had this awesome idea but when I was about to start it, I end up getting more bad at it. So I thought of apples and there was so many ways to do it. I could have put it in an apple or have apples around the texts. Those were many that was running about in my head.

WireFrame

2010-09-14T09:12:00.000-07:00

The image on the left side is what my wireframe for my CSS Zen Garden is going to look like (well hopefully).

In my image that you see, I'm going to have two images on the top left and bottom right while the banner and contact is on the black boxes.

I hope that the images can paint a picture for you to see what is my plan.

Upload!

2010-09-14T08:15:00.000-07:00

Hey everyone

I'm fine and been kind of busy with final coming up >.<

So if u look back at Aug. 31 on my last blog you can see that I have told you about my CSS Zen Gardens Project.

So far it going already but I really don't know what I want to add to it >.<

Well wish me luck :)

Wk8_In_Class

2010-08-31T11:22:00.000-07:00

Today in class, we work on out final site plus the HW site. Seen the field trip was cancel for today again so it was cool.

For me, it was the same seen I been working on my HW site more so my Final Site is kind of no different.

Final Site
HW Site

Check it out ^^

What else I did was look at other students CSS Zen Garden.

Like:

http://www.mezzoblue.com/zengarden/alldesigns/

But the one I really like out of that was:
http://www.csszengarden.com/?cssfile=203/203.css

The link above got me to think what I can do on CSS Zen Garden for me. I can't wait to start and to surprise you guys ^^

Over All Portfoilio Togetherf

2010-08-30T18:46:00.000-07:00

Have you hear of "Bulletproof Web Design, 2nd edition" book written by Dan Cederholm. Well I had work on some of the chapter to see how they have done it. So now it time to put what I have learn together.

You can view it here: Final Site

The image that you see up on top is my Final Site, well going to be but it wasn't like my first idea (the image that you see below). There was so many ways that I wanted to go but I like how it turn out.

There a big different right? Well let me explain it so that it would be a little more clear. From what you see up on the top (just above this) I wanted the info to slide. I got that in my final site but I don't have the nav. in it. But that cool.

From the book, what I use is Chapter 5: rounded boxes on my Contact Me button (when you go to my final site, you would see the Contact Me button at the bottom right hand corner)

The people that got me to be created are Patrick L. and Kostra G. THX GUYS!!!!

HTML5

2010-08-24T11:32:00.000-07:00

Hi everyone, today in class I learn HTML5 >.< There was so much typing seen Sharon wanted us to learn then copying and paste and I agree with her. If everyone just copy and paste the codes then we won't be able to learn what would do want and we would just be piss off at it.

I had Fun with the HTML5 ^^' even those there was so much typing >.< I brain is like on overdrive >.< But seeing Sharon getting a little lost once in a while is was funny and there was funny moment too LOL. It was a great day to be in class :) Kind of happy that class didn't go on the trip ^^'

The link below is one of the site we look at for help but I believe for the first half of the CSS that we type in class was different, well a little.

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

How The Web Wins

2010-08-24T07:39:00.000-07:00

Evan Hansen's articles talk about how apps are taking over the web. I'm not sure if I agree. Apps are like of like web but they are still a little different in some way. So I believe that Apps are kind of not taking over the web. I mean apps are most on iphone the you would get on the web. People would still need to go on the web for the apps so app are not really taking over.

http://www.wired.com/epicenter/2010/08/how-the-web-wins/

Chapter 5

2010-08-11T15:08:00.001-07:00

Chapter 5: Indestructible Boxes

The first one that you see is the Round Box, where all the corner of the box are round. Like in the first image but you can also see that I have round on some of the other places too. The second one is only a Single Rounded Corner, where only one corner is rounded. Like in the second image you see. It took me a while to get the one corner to fold.

Round Box's CSS:
body {
font-size: small;
font-family: Arial;
}

.box {
width: 273px;
background: #0FF;
height: 115px;
border-radius: 10px 14px 10px 14px;
-moz-border-radius: 10px 14px 10px 14px;
}

.box h3 {
margin: 0;
padding: 6px 8px 4px 10px;
font-size: 130%;
color: #000;
border-bottom: 1px solid #0F9;
background: #0F9;
-moz-border-radius: 10px 14px;
}

.box ul {
margin: 0;
padding: 14px 10px 14px 10px;
list-style: none;
}

.box ul li {
margin: 0;
padding: 0;
}

.container {
float: left;
color: #000;
background: #90F;
height: 85px;
width: 155px;
border-radius: 12px 14px 12px 14px;
-moz-border-radius: 12px 14px 12px 14px;
}

.desc {
margin: 0;
padding: 9px 9px 0 9px;
background: #99F;
-moz-border-radius: 12px 14px;
}

.link {
display: block;
padding: 0 9px 9px 0;
font-style: normal;
background: #90F;
}

.container a {
font-size: 130%;
color: #99F;
}

Single Rounded Corner's CSS:
ol {
width: 22 em;
margin: 0;
padding: 0;
list-style: none;
}

ol li {
margin: 0;
padding: 1em;
}

ol li.alt {
background: #06F;
height: normal;
width: normal;
border-bottom-right-radius: 2em;
-moz-border-radius-bottomright: 2em;
}

Sources that I have helped me:
http://www.css3.info/preview/rounded-border/

Templates

2010-08-09T10:51:00.001-07:00

Here is one of templates that I work on in DreamWeaver:

You can see where my navigation bar, Header, Footer, and content is going to be at. I got it from Dreamweaver then I color it so you could tell what is what.

The other templates that I maybe end up using would be Colin LewisWebsite and/or Patrick Loranger'sWebsite.

Upload TIME/Chapter 4 HW

2010-08-09T10:32:00.001-07:00

Hi everyone, I know that I said been working on my website and I have but I had to change it up a little. The idea I had go ruin so I want with Plan B. It's kind of the same with Rants and Ideas but I'm changing it up. please keep in mind that I'm still working on it.

My Website

Week 3 (Note: If u need to refresh of what I did for week 3, clcik HERE)

Chapter 4 for Week 4 homework

PLEASE NOTE THAT MY WEBSITE IS STILL BEING WORK ON

Create TIME

2010-08-08T21:26:00.000-07:00

What get me to create moment?

The way I get create is by looking at what my classmate/ friends has and it just give me that rush. They inspires me in so many way that I just feel like I can't give up when I look at their work.

There would be time when I just want to give up but after looking at them and trying to talk to some of them, I would somewhat bounce back.

So thx guys for keeping that create/rush side of me to keep going.

Week 3: Reconstruct Site

2010-08-01T22:50:00.000-07:00

From the image above, I had to reconstruct that site. To see the whole site, you can click on the site below:
http://casabasa.com/web/mm2213_wk1.html

From the 3 images above, are the finish on from the website above.

Note: the 3 images are different, first one is home, second one is study schedules and the last one is student's info.

Other Note: the website that is suppose to be link for the finish one is still on under-construction

CSS Code:

/* CSS Document */

html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
background:#FFF; /*color background - only works in IE */
font-size:76%; /*set default font size */
font-family:georgia, "palatino linotype", "times new roman", serif; /* set default font */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
overflow:hidden; /*get rid of scroll bars in IE */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
}
#content {
overflow:auto; /* add scroll bars as necessary */
position:absolute; /* position absolutely */
z-index:3; /* If required to cover any other divs */
top:97px; /* a value to miss the header */
bottom:50px; /* a value to miss the footer */
left:200px; /* a value to miss any navigation div */
right:0; /* this will put the scroll bar at the right of the page */
background:#0F9; /* set the background color */
}
* html #content {
height:100%; /* full screen height */
width:100%; /* full screen width 8/
top:0; /* place the content at the top */
left:89px; /* and left of the body */
border-top:100px solid #fff; /*add a top border to miss the header
(this is SUBTRACTED from the 100% height on quirks mode) */
border-bottom:50px solid #fff; /*add a bottom border to miss the footer
(this is SUBTRACTED from the 100% height on quirks mode) */
border-left:200px solid #fff; /*add a left border to miss any navigation div
(this is SUBTRACTED from the 100% width on quirks mode) */
}
#head {
position:absolute;
margin:0;
top:0;
left:1px;
display:block;
width:100%;
height:100px;
background-position: center;
background-repeat:no-repeat;
font-size:4em;
z-index:5;
overflow:hidden;
color:#000;
background-color: #0F9;
}
#foot {
position:absolute;
margin:0;
bottom:-4px;
left:-69px;
display:block;
width:100%;
height:50px;
font-size:1em;
z-index:5;
overflow:hidden;
background:#0F9;
color:#000;
padding-left: 150px;
padding-top: 10px;
}
#left {
position:absolute;
left:2px;
top:100px;
bottom:50px;
width:200px;
background-repeat:no-repeat;
font-size:1.2em;
z-index:4;
overflow:auto;
background-repeat:no-repeat;
background-color: #0F9;
}

* html #left {
height:100%; top:-10px; bottom:0;
border-top:100px solid #fff;
border-bottom:50px solid #fff; color:#fff;
}

#content p {padding:10px;}
.bold {font-size:1.2em; font-weight:bold;}

dd {display:none;}
a.nav, a.nav:visited {
margin-left:50px;
display:block;
width:100px;
height:50px;
background:none;
color:#000;
border:1px solid #000;
text-decoration:none;
text-align:center;
line-height:25px;
}
a.nav:hover {background:#000; color:#fff;}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
background-color: #FFFFCC;
}
a:active {
text-decoration: none;
}
/*
CSS layout © 2004/5/6 Stuart Nicholls
*/

Note again: finish page for this is under-construction, sorry

Box Model

2010-08-01T21:32:00.000-07:00

Box Model are a great way for people that are just learning CSS.

Key Words:
content edge or inner edge
The content edge surrounds the rectangle given by the width and height of the box.
padding edge
The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge.
border edge
The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge.
margin edge or outer edge
The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge.

Here the code for the image on the left:

.box {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #000;
margin: 15px;
}

From the image that you see,

that the content is 300x200px in the center, padding is 10px that around the content, border is 1px that around the padding and the margin is 15px that way it wont cover another part of your website or content.

Sources:
http://www.w3.org/TR/CSS2/box.html
http://reference.sitepoint.com/css/boxmodel#

In_Class_wk3

2010-07-27T08:06:00.000-07:00

Hi, I'm in class right now and here is what I'm going to be doing today:

-Blog + read others + add links to each other
*see Kostos for excellent
-CSS Layout + print .css
-Deconstruct table using Ch.3
-Discussion of your layout(homework)
Use this to make your home page (not blog) look better -> blog a screenshot
Showing wireframe to beginning design
LAB

Now that u know what what I'm doing let me tell you that I started to follow my classmate. You can see it on the right hand side.

here what we did during LAB TIME:

Here the CSS that we(in class) use to make that:

CSS:
body, html {
margin:0;
padding: 0;
}
h1 {
margin:0;
padding:0;
}
.hidden { /* hide section */
display: none;
}
#page-container {
width: 760px;
margin: auto;
}
#main-nav {
background: red;
height:50px;
}
#header {
background:blue;
height:150px;
}
#sidebar-a {
background:darkgreen;
float:right;
width:280px;
}
#content {
background:green;
margin-right: 280px;
}
#footer {
clear: both;
background:orange;
height:66px;
}

The website that was use in class today was:
CSS Tricks
Lynda Video

Wk 2 HW: 3 Pantone Color and Chapter 1

2010-07-26T11:18:00.000-07:00

The image that you see on left side is my list of 3 pantone colors and their RGB equivalent that would be on my upcoming web page soon.

And the second part of my homework was to read Chapter 1 from Bulletproof Web Design then create the same stylesheet using Ems (page 22).

the CSS code:
body { font-size: 62.5% } /* gives us a base of 10 px */
h1 { font-size: 2em; } /* 20px */
h2 { font-size: 1.8em; } /* 18px */
p { font-size: 1.2em; } /* 12px */
p abbr { font-size: 2.4em; } /* 24px */
#sidebar { font-size: 1 em; } /* 10px */

Timeline and/or Schedule

2010-07-20T11:39:00.000-07:00

The timeline/schedule for my Intro. of Web Design class:

Week 1: July 13, 2010

two rough sketches with pencil and paper

Scan the two rough sketches to Photoshop to grins.

Print out and sketch it out again with pencil and paper.

Scan again and upload it to my blog

Week 2: July 20, 2010

Rework on the sketches and add in notes to them

Pick 3 pantones (for my website)

Read Chapter 1 then post it on my blog

Week 3: July 27, 2010

Reconstructions on div

explain about Box Model in my word

Work on my website so I can have it up and working before Week 5.

Week 4: Aug. 3, 2010

Fix Blog

Work on my website

Change background color plus information (if any)

Add more stuff (like pictures and information)

Week 5: Aug. 10, 2010

Getting most of my homework upload before Midnight

Work on Chapter 5 + 6

Read my classmate blog

Week 6: Aug. 17, 2010

fix up website

Blog about an article

Week 7: Aug. 24, 2010

Blog about today

upload my website and fix the Classes Pages

Week 8: Aug. 31, 2010

Blog about today

look up on CSS Zen Garden

At least have an Idea for CSS Zen Garden Site

Week 9:

Week 10:

Week 11:

Sketching HW

2010-07-19T10:17:00.000-07:00

The picture that u seen on the left is my first rough sketches.

Before I got there, I wanted to say that I took me time to looking for what i wanted. I want to Google and I use many keys words to find what I look for. After about two hours of researching, I found a website that had what I was looking for. Colin Lewis, his website was what I was looking for.

So, I began to sketch and end up with about 2-4 sketches. But in my sketches that you see right now, is the out come of it.

Let me explain what I'm aiming for.
On the top left is going to be my home page. Where I'm going to explain a little about myself but I'll leave that up to my contact. But on my home page, it going to have about maybe five links so that you can check out what I have done with my work.

The bottom right, well that the page you will be looking at when you have click on my home page. I have the title on the top life while the nav. will be a little over left to the right. For the info. it will be in the space below.

So Till NEXT TIME! BYE!

First Blog

2010-07-13T09:20:00.000-07:00

HELLO EVERYONE

My name is Cynthia Kong and my major is Web Design. I go to Ai (Art Institute of CA-SF) and I been here for a year.

My web design skill are in approve.

(more is coming)