Coding like a (New and Inexperienced) Pro: Project Reflection #2

As I was exploring CSS in the middle of this semester, the one piece of advice I read again and again was that the best way to learn to code was to just jump into coding.  Well, I have jumped in, and my Google Site now has custom fonts, custom font colors, and custom spacing ... all brought to it by CSS Coder Susanne Nobles!

Let me show you what I have done.  First, fonts:

Applying the Ledger Font

Notice the ledger font code at the start of the HTML?  I wrote that.  Notice that Times New Roman: Serif is still at the bottom where I had not yet coded.  As I coded for font, the syntax became much more natural for me -- where to put the carrot parentheses, where to include quotes or dashes, etc.  I then took this playing with font and applied it to the right-hand column of my page without copying and pasting the code.  I wanted to really test myself.  While I got the syntax right, what I did not do right away and therefore had to redo a few times was the command.  I did not have it at all at first, then I put it at the front without remembering to close it at the end, and finally I had the whole code set from start to finish.  I laughed out loud when I saved the page and saw the font change exactly where I wanted it to.  (Oh, I was also customizing the color to navy as I did this.)

What this playing did was help me to really see how the chunks of code show up in the HTML view.  I then jumped into trying to fix the crazy spacing of my images and their corresponding numbers.  Here is a view of how they looked as I tried to space them just using the visual editor:

Spacing Frustrations

I could not for the life of me get the rows to line up in a visually satisfying way.  It would look one way in the editor and totally different once saved, plus the numbers kept drifting and changing font.  So, I started to practice with spacing via coding in the bottom textbox where it was a little more straightforward since it is just text.  Here is what the code looked like at first:

The font was not even set right, let alone the spacing I wanted.  Here is the code I wrote and adapted:

This code made my font "Ledger" and the right size, changed the spacing to center, dropped out the extra spaces between the lines of text, and fit the image citations underneath it all.  I was really thrilled with how this bottom textbox ended up looking.

Before I link you to my site to see this though, let me tell you about coding the three columns.  In the first and second column, I controlled the spacing by simplifying the existing code to have simple
breaks (the more complex breaks turned out to be what did not match from column to column), and I changed the font and spacing of each of the numbers.  In the third column, I changed the font completely by hand -- font, color, and size -- and completely messed up my spacing doing so!  So, I dug into the code to see where spans were beginning and ending and saw where I needed to add additional spans.  Because I have bullets in this column, the spacing code was incredibly messy.  For me to be able to discern where I was losing a font choice due to a broken span was thrilling.  So, now the big reveal!  Here is my draft Google Site!

I hope you enjoy examining the first page.  Maybe you will notice that I moved my genre icons around for a different visual order -- yep, I had to redo the spacing coding after I did that!  I am still thinking through the sub-pages and what I want on them for my class.  (I have found that I am moving back and forth between my second and third steps of my plan.) I have already added some things to the short story page that I had not used on our class wiki before -- the vocabulary list and master techniques list.  Being able to take notes on these collaboratively will be a big help because they are the first big note-taking tasks of freshman year.  To see how different people take notes when they are the class scribes will allow for excellent conversations about this important skill.

While I have much left to do on my site, I feel like I really made a breakthrough with my work because I am designing the site both with its tools and my manual coding simultaneously.  Neat stuff.