Blog Assignment #4 | My Dream Computer

I have rotten luck with computers — they inexplicably crash, video input stops working, and keys fall off seemingly at random and with high frequency. This is the fourth laptop I’ve had since I started high school, so the road of new computer shopping is well-worn for me, though still a little bit scary. Such an expensive purchase is something you have to mull over very carefully, because unless you’re satisfied with what comes in the mail, you have to deal with the hassle of returning it or swapping out parts. I usually have to find a model I like, get five outside opinions, and mull over the computer for at least a week before I buy it. So for this assignment, I had to face this fear head on and just go for it, with a $1700 budget (for the record, I could spend much more than that on a computer. Oops)

Continue reading

Cooking with Friends, or the Dangers of Giving Intrusive Javascript to a Cannibal | Minisite #3

A screencap of the registration form on my website, which prompts users to fill out information to make an appointment with Hannibal. It's not too late to press the back button!

A screencap of the registration form on my website, which prompts users to fill out information to make an appointment with Hannibal. It’s not too late to press the back button!

This minisite was an enormous challenge for me. Despite all the practice with JavaScript in class — and even after this project — I still feel a little shaky about my programming skills. Nevertheless, with a little luck, a bunch of help,  and a lot of troubleshooting I was able to wrangle together Minisite #3. My website is Hannibal-themed, because what better way to demonstrate how potentially dangerous intrusive JavaScript can be than through a man who uses it to track down his victims? (Fridays at 9 PM Central on NBC!)

The JavaScript coding was a long, arduous, uphill battle throughout. I spent hours just trying to re-understand the syntax of things as simple as document.getElementById and the way variables are set up. Sometimes things just don’t stick, but you just have to keep at it until you get a grasp of the concept as best you can.

did have a few specific problems that I’m proud I figured out. I had particular difficulty with trying to use conditional logic on elements in a drop-down selection list on the registration form. A major chunk of the ‘Commerce’ page revolves around what axiom a user picks from a drop-down menu to describe them best. The phrases are all plays-on-words of body parts, so if the user selects that they think they are “forward thinking,” the JavaScript squirrels that information away and presents it on the commerce page as a recipe for brains. I couldn’t get that particular section to work in the registration page, so I ended up referring to the option ID’s as strings on the commerce page, and it finally worked! Sometimes you just need to attack the problem from a different angle.

I also had a problem where the conditional logic of my radio buttons wasn’t working for hours. It was, of course, caused by the fact that I used curly braces instead of parentheses in a crucial block of text. I was glad it was an easy fix, but it’s amazing how much you can fret over such a stupid problem.

Overall I probably spent about 15 hours on this site and found it very difficult, but I’m very happy with my final product.

Javascript and the DOM | Reflections


A thrilling screencap of my planets website, with the additional changed message of “It’s life, Jim, but not as we know it” on the “blue planet” portion.

I’m excited to be finally starting Javascript in this class — aside from some navigation bar problems that are well-documented, I’m fairly comfortable with the basics in CSS & HTML, but I’m completely new to Javascript. These are uncharted waters for me, and I’m nervous but ready to learn. The chapter was daunting in length and scope, but ultimately pretty easy to parse. The structure of Javascript feels very similar to Actionscript, which helped me get more comfortable with the structure. It still feels a little weird — especially since I’m learning Python right now in Programming Logic, and all these slightly different coding languages can be hard to keep track of. But I’m sure that after a few hours of practicing the basics, I’ll be able to write it more confidently without flipping back through the book to make sure I have the right syntax.

One part of the homework confused me, however. It was on page 61, the “Secret Message” homework, where it asked you to “write the element each line of code selects, as well as the content of the element to reveal the secret meaning!” I was unclear on what “the element each line of code selects” referred to. I understood that the assignment was asking us to find the corresponding words in the DOM with the lines of code, but the first part of it confused me. I didn’t know if it wanted me to write down “E7” or “E12” etc., as well. That was the only real trouble I had with the assignment. Other than that I think that mastering (or at least being able to use) Javascript will come down to adequate practice and time!

You can see my planets website here. I hope I added my new message correctly — I just replaced the old Blue Planet text with something new when the page loads, just like the Green planet.

The CSS Bakery: Trials & Tribulations of Nav Bars


A screenshot of the Black & White Cookies recipe page of my finished site, displaying the bulleted lists, navigation bar, header, and picture elements.

For my second minisite assignment, I selected the topic of a dessert recipe exclusive website. This allowed me to give the website a whimsical, fun atmosphere, and I had a lot of fun selecting from bright, spring-y color palettes and curly serifs in my mockups and design of the site. My three sub-categories of desserts were cupcakes, cookies, and cheesecake, which are all things I enjoy and I knew would match the site’s design. However, despite the fact that I had fun coming up with the visual design of the website, the coding proved to be one of my toughest challenges yet. My minisite can be found here for your viewing pleasure.

Continue reading

Website Assignment | Romance Films

This assignment was a doozy of a challenge to tackle, if I’m being honest. I’m fairly comfortable with the basics of CSS, and the article on floating content seemed self-explanatory. But when I attempted to put the principles outlined in the article and in class into practice, I ran into some pretty significant stumbling blocks. However, in the end, I was able to reconcile most of the problems I had, and I’m happy with my overall finished product, which can be seen here.

Continue reading

Graphic Design | Typography

Web Typography

Trekcore, a Star Trek fansite, was chosen as an example of poor web typography for the purposes of this exercise. The typography on Trekcore’s website is varied to its detriment — at least five different fonts are featured on the homepage, each in different weights and colors. This jumble of typefaces and colors contributes to an overall cluttered feel, and negatively impacts the users’ experience. In the article on Smashing Magazine, “One More Time: Typography is the Foundation of Web Design,” designer Paul Scrivens explains that “For 99% of the designs out there, typography and white space are going to be your underlying foundation.” Trekcore uses neither of these well, so much of the design of the website had to be drastically changed in order to make a significant difference to its current typography.

Continue reading

The Hero of W3, the Man they Call Sir Timothy John Berners-Lee: CSS Practice


A screenshot of my finished page. The div tag is a powerful tool. So powerful, in fact, that when I tried to type it here with brackets, it utterly messed up my caption and I had to type it again. Technology is amazing.

Debrief: Coding Assignment

The in-class exercise gave us the task of attributing class tags to different chunks of text in an HTML file and manipulating the accompanying CSS file to make them each display different text. My webpage can be found here for your viewing pleasure.

This was a really useful assignment for me because I’d never learned how to use tags. I knew there was an easier way than just manually changing the text every time, but I didn’t know what it was (and couldn’t put it into words to try to use google to find an answer). I’m so happy I know the answer now!

As soon as I figured out how code could be changed to include class tags, the assignment flew by. I had no problems (for once!) and it felt great to see the page coming together from raw text to something much more readable without tons of broken images or messed up code. I’m really excited to learn how to use classes to build more complex websites more easily — no more manually entering HTML to change the look of text!

Debrief: Smashing Magazine

I like to think I have more than a passing knowledge of graphic design, but some of Smashing Magazine was incomprehensible to me. For example, references to font “hinting” in an article by Laura Franz, “Dear Web Font Designers,” were completely foreign to me. I’m not sure what the author meant by that or how it’s done, but examples of bad font hinting were pretty startling in how terrible they looked.

Another buzzword (or perhaps an industry term) that I didn’t understand was “slicing.” A google search revealed that this is just (to my understanding) a term for dividing up content, usually with something like CSS, as opposed to HTML tables.