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.
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.
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.
Weekend Coding Homework #2 went smoothly for me for the most part. My enhanced website looks a lot sleeker and more user-friendly than my previous one. Linking CSS to HTML files is something that I had struggled with earlier, so finally learning how to do it the right way was a major step in the right direction (and made me feel a little silly I hadn’t gotten the hang of it on my own). I really enjoyed being able to manipulate the CSS and see the changes instantly on my enhanced site. Things like margins and adjusting the width of the <p> tag make a big different right away — especially when it comes to the user experience and being able to read text quickly and easily — so it was really gratifying to see such a big difference with just a few lines of code.
My struggles with this assignment were less with the code and more with Filezilla. I made a lot of stupid mistakes when I was transferring the files and ended up trying to reupload the old files from Friday’s assignment and tearing my hair out in frustration when the links didn’t link to the enhanced website. I think this was a problem I ran into so frequently and egregiously because the file names were all so similar from the first project, so I don’t anticipate this being a problem in the future when we’re using CSS on different webpages. But I guess I still need to practice making sure I’m in the right folder and using Filezilla correctly as the class progresses.
My Filezilla problem also meant that my relative links kept breaking, but as soon as I got all the different folders straightened out and was finally updating the right files, they worked perfectly. The code was much shorter and easier to write. I can definitely see why these kinds of links are preferred.
At this point, I don’t really have any questions about CSS. Now that I have figured out the problem with attaching a separate CSS file (I must have been misspelling something before) I’m just excited to use CSS in as many was as I can. Something specific that I’d like to learn how to do with CSS as we progress is to learn how to make photo galleries. My boss at my internship isn’t happy with their website’s gallery system and I would like to have some knowledge of how to fix it.