Just a college student trying to make it through Web Design

Archive for February, 2013

Mini-site #2

My mini-site about desserts!

My mini-site about desserts!

Mini-site #2, how you make me blue! OK, so I haven’t turned blue, but I was very frustrated when creating this minisite. Although I tried and tried, I just could never get it to meet my standards. Or maybe my standards are too high because CSS and HTML do take some practice. The hardest part for me was (trying) to get the hyperlinks to float and look good. First, I could only hyperlink every category of the main navigation bar. If I tried to un-hyperlink one, it lost the formatting. Second, I wanted to have the recipe navigation bar directly in the middle of the page, but I could not get it to be vertically down the middle without it messing up my columns. I ended up having it float next to first paragraph on the overview pages. It’s not cool or fancy by any means, but it’s not an eye-sore.

Other issues I encountered were making sure all of my tags were closed. I must have been stressing out for 15-20 minutes on what happened to my format before I realized I needed to close a <a href> tag. It also took me a while to add a space below the recipe navigation bar and the ingredients heading. I don’t know if this was entirely proper since I did it through HTML, but I added <br> tags and that helped me created a space.

To be honest, this mini-site was not smooth sailing for me. I felt like it took me much longer than it should have and I can’t even remember all of the little issues I experienced. However, I am going to end on a positive note. Through all my necessary and unnecessary experimentation, I gained a better grasp of pixels, ems, and percentages. Also, even though it was frustrating, creating the website was also fun. I just need to remember not to get discouraged because this is a lot to take in and master!

View my mini-site #2: All About Desserts! 

Coding #3: CSS Floats.

Don’t get me wrong, CSS is still super awesome in my book. All web pages need a little spicing up and CSS is the only way to do it (so far). However, I was in the front seat of the struggle bus with coding assignment #3. It did take me a long time to finish and I had to keep re-doing certain parts over again. And re-reading certain parts over again. Although I did finish the homework, I cannot say it was a smooth process. I might be slightly afraid of what future CSS assignments entail… but for now:

With the 15-1 exercise, I gained a little more knowledge about floating by floating images. During class, we only floated text boxes, so it was cool to see the effect on images. This was definitely the easiest part of the homework for me. Sadly, that’s not saying too much.

Screenshot 1. Exercise 15-1. The "easy" part.

Screenshot 1. Exercise 15-1. The “easy” part.

Oh, the tabs. At first, these little things were hard to get a handle on. It took me a bit to catch on to the border-radius property, but after that, it was not so bad. In fact, I really liked the border-radius property because rounded ages do look better. Even though I somehow got the tabs to look fairly decent, I feel like my experience/knowledge with margins and padding could use some more work, seeing as I just played around with the properties until they looked OK.

Screenshot 2. Customized Tabs HP Style

Screenshot 2. Customized Tabs HP Style

Absolute positioning and relative positioning: Two concepts that should not cause me great difficulty but definitely do. Although I still need to practice more to get the feel of the positioning, It’s cool how you can position a float based on the relative position of another.

Screenshot 3. 15-4. Hope (hopefully) Floats

Screenshot 3. 15-4. Hope (hopefully) Floats

So, not having a pre-packaged book exercise to go off of was quite challenging. I couldn’t figure out how to float the images in different directions for the longest time. I eventually created each image tag as DIV ID and floated them that way (I tried to do image class but for some reason, it didn’t work). From this part, I learned that the DIV tag is very helpful when you want to create different content from the whole story.

My images may be more like islands in a pond...

Screenshot 4. My images may be more like islands in a pond…

I actually did not have any problems I can think of with the SPAN, all things considered. I think it is awesome to have the ability to take chunks of text and float them wherever. This might have been my favorite part of the homework.

Screenshot 5. SPAN... it treats me well. At least, it looks right.

Screenshot 5. SPAN… it treats me well. At least, it looks right.

Coding #2: CSS Basics

Plain

The Plain Old, Same Old HTML. It is actually quite nice, though…

Peanut butter and jelly, ice cream and cake, HTML and CSS: these are just a few of the  inseparable pairs that I have come to know and love. For this coding #2 homework, I found myself really getting into CSS, especially when I got to the crazy part. Corny as the book chapter was, I really enjoyed reading it and becoming more familiar with creating classes in the CSS file. Additionally, the hands-on portion in class last Thursday really helped me with this homework.

Cray-Cray

Love it or hate it, I get crazy with my colors!

When coding the homework, I did not really run into any problems, except I did think my plain.html border was wrong when I was comparing it to the original picture posted on the assignment description. However, I just decided to follow the directions and everything turned out alright. I also was thrown off by the <DIV> tag when I first opened up the file because I glanced at it before reading the directions entirely. Of course, it was nothing to be worried about. The only true issues I came up with was remembering to properly space all elements and add the semicolon at the end of command. Some changes I made to my CSS file were to change the album detail font to serif font, Georgia (Baskerville Old Face, Serif) and changed the copy to sans-serif font, Helvetica (Arial, Sans-Serif). I also made the images to be 300px and added lots of color.

Even though CSS is fun to code, I think the real reason I really like CSS is because I love color. I repeat, I love color. I went a little crazy with the border with the dots, dashes, and colors. The assignment was to create a crazy file, right? See all my craziness and my love of color at my first CSS Basics site.

Tag Cloud