Saturday, January 21, 2012

Building Blocks

When I poked my head out of the undergrowth this winter, there was a handy task waiting for me. Making a website for the educational publishing business I’m starting with my partner.

Making a website?? Really?

Okay, I knew a bit about it. I had done some website work with the help of my brilliant friend Chris Ashburn. I had learned some HTML. But that was seven years ago. The confidence had disappeared along with the HTML, deep into my brain.

Photo courtesy Marjan Krebelj on Flickr.com

But I wanted to do it myself if I could.

So I got my website installed on Wordpress with the help of the amazing Wendy Cholbi (she translates tech into English and has free office hours! How awesome is that?). She set me up with a very customizable free theme called Atahualpa. All I needed to do was to do the design and organization.

The feet first method

Okay, I said to myself, I can learn how to do this. I have been lucky enough in my life to learn many things fast and easily. The way I automatically start is to jump in, follow whatever directions appear, and hope that I’ll be able to do it. This does sometimes work.

So in I went. I found the Wordpress dashboard with all the options. I didn’t know what half of them meant. CSS? Widgets? Plugins? PHP code can be used in HTML inserts?

Atahualpa has a very active help forum. So I went to look at some of the threads, hoping to find some guidance. I found things that looked like this:


img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#wrapper {
position:relative;
z-index:1;
}

Yikes!

I almost gave up. What I was saying to myself was, “I don’t know this. I can’t do it.”

And another way

Then I stopped and thought about it. I knew that I really wanted to do this myself. I wanted to be able to update the website without help. I was ready for a challenge.

And I thought about those words I was saying to myself: “I don’t know this. I can’t do it.”

Now wait a second. Of course I don’t know it. I haven’t learned it yet! I was expecting myself to already know the thing I wanted to learn.

And I felt myself switching modes. Remembering another way that I love to learn. Remembering how exciting it is to find building blocks.

Building Blocks

When I’m faced with learning something large, I love to start with the very basics. I did this when I studied Spanish in evening classes with my partner. Even though I knew some bits of Spanish, I wanted to start at the very beginning. I wanted to write down a very short list of words in my notebook. I wanted to memorize the basic verb conjugation and make sure I really knew it. Why does this feel so good?

Here's part of a mindmap from a few years ago, in which I was exploring the ways I learn.

What I learned from the mindmapping process:

• I’m allowed to be a total beginner. I’m allowed to not know a single thing about it.
• I know I’ll have all the tools I need to learn. I won’t be lost.
• I won’t miss anything because I’ll be learning from the ground up.
• The big foggy mysterious thing will form itself into an order.
• I’ll be able to go as far as I want to!

So I started looking for building blocks.

I started by reading Pamela Wilson at www.bigbrandsystem.com. She talks on a beginner level about choosing colors, fonts, and layout for your website. Choose two main colors. I can understand that!

Then I found some very simple Atahualpa tutorials. “How to upload a header image.” Three steps. “How to set the width of your site.” Two steps, with explanation of fluid and fixed widths. Okay, I can understand this.

Then I looked at my site and picked just one thing that I wanted to change. Let’s see. I want there to be blocks of color on the sides so it doesn’t just go off into space. I looked around on the dashboard and saw “style and configure sidebars.” Aha, that must be it! Indeed, there it was, and I was able to add sidebars with different colors.

Pretty soon, though, I found things I couldn’t quite figure out. So I went back to the help forum with the awesome volunteer moderators who answer your question the same day you asked it.

I asked my simple question: how do I make some space between my menu items, which are all crowded together? The answer came back: insert padding in the CSS.

Oh-oh. Padding? CSS?

Back to the building blocks. I had heard of CSS, but only vaguely. So I found the best tutorial website: www.w3schools.com. And I did my building blocks again.

CSS tutorial, first lesson: Here’s some CSS code that controls style and layout. Look at it and play with it.
CSS tutorial, second lesson: Why they invented CSS.
CSS tutorial, third lesson: Here is what a CSS rule looks like. (I love the giant green ovals!)


Aha! That’s what all those curly braces are about!

But how do you tell it that you’re talking about the page menu? Back to the forum, copy and paste the bit of code for the selector (it was u.rMenu li).

And I wrote my first CSS code: ul.rMenu li {padding-left:30px;}. And the page menu items magically moved to where I wanted them. I can't tell you how good that felt!


The routine

And now I had my web design routine:

• Identify something (usually a very small thing) I want to create or change on my website.
• Surf the dashboard to see if I can tell where to do it. Usually I have no idea.
• Search the help forum for similar issues.
• Try something.
• It doesn’t work. Not only do I not have the right color, but the whole page menu has disappeared. Take a breath.
• Search the forum again.
• Try something else. Repeat several more times.
• Post on the forum asking my question. Get back an answer very quickly.
• Discover that a piece of what I don't understand is too elementary to ask the forum. Call Wendy Cholbi’s free open office hours and get the missing piece of information.
• Continue trying things until the magic happens.
• Run squealing down the hall to tell my partner that it worked!

This is a very slow process, but it’s getting faster.

And I’m understanding more and more. For instance, when I went looking in the forum for an example of intimidating code, I had trouble finding one. It makes sense to me now.

And I have a website

And I have a website. Go look at it! It’s at cheeringelf.com. I made it! I learned how to use hex codes to make a consistent color scheme. I learned how to insert an image in the sidebar. I learned how to make a mailing list with Mailchimp. I learned how to make a downloadable form. I learned how to make a shopping cart with E-junkie.

I did it! With my building blocks.

And because I almost never learn or create something without immediately starting to teach it, I’m going to help my friend move her website to Wordpress. More unknown territory! More questions!

And the building blocks are still there.

Join me in the comments! How do you like to learn? What is intimidating you right now? What are the building blocks for a field you know?