Week 11B

Today in class we had to work on two CSS tutorials since Pannafino was not here. The tutorials went over CSS Coding. Part one was the basics while part two went into more detailing and quicker way to do your CSS coding. I apologize in advance for accidentally doing part two before part one but I will be showing them in the correct order.

Here was Part One:

I just used the tutorial from our first day working with html for this tutorial.

First all I had to do was style the h1 heading of my page

As you can see, other than the heading, everything else is from part 2. The coding above is what styled the "My First Webpage," part of the webpage.

This was the first few parts of the CSS coding we had to do:

Here I added in the h1styling:

and here is the coding for h2:

Here we had to use an ID to create a colored padding around the top part of our page:

 (I apologize again for things possibly being out of order)

Here is Part 2:

Once I was finished with everything I went back and fixed it up a bit, some things are missing but you have to admit, it looks a lot prettier.

Week 11A

Today in class we started our third and final project. For this last project we have to create a webpage on a designer/artist using HTML and CSS. We had to choose from a list of designers Pannafino gave us. I picked Jessica Hische who is an illustrator/type designer/letterer. Once we picked our artists we had to do some research and create a content sheet. I started out by checking out Hische's website, http://jessicahische.is/awesome, and looking over her work and reading her autobiography.
I also checked out http://jhische.com/index.html which had some more information on her and showed more of her work.

Here are some screenshots of her work:

Week 10: Outside the Classroom

For homework we had to watch "Don't Fear Specificity," on Don't Fear the Internet. This video just talked about how to target content in your html using classes and IDs. CSS likes specificity, IDs are the most specific followed by classes and then elements.

Week 10B

Today in class we started talking about CSS (Cascading Style Sheets) and how to use them to style our web page. There are three different ways of using CSS:

1. Inline, this is where you put the style you want within the tabs of your html page
2. Embedded, this is when you put all the styling within the head tag so it covers the whole page
3. External, this is the most commonly used. It is when you create a separate CSS document and write the coding for each part you want to style and connected it to your html page through a link in the html coding.

Link in html when using External CSS coding:

There are different parts of the CSS Syntax; there is there selector, the declarations, the property, and the value.

Within CSS coding there are three different ways to style what is in your html.

There is simply typing the tab name and styling it:

(view of webpage)

There is using classes. Classes are not very unique,  the same class can be used on multiple elements and multiple classes can be used on the same element.

(this is how you insert it into your html)

And then there are IDs, which are very unique. Each element can only have one ID and each page can only have one element with that ID.

(this is how you insert it into your html, don't forget to close! </div>)

Before creating an external CSS document to create all the styling, using inline CSS this is what the homework from last class looked like:

We used this in order to style our made up resumes that were homework from last class. All the styling you see here is done through a separate CSS file:

This is what the whole CSS document looks like as of now:

Week 10A

Today in class we started talking about the Internet/WWW, and HTML. We started off talking about what the Internet is and then  went over a few terms such as HTML (HyperText Markup Language), FTP (File Transfer Program), and WYSIWYG (What You See Is What You Get). After that we watched a few videos on "Don't Fear the Internet," that went over how to use HTML to create a webpage.

Once we were done with the videos Professor Pannafino gave us a HTML Tutorial that we had to work on. Here is what we did:

At first the tutorial just had us type into our text editor (I am using Sublime text 2) "This is my first web page," save it as an html file and open it in our browser. All that came up was our text "This is my first webpage," on an all white background. Then we stated getting into more detail.

Next I had to put in tags. When I refreshed the page, it looked the same but that is to be expected.

I then created a title which put text into the tab on my browser.

I then had to break up the text so it was not all on one, single line.

I then worked with then emphasis and strong tag which added detail to the text.

Notice: "is" is italicized because of the <em> tag and "Warning:" is bold because of the <strong> tag.

Next was creating headers using the different header tags. Then are 6 different headers, h1 being the biggest and h6 being the smallest.

After that I worked on creating lists using the <ul> tag which creates a bullet point list.

After that I used the <ol> tag to create a numbered list.

I then had to create a list within a list.

I then had to create a link to a webpage, I decided to just us Google.

Once I clicked on the link above, it took me right to the home page of Google.

Week 9B

October 21st

During class today we had our final critique for our 404 Error page. When it was my turn to go, I went up and presented my page to the class. I explained the website I created it for and why I created my page the way I did. My classmates suggested the following:

• Match the backgrounds so they blend together
• I managed to fix this after presenting and will make sure it gets back into the right folder.
• Change the font of the text on my page so it better matches that of the website's main page.
• Possibly switch out the Polaroid camera for a more modern one
• Maybe use a different photograph for the error page, possibly one of a family and use Photoshop to make it look a bit aged to go along with the vintage-like feel of the website.

I do plan on going back into Photoshop with my error page and using the suggestions my peers gave me to create a more successful 404 Error Page.