I’m a geek.  In my head, I’m a geek, and I love it.  I love the idea of being able to understand code and adapt it to my needs.  In reality, that doesn’t exactly happen.  I’m proud when I can figure out that the reason something doesn’t work is because it has a backwards quotation mark instead of the forwards one.  Real coding?  It doesn’t happen, but I’m still fascinated by it.

Or I should say, it doesn’t happen yet.  While I may never be a power coder, I attended the most enlightening session with Peter Pollock (@PeterPollock) and Cailin (@RentAGeekMom) on coding I’ve been to last week while at Type A Conference.  While my brain shorted out somewhere near the end, I picked up so much while I was there.  I had lightbulbs going off constantly in my head.  A little knowledge is a dangerous thing….

I have also posted other Type A Conference recaps:
Keynote session with Chris Garrett
Don’t Rank Me: Getting Past Scores and Numbers with Kelly Whalen and David Binkowski
Time Management with Amy Bair
Taking Over the World with Google+ with Lynette Young
Vlogging for Bloggers: From Keyboard to Camcorder with Christie Crowder

Blog Coding

Peter Pollock has graciously posted the slides to the Blog Coding presentation.  Caitlin also has all sorts of Q&A stuff, as well as snippets of code that you can cut and paste and examples to use.

Caitlin: I have lots of experience coding in html and CSS

Peter Pollock: I have a business coding and hosting, PHP, html, CSS, and I mostly focus on blogging.

Peter:  Some of you may be like me where you can’t remember this language stuff all the time. My reason for being here is to tell you that it’s ok. Once you learn the basics, you can work through it. Caitlin can handle everything when it goes bananas.

Caitlin: Let’s go through some definitions first to ensure that we’re all on the same page.

html – hypertext markup language.  It’s basically the bones of a website – a body tag where all the content goes, a head tag where it tells the browsers what you’re about. Within the body you’ll have div tags that are the different segments of the blog
CSS – cascading style sheets. This file defines all the formatting. This is what makes the blog pretty – what the font, size, background color, italic, bold, etc., whether the div is to the left or the right or the bottom.
If you think of coding as a house, html is the walls, and CSS is the decorations. That’s the difference between the two.
jQuery, PHP, Javascript all go together because you don’t need them to build a website.  You can pull information dynamically from a database instead of typing it all in. This is a little more advanced. Once you get good with html and CSS, then you can start dabbling in these.

Platform – this refers to whether you’re running a self-hosted WordPress or Blogger or what have you. It could also be the server environment, but for us we’re talking about where you have your blog.

Browser – this is what you use to surf the web. I use Chrome. Opera and Firefox are common. Explorer is common on PCs. What version you are using could vary widely. IE6 is dead, IE7 is on the way out, IE 8 and 9 are in use, 10 is in beta. Something will look great in Chrome and Firefox but looks horrible in Explorer. Google – “why does X not look right in IE,” and there will be an answer. IE9 renders almost everything really well.

Web host – the folks that you pay to host monthly. GoDaddy, HostGator, Bluehost is really good, RackSpace is excellent if you can afford it. A lot of people have had issues with BlueDream.

Domain – this is recommended instead of sending someone to an IP address. We all have these. You can buy a domain from your web host, but best practice is not to buy your domain from the person who hosts your domain. If you move, they will take it back and ask for money for you to keep it.  I made this mistake before.

Permalink – this is the link to a specific page or post. If you send someone to a permalink, they won’t go to your home page but a specific page on your site.

Content – you can define content on your pages, post area or on widgets on the back end in WordPress. You need to separate your design and your content and how you think about those two things. There are people create their post and then do a lot of markup to make it look fancy.  It’s a waste of time and effort. You need to have a design that says this is how a heading looks and how italics looks. That way everything is the same on the site and when you change your theme, it’s a lot easier. It’s easier to define this in the style sheet of your theme versus every time you write a post defining the H3 (header 3). You’ll save yourself a lot of time, and it’s a lot easier.

Basic anatomy of a web page

Peter: You start with the background. That is what’s in the background. The header area is at the top of a page. The content area is where your posts will appear or the stuff you type. You have a sidebar that holds widgets and a footer area and that can also host widgets and your dislaimers and copyright, etc. You can have a sidebar in multiple places that range from one next to the other, one on each side, or even on the bottom of the page. You can identify the setup of a web page. They’ll have the title and navigation and then the content below.

When you look at the html, this is basically what it will look like:

– tells the internet that this is html and how to read it

– the section where the page tells the browser what it’s going to be doing – the title of the page, what version of JQuery to use, it pulls in different scripts, where your theme or another reference to a style sheet goes.  It will apply styles and scripts in the order that it sees them, so make sure you put them in the right order.  WordPress instructions will often say put this in a specific place.  The stuff that goes here doesn’t appear visually or as text in this page for the most part.  If you did a tag wrong or do your syntax wrong, it will just show up in the head, so that gives you a clue as to what went wrong.

This is the main part of the document and what will be displayed on the screen.  This is the header, content and footer.  What you’ll normally find is that there is an opening

that is called something like container which is used to put CSS to define how wide the page is and how it will look.  You can name this whatever you want.  That said, make it sensible when you name is so that will have an ID of content and sidebar and footer, etc.  My div ID header is going to be background black which makes the header area black, then define the text as white. They don’t do anything to the html markup but help define the style.

                


                


                

                


                


        






You can name these whatever you want, but make them something that makes sense so that they are easy for you to understand (e.g., “container” could be “pumpkin” but that is not helpful).

You can define your content that is 600 pixels wide and that will show the content and then you can nest another div within that 580 so that you can get the borders the way you want them to be instead of trying to get the margins set exactly right, etc.  You want between 980 and 1100 for your whole page; this is ideal because otherwise it’s either too small or you have to scroll back and forth to see what all is on your page.  

If you pick a theme that has responsive design, the website will resize itself based on the size of the browser window, but this may make it so that your CSS tweaks do not have the effects you intend.  Most screens today are about 1000 pixels wide, so we tend to stick around that.

You can have multiple divs for the header, the header will then also have a nav div within it

    Comments

  • Peter Pollock


    Wow, great recap!

    I can't believe you managed to transcribe all of that.

    Thanks for coming and for your kind comments.

    Leave a Comment

    Your email is never shared.
    Required fields are marked *