Last day of class.

I can't believe today was the last day for MM2203. We presented our CSS Zen Garden, 1KB, and our personal sites. I received pretty good feedback. I just had to make the content more bold so the text can be more readable. I finished my process book for my CSS Zen Garden. You can see it here. I absolutely had a great time learning about CSS. See you next semester Sharon!

Update on Zen Garden.

I did my Zen Garden all over again. It was getting too complicated for me. So here it is.

I finally finished my Zen Garden. I honestly would say that it was difficult because I couldn't touch any of the html. Here's my Zen Garden.

Zen Garden Research

For the zen garden, I'm thinking to do a beach inspired. I want to find a picture of sand so I can use it as a background. For the layout I want to use blue for water and create boxes so I can put the text.

This one is an ocean inspired. I like the concept of the design, it's what I was heading for to design but I feel the layout could be different like possibly adding more details around the text than making it simple.

This one is another beach inspired. I definitely like the layout and color scheme. 

This last one  is another beach inspired. I like the concept of the design I think it should've been a different color and layout.

Tutorial and Zen Garden

Today I presented my tutorial to the class. I was pretty nervous but I made it through and everyone seem to understand it. I just needed to optimize my images because they were running slow and the images were too big.
Zen Garden- For the zen garden, I want to do a fun design, more like a beach theme because they didn't want anymore flowers or anything related to garden. I'm thinking to add sand/beach on the top with the title and have the sand at the bottom maybe with some animals or toys.

Midterm Tutorial

Hi guys today I am going to show you how to create sliding pictures by using css. There was a lot of awesome tutorials online but I thought this one was cool and I would like to share it with you. Here is a demo of what we are going to do.  I will have the pictures in a folder and will put it in the transfer drive.

First we have to open up dreamweaver and make a new page. We are going to make a div class for the h1. We are going to name it "Picture Gallery". Instead of making a separate css were going to do it on the same page.
                                           

It will start to look like this.

                       

At the bottom of h1, we are going to make 8 boxes with a tag called "boxes". We are going to make a class outside the "boxes" tag called "pics".

For the "boxes" we have to add we have to add float, width, margin, and etc.

It will look like this. 

For the "pics" we have to add width and height.

After we added the width and height, it will look a bit organized like this.

Then we are going to add the pictures.

1.

2.

It will start to look like this.

Now we are going to make the box move when the mouse is over the picture.

We are now finished and it will look like this. (I put the mouse on the 3rd picture and it moved to the right to show the whole picture)

Chapter 3 Homework

This is my homework for Chapter 3.

Week 4- Google Analytics

This morning we signed up for the Google analytics to track who sees our website. We also talked about buying domains for cheap and there is a trick to get it more cheaper at godaddy.com. I would want to buy a domain in the future but for now, I think I'll stick to my Aisite. I will be posting more in the afternoon.

Absolute, Static, Relative and Fixed Positioning Tutorial

Today we are going to talk about Static, Relative, Absolute, and Fixed.

 Static: The elements will be in the same place where it usually starts on the page. When you type in static and hit refresh, it will stay positioned as it usually does.

Relative: The element are positioned in relation where it would normally be in the page. As you can see, it will overtop the element.

Absolute: It removes an element from the document flow and it goes anywhere we tell it to.

     

Fixed: The element will stay even when scrolling. Try adding 0px for the margin and top. When you check on safari and try scrolling down, it will stay where its positioned and will stay on top on the other element behind it.

Week 3- Standards 508

On Tuesday we watch a video about accessibility and usability. It was about how people who have disability can use the internet. We also got to hear an example of a website with the accessibility on. In my opinion, I feel bad that people with disability that enjoys browsing the internet has to use it like that. We did a little exercise about using div tags and at first I was pretty lost because the css was all over the place. (No offense) So I didn't know where to start. I tried to start taking out the tables on the days and weeks and tried creating div tags for it. So far, I think it went ok.

Box Model Tutorial

What is a box model? For a brief overview, a box model is a layout of four parts. It contains:

-margin

-padding

-border

-content

The margin, which goes on the outside, clears an area around the second box, which is the border. The margin is completely invisible. The padding which is the third box, clears around the content. The content is where you put text and images.

Now to the tutorial...

First we have to open up Dreamweaver. When it is open, you want to click on the split so we can see the code and design. You will see that there is a Doctype so we can leave that there.

You want to change the title from Untitled Document to Box Model Tutorial.

Now so we are going to create a css so after the head tag, we are going to type:

After that we are going to write in the body. First we have to create a line on top of the box. So we are going create an image.

After the line we created (img src), we are going to type in the box. So we have to make a div class and name it box. After that we will type:

We are going to save it and call it "box_model.html". Once you saved it, you will see a little box on the design section.

Voila! You have created a box model. If you have any questions, comments, or suggestions, comment below and i will get back to you. Thanks!

Week 2- Speech Bubbles

In the morning Sharon talked about what we will be doing in the upcoming weeks. We did an exercise on dream weaver. We did speech bubbles, we did some few changes on the css. At first I was a little confused because Sharon told us to make triangles on the comment box but mines turned into squares which was a little weird at first. After we tried to add gradients on the comment box, everything started to fall right in place. We watched a video about how to do the nth-child which was a bit confusing at first but I think I got the hang of it. We tried to rotate the images to slant the other side by using nth-child. For homework, we have to make a box model so I have to finish this post right about now.

Results for Web Speed Report

Today I submitted my blog on the website optimization and my HTTP results turned out to be 22 with the total size of 59075 bytes. I am pretty confused with the results because it says I have too many images and I haven't posted any images. I don't know if there is something I should do. Any help would be great!

First Post

This will be my blog for my MM2203 class Intro to Web Design.