Week 13A

Today in Digital Theory we first broke up into teams to have a little competition to see what team of three could create an image change using html and css. Sadly, my team did not win.
After that we took some notes and Pannafino explained the different types of fonts, Google fonts and how to use them, and subtlepatterns.com where he showed us how to download and use those images as backgrounds for our webpage. The rest of class was just time to work.

During class I added a background from subtlepatterns.com:

This is the pattern I downloaded to use

The coding:

The result:

After that I took the piece I created in Illustrator (which I did change a bit), saved it as a PNG file, and set it as the background of the title for my page:

The changed piece:

The coding:

The result:

Once I was done with that I added an image of Hische into the small tan box you see above:

The coding:

The original image I saved was much bigger than the space I placed it into, in order to get it to fit I had to alter its size using the background-size tag in my css.

The result:

Once I finished that, I removed the background color from the large tan box you see above and added a bio of Hische. I have not edited the font of the text within that area just yet but I do plan on going back into it.

Coding and result:

After I finished typing in most of her Bio, I started working on adding her artwork into each section. I added some examples of her book covers and illustrations into the designated areas.

Here is what my webpage looks like thus far:

Coding and result:

The plan is to get all the images into each area and then I will go back and add the text. For the last section (which you cannot see here) I will also be adding some links.

Week 12: Outside the Classroom

Over the weekend I finished creating the layout for my final webpage. Just like Jessica Hische's page, it is very organized and simple. While I wanted to do something fun and creative I also wanted to make sure the page looked true to how Hische would want it.

Here is the coding:

HTML page:

CSS page:

Here is what the webpage looks like:

I also created a title in Illustrator using two image of Hische's work and used a font I believe she would like for her name.

Here it is:

Week 12B

Today in class we first showed Pannafino our homework, the mapping of different websites' designs. He also had us talk briefly about what we observed while doing this. One thing I noticed was how most websites I looked at started out simple, had a good build up to the middle of the page, and then went back to being simple at the bottom.

After that Pannafino went over how to create floating boxes and columns for our webpage. He showed us how to create the basic layout of a webpage as well.

Once we finished that, the rest of the class was work time. Pannafino had us sketch out an idea or two for our webpage layout and then figure out how that would be created in a CSS document.
This is what I have so far (very very very rough sketch):

My webpage layout is very simple, structured, and organized. I noticed this is how Jessica has her personal page set up as well (not the same layout, but simple, structured, and organized), so I would like to keep it like that and not do anything too fancy.

After I sketched my idea out on paper, I created an HTML and CSS document and designed my layout there just so I could see how it looks. So far this is what I have:

Week 12A

Today in class we started out by looking over our mood boards and giving a mini presentation on the designer we are creating a webpage for. After that Pannafino briefly talked about web page layouts. One thing we are supposed to avoid is having a boxy layout to our web pages. Went then went to a few websites ( warchild.org.uk, cloudberrycreative.com, and thrivesolo.com) to check out their layouts and how they work. Once we were done with that, Pannafino had us look for three different webpages with simple designs/layouts and map them out to give us a better understanding of how this will work for our webpages.

These are the webpages I mapped out:

1. www.thehugo.com.au

When mapping it out, this webpage has a one column layout for most of the page, breaks into a two column layout, and then goes back to a one column layout before it reaches the footer.

2. pierres.com

This website has a navigation bar at the top of the page, a single column where the first image is, then it breaks into a three column layout, then breaks down further into a four column layout but where the text is between the images, each text box covers two columns. After that, the page goes back into one column.

3. ryanscherf.net

As you can see, at the top of the page is an image with the title places over top. The page is then broken into two columns, then three, goes back to two and then down to one. Very simple design with a good conclusion.

Out of these three webpage designs, I think prefer the one pierres.com has. It has a nice flow to it and I think something like that would really work for my designer webpage.

As of now this is what my moodboard for this project. I am not sure what else I should add to it but I do feel it needs a little more. All the images are of Jessica Hische's work, I added a color scheme, and her job titles using fonts I believe she would use (or close to).

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.