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?

39 comments:

  1. Oo, oo, I don't know if you want advice, but in case you do: I love love love the Firefox extension called Firebug. It's got a lot of techy things you probably don't care about, but it also has the ability to switch on a mode where you hover over elements of a page and can see what the HTML for that element looks like *and* what CSS is applying to that element. You can also edit the CSS that shows up in Firebug and see how it changes the site (it doesn't actually change your site's CSS permanently, of course, so it's a good preview and a way to play around and see changes right away). I use Firebug tons both at the day job and for tweaking my blog :)

    ReplyDelete
  2. Hi Riv! The guys on my help forum just told me about Firebug. I've downloaded it but haven't tried using it yet--can't wait!

    ReplyDelete


  3. http://www.shopbestgoods.com/
    http://www.nike-jordanshoes.com/
    http://www.beatsbydreoutlet.net/
    http://www.michaelkorsus.com/
    http://www.polo-tshirts.com/
    http://www.northsclearance.com/
    http://www.ralph-laurensale.com/
    http://www.gucci-shoesuk2014.com/
    http://www.michael-korsstates.com/
    http://www.polo-outlets.com/
    http://www.ralph-laurenhome.com/
    http://www.marcjacobsonsale.com/
    http://www.mcmworldwides.com/
    http://www.salongchamppairs.com/
    http://www.canada-gooser.com/
    http://www.burberryoutlet2014.com/
    http://www.michaelkors.so/
    http://www.hermes-outletonline.com/
    http://www.oakley-sunglassfactory.com/
    http://www.north-faceoutlets.net/
    http://www.moncler-clearance.com/
    http://www.woolrich-clearance.com/
    http://www.barbour-jacketsoutlet.com/
    http://www.moncler-jacketsoutletonline.com/
    http://www.monsterbeatsbydres.net/
    http://www.louis-vuittonblackfriday.com/
    http://www.lv-guccishoesfactory.com/
    http://www.mcmoutlet-jp.com/
    http://www.cheapdiscountoutlet.com/
    http://coachoutlet.iwopop.com/
    http://www.coachsfactoryoutlet.com/
    http://www.coach-blackfriday2014.com/
    http://www.coach-storeoutletonline.com/
    http://www.coach-factorysoutletonline.com/
    http://www.coachccoachoutlet.com/
    http://www.coach-factories.net/
    http://www.coach-pursesoutletonline.com/
    http://www.coach-outletsusa.com/
    http://www.mksfactoryoutlet.com/
    http://www.zxcoachoutlet.com/
    http://www.mischristmas.com/
    http://www.misblackfriday.com/
    http://www.bestcustomsonline.com/
    http://www.newoutletonlinemall.com/
    http://www.clickmichaelkors.com/
    http://www.cmichaelkorsoutlet.com/
    http://www.ralphlaurenepolo.com/
    http://michaelkorsoutlet.mischristmas.com/
    http://mcmbackpack.mischristmas.com/
    http://monsterbeats.mischristmas.com/
    http://northfaceoutlet.mischristmas.com/
    http://mk.misblackfriday.com/
    http://coachoutlet.misblackfriday.com/
    http://coachfactory.misblackfriday.com/
    http://uggaustralia.misblackfriday.com/
    http://coachpurses.misblackfriday.com/
    http://coachusa.misblackfriday.com/
    http://coach.misblackfriday.com/
    http://michaelkorss.misblackfriday.com/
    http://michaelkors.misblackfriday.com/
    http://airmax.misblackfriday.com/
    http://michael-kors.misblackfriday.com/
    https://www.facebook.com/pages/Coach-Factory-Outlet-Online-Store-Michael-Kors-Outlet-Online-Sale-75-Off/712060898859091
    https://www.facebook.com/pages/Ralph-Lauren-Polo-Outlet-Online-Sale/1404100279810690
    https://www.facebook.com/pages/Cheap-Beats-By-Dre-Outlet/626761787442143

    ReplyDelete
  4. Trắng da có nhiều phương pháp , nhưng hầu hết mọi người điều sử dụng các loại thuốc trắng da nhưng đặt ra nhiều câu hỏi quanh các loại thuốc này như thuốc uống trắng da an toàn , thuốc trắng da ivory caps có hại không , thuốc trắng da ivory caps có tốt không ? Đó là một vài câu hỏi liên quan đến thuốc làm trăng da ivory caps , cùng tìm hiểu nhé . Ngoài trắng da thì my pham nhat ban sakura còn giúp da giữ được nét tự nhiên và chống lão hóa vì dùng kem chong lao hoa sakura , ngoài làm trắng da thì còn là kem chống nắng tốt và giá cả thì cũng là vấn đề vì vậy có nhiều câu hỏi như kem chống nắng neutrogena có tốt không ,.. Có nhiều loại nên có nhiều giá khác nhau . Nếu gót chân bị nứt nẻ thì nên dùng kem kem trị nứt gót chân neutrogena foot cream sẽ giúp bạn có được bàn chân đẹp như ý.

    ReplyDelete
  5. Thoái hóa cột sống là bệnh rất thường gặp đặc biệt là ở người già , vậy cách chữa benh thoai hoa cot song như thế nào an toàn và hiệu quả , cùng chờ xem nhé. Collagen là sản phẩm giúp làn da trắng đep và trẻ hóa , chống lại sự già cỗi ngày càng tăng của làn da , có nhiều loại collagen tốt hiện nay như super collagen + c , collagen shiseido enriched và sản phẩm collagen nhat ban cũng không phải ngoại lệ. Ngoài ra còn có các loại collagen khác như fish collagen . Có nhiều dạng collagen như nước , bột , vien uong collagen ,.. Khi dùng có nhiều câu hỏi đặt ra như collagen neocell có tốt không ? uống collagen shiseido có tốt không ? Tất cả những câu hỏi này sẽ được trả lời sau đây.

    ReplyDelete
  6. Có một làn da đẹp và ngăn ngừa quá trình lão hóa da chính là đều mà hầu hết mọi phụ nữ điều ao ước có được 1234 diet drops , nó không quá khó nếu bạn dùng Oxynergy Time Exception Serum sẽ giúp đẹp da và ngăn lão hóa da hiệu quả và an toàn , ngoài ra khi ra ngoài nên kết hợp với trang điểm nhẹ nhàng bằng love me for me flawless finish powder compact , pillow plush cushiony lip balmlip gallery creamy color classic lipstick sẽ giúp các bạn trông đẹp hơn và thêm tự tin khi ra ngoài . Ngoài ra nên kết hợp với các loại collagen làm đẹp da shiseido pure white mỗi ngày . Thật tuyệt vời nếu các cô gái được các tràng trai khen đẹp và thơm mát , để có được điều này nên dùng amazonian wild lily shower gel , Fijian Water Lotus Shower Gel , atlas mountain rose shower gel , những sản phẩm này được làm từ thiên nhiên nên rất an toàn hiệu quả rất cao mà ai cũng muốn sử dụng.

    ReplyDelete
  7. Đông trùng hạ thảo là loại dược liệu quý, đông trùng hạ thảo mọc ở đâu và ở những nơi nào
    Những người già thường hay có bệnh mất ngủ, có rất nhiều bài thuốc dân gian chữa mất ngủ ở người già
    Phụ nữ thường hay sợ mập và họ không biết phương pháp để giảm cân nhanh an toàn và hiệu quả cho bản thân
    Sau khi đi biển về da chúng ta thường hay bị đen và không biết làm thế nào để có thể trở lại làn da trắng như trước. Hiện nay ngoài thị trường có bán rất nhiều sản phẩm trắng da như kem, thuốc, sữa rửa mặt v.v...
    Mỗi ngày đi làm chúng ta thường hay quên những thứ lặt vặt, cứ như thế chúng ta sẽ có chứng bệnh hay quên và làm sao để cải thiện trí nhớ của mình
    Có nhiều nguyên nhân gây mất ngủ và đặc biết là chứng mất ngủ thường hay xuất hiện ở người già và làm sao để xua đuổi chứng mất ngủ
    Gan là bộ phận quan trọng trong cơ thể của chúng ta, và làm sao để có một lá gan khỏe mạnh vì thế chúng ta phải thường xuyên bồi bổ cho gan bằng những loại thức uống làm mát gan giúp gan hoạt động hiệu quả hơn

    ReplyDelete
  8. Bạn muốn có thân hình hoàn hảo và không biết loại thuoc giam can an toan và hiệu quả nào?. super collagen + c giúp chống lão hóa, trắng da khỏe đẹp, nếu muốn tăng cường thị lực hãy sử dụng thuốc bổ mắt của chúng tôi. Loại thuốc sản xuất từ nhật collagen shiseido dang vien giúp trắng da chống lão hóa. Hãy uống thuốc giải độc gan để có 1 lá gan khỏe mạnh mà không bị tổn thương. Sinh lý của bạn đang yếu đi vì cậu nhỏ, sau đây là cách làm tăng kích thước cậu nhỏ giúp bạn yêu lâu hơn .thuốc fucoidan umino shizuku của chúng tôi là thuốc từ Nhật hổ trợ ung thư hiệu quả nhất. collagen có tác dụng gì và hiệu quả ra sao, có giúp trắng da được không? Bạn bị hói hoặc không có tóc hãy sử dụng thuoc moc toc để có 1 mái tóc đen và mượt mà.

    ReplyDelete
  9. http://help.isupport.ws/entries/51602769-Transcriptionist-Qatar
    http://www.kanu-ferl.at/index.php?option=com_artgbook&Itemid=4&entryStart=10
    http://www.rinnovamentocarismatico.com/blog.php?id_post=242
    http://www.tuningszene-hannover.de/wbb/index.php?page=UserGalleryPhoto&photoID=141
    http://communitysector.nl.ca/node/244
    http://projects.edencomputing.com/issues/324
    http://ps-4.ru/node/323
    http://www.konyoku.biz/index.php/forum/4/2187-dtej-56-set-8-s-0g
    http://smartwingbox.co.kr/shop/board/view.php?id=mainSaleCoupon&no=194
    http://centeroneshoppingplaza.com/index.php?name=knowledge&file=readknowledge&id=5

    ReplyDelete
  10. Amazed to be here and want to read this amazing info. Thanks for this interesting article and i would really want to say thanks for this info.
    Jaipur Escort service

    ReplyDelete
  11. The NFL Flag for Tennessee Titans is viewable from both sides with the opposite side being a reverse image.Fly this flag with any of our tailgate poles or 6' aluminum flagpoles and adjustable flag brackets.
    nfl house divided flags
    dallas cowboys american flagTampa Bay Buccaneers house divided flags
    Tennessee Titans house divided flags

    ReplyDelete

I'm excited to read your thoughts and reactions! Easiest way to comment: Where it says "Comment as," click the drop-down arrow and choose "name/URL" Then just type your name (and your website if you want).