Putting the Pieces Together

With no reading for the week, I guess I’ll just jump right into my experiences working on the Type assignment. Hopefully some of my struggles and successes can help others if you’re having the same problems as me. Last time we met in class, my portfolio page was rather wonky. I knew right away that something was off because when I opened my site in a browser I had to scroll left or right to center it. Bad start. After our discussion (I really appreciate all of the suggestions) I decided to go back to the drawing board and start anew. I was worried that I had too many irrelevant properties in my CSS and those would inevitably throw me off in the long run. I imagine my site as a tower made of blocks, and if I don’t have a strong foundation, sooner or later my tower will come crumbling down. In any case, I scrapped my first site and built a new one. The color scheme remains the same, but it feels more complete than before. If you’d like to take a look here it is.

After feeling a sense of accomplishment for fixing up my site, I decided to press on and watch the Lynda.com video “HTML5: Structure, Syntax, and Semantics.” I found this tutorial to be extremely useful. It provided a solid grounding for me in terms of what the heck HTML5 really is. I had no clue about HTML or CSS before this course, so Lynda’s numerous tutorials have been imperative for me to learn the basics. Although it’s a long tutorial (as they all seem to be) it’s very informative. I recommend checking it out if you have time. Perhaps the most useful bit of knowledge I got from the tutorial was how to structure and organize my site. The instructor advises that you write down the main headings of the page and figure out the hierarchy. So simple, yet so effective. I used that technique when I started working on my Type assignment. I broke the page down into four parts: the heading (title), the introductory section, a section about northern newspapers in the 1850s, and a section about the southern papers. Much like Golombisky and Hagen, the HTML5 tutorial stresses simplicity. That’s something I too easily forget when I get bogged down with coding.

Now I’d like to address some issues I’ve had with the Type assignment. Right off the bat, I had problems making sure that I was altering the CSS for one page, not the whole site. I knew I needed to define a new CSS in the page and I did that. However, each time I created a new class I accidentally added it to site’s CSS. This happened when I created a class and a little caption popped up and asked where I would like the class added. I’m so used to hitting enter at that point, that it took me a while to realize I wasn’t altering the specific page’s CSS. That was frustrating. But at least I learned the folly of my ways and continued on relatively unscathed.

The next major problem I encountered was the figcaption. I just can’t seem to get that caption to fit under my figure (in this case it’s under an image I inserted). Initially, I was using a class for the image and a separate class for the caption. After way too long, I realized that these needed to be lumped together as the <figure>. Upon making that change, and changing the properties I had set for my image to better fit my figure, I still had issues with the caption. When I try to make the caption two lines, it always moves up and to the left of my image. I can’t figure out how to make it two lines and still fit below the image. There must be a way to do that and it seems like it’s probably a simple fix. Nonetheless, it eludes me at this time. Perhaps when I return to my work something will make more sense than it does now.


Filed under Uncategorized

2 responses to “Putting the Pieces Together

  1. Ben

    Mason, I can sympathize as I also spent some time reworking my portfolio page based on the comments we received last week. I didn’t completely scrap and redesign as you did, but I’m sure your page will be much better because of it. You also make a good point about keeping track of your various CSS rule by page vs the entire site…that can rapidly cause problems that could be difficult to run down later. I look forward to seeing your type project.

  2. Elizabeth


    I also had trouble with the caption! For some reason, my caption has a weird font that isn’t consistent with the rest of my page. (There’s probably something I’ve forgotten to do.) Did you try breaking the text by putting in your caption. I have no idea if that would help, but I’ve been digging around on the web and have seen other captions that have done that. It might be worth trying.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s