RSS

Reflections on week #2, or how I jumped the gun with CSS…

21 May

I learned quite a bit from this week’s assignment where we had to put tags on Jamie’s text file. Being the type A that I am 🙂 I wanted to make my text file look exactly like Jamie’s, even though I knew the indents were there to make the code read easily. But how do you indent something on a web page in this day and age? That’s right, CSS! I sort of knew this organically but wasn’t too sure; help from Jamie and sedmikrasky in the IRC chat room confirmed what I already knew and had found by googling. (Here’s the mantra, say it with me, “HTML for structure, CSS for appearance, JavaScript for behavior”). Being the curious person that I am, I then wanted to know how to indent using CSS, because I needed to indent IMMEDIATELY!! I followed a CSS tutorial at http://www.html.net/tutorials/css/ and learned that there is a CSS property called

{

margin-left:

}

that lets you indent. Now here’s where the major learning came in (I learn best by actually applying things I’ve learned to something I’m working on, rather than knowing it theoretically)….I read in the tutorial that the value of the margin-left property consists of a number and a unit (pixels, centimeters, inches, what have you). So I made a class “.tab” and put a value in my CSS sheet (thank you, Jamie, for showing me how to read the source code for CSS sheets):

.tab {

margin-left:60 px;

}

(Apologies; I can’t get the previous statement to format (indent) the way I want. I need a CSS sheet for this post!!)

and called the class in my html

<p class=”tab”>
Paragraph paragraph paragraph paragraph paragraph<br />
paragraph paragraph paragraph paragraph paragraph<br />
paragraph paragraph paragraph paragraph paragraph.
</p>

but it didn’t work!! I was so disappointed! I put other properties in my .tab class that did work, like colors, so I knew my .tab class and calling the class were okay; the problem was somewhere in my margin-left statement. Here was the problem (which took me a while to figure out): you cannot leave a space between the number and unit values in the value statement. It must read 60px, NOT 60 px.

I know we haven’t done the CSS portion of the course yet, but all you CSS newbies, don’t be frustrated by leaving a space and having your properties not be applied!! You can bet I’ll never make that mistake again 🙂 — that’s what I mean by my learning better when I actually have a problem to solve.

I thought the part of our assignment where we tag photographs of the world around us was fun, and an interesting way to look at HTML. It was especially interesting to me because I tend to see things very literally and don’t consider myself too creative, so the assignment took me out of my “comfort zone” and helped me to see HTML in a more creative light.

Looking forward to more fun learning in week 3! I really do love learning new things…

Advertisements
 
 

Tags: , ,

One response to “Reflections on week #2, or how I jumped the gun with CSS…

  1. Jamie Curle

    June 10, 2011 at 7:26 AM

    Good show for taking it into your own hands and jumping ahead – you’ll learn a lot like this, I did, but in the process I also picked up a few hard to ditch bad habits – but don’t fret we’ll iron them out,

    I commend your commitment to getting it to look exactly the same, well done Sir.

    yes, small errors in syntax will have you reach levels of frustration that have never been reached. Only a few years ago I spend all day trying to fix a bug that was the result of one missing comma in a 2000 word file. That was not fun.

    Clearly your learning and enjoying yourself, so do keep this up.

    Cheers,

    Jamie.

     

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 )

Google+ photo

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

Connecting to %s

 
%d bloggers like this: