More web design fundamental goodness from the Treehouse videos.

CSS stands for Cascading Style Sheets. CSS is a separate language from HTML that allows you to override boring default web browser styles and make web pages look any way you want them to.

CSS describes the presentation of a web page, not the structure/content (HTML does that).

Separating structure and presentation makes changes to an entire site easy. It also increases accessibility, flexibility and reduces complexity, of websites.

CSS is typically placed in a separate file with a .css extension.

CSS uses a priority scheme to determine which style rules apply to an element. Style rules can override one another. Style rules that come later (in page loading) can override styles that come earlier.

W3C maintains the CSS standard. Current recommended version is 2.1, but CSS 3 is in draft form and is being adopted by web browsers quickly.

Including CSS: it’s best not to mix presentation and structure. Even though you can include CSS in HTML (inline), it’s better to do it through an included stylesheet file. This provides maximum accessibility, flexibility and simplicity.

An example style rule:

p {
color: red;
}

p = selector
color = property
red = value

Basic Selectors

type selector matches every instance of the element type specified

descendent selector matches elements nested inside other elements. HTML is structured like a tree, start at a large branch, work your way down.

ID selector matches a single element by it’s ID attribute

class selector matches a subset of elements based on their class attributes

IDs should be used for major site components that will only appear once on a page. Classes can be used many times, is good for multiple elements you want to apply the same styling to.

Other Selectors

pseudo class matches an element only when it’s in a specific state

• :first-child selects the first child in an element
• :link matches an anchor tag if it’s not yet been visited
• :hover selects elements being hovered by the user
• :active selects link being clicked by the user
• :focus good for improving accessibility for people who use keyboards to navigate webpages

child selector matches child elements of the specified parent element. example: ul > li
adjacent selector matches elements immediately preceded by a specified sibling element. example: h2 + p
attribute selectormatches element attributes based on attribute name and value. example: h2[class="foo"] (h2[class~="foo"] will match all h2s with class “foo”, even if more classes are listed. In other words: class="foo bar" and class="foo" will both be styled.

I have a client right now who is interested in learning as much as she can about web design as we build a site for her. I directed her to teamtreehouse.com to get some foundational web design knowledge. I used a few of the Treehouse videos in my web design class last fall. Overall, the learning program they offer there is very high quality and up-to-date with current web standards and trends (a very rare thing in the world of web design education).

But, I hadn’t worked my way through the program myself. I always feel a bit uncomfortable recommending something I haven’t tried myself. I also like hearing fundamental concepts explained—you know, the kind of things you take for granted because you understand them on a level that is beyond words. Connecting that knowledge with language deepens the understanding and becomes an excellent tool for teaching and/or demonstrating expertise.

So, I watched a handful of videos today. Here are my notes:

HTML Introduction and History

• Markup language shapes text in a way that makes it easier to understand. It adds annotation, semantic meaning.
• HTML is a markup language that can be interpreted by web browsers. Other markup languages exist.
• Programming languages determine behavior, markup determines structure. (HTML is not a programming language)
• HTML tells browsers how to process various parts of a document: paragraphs, images, headers, etc.
• The internet is the system of connected computing hardware located all over the world. The World Wide Web is not the internet. The World Wide Web is just one particular use case of the internet. Other uses include: VoIP, gaming, apps
• Sir Tim Berners Lee invented HTML and the World Wide Web in the late ’80s. He was a physicist and contracter for CERN. He wanted to develop a better way of sharing documents. He created HTML by adding hyperlinking to an existing markup language. He also founded the W3C, the international organization that maintains the HTML specification and supports further development of it.

Learning HTML

• HTML/web design is fun because you can instantly see the results of your efforts in a browser
• no single technology or language enables the creation of websites, rather, a broad collection of technologies provide the pieces needed to build a complete website.
• HTML = Structure
• CSS = Presentation
• Javascript = Behavior
• To make a website, all we need is a text editor and a web browser. Every computer comes with a text editor.

Markup Element Highlights

I won’t bore you or myself with all the details of HTML tags covered in the videos, but here are a few nifty new things I learned.

• the technical name for <hr> and other elements that are self-contained, don’t require a closing tag, is void element.
• the cite attribute can be used on <blockquote> to include the source of the quote. example: <blockquote cite=”http://example.com”>
• <q> can be used for inline quotations and also accepts the cite attribute
• <abbr> is used on acronyms and you can add the expansion of the acronym by adding a title attribute. example: <abbr title=”Self-Contained Underwater Breathing Apparatus”>SCUBA</abbr>
• <address> is for addresses (duh) and if it’s parent is the <body> tag, it is considered the contact information for the entire page. If it is nested in a div, it is considered the contact information for the content around it, for example, a list of names with addresses. (I bet the use of <address> is really helpful for localized search engine rankings)
• <wbr> is optional whitespace. You can use it to indicate the best place for the browser to add a line break in a long word (or a url), but the line break appears only when needed! This is the equivalent of optional hyphen available in layout programs like Adobe InDesign. (I’ve previously longed for a tag like this, who knew it already existed!)

I am quickly approaching my one-year anniversary of leaving full-time employment. This milestone of course causes some introspection. Lately, I’ve been looking back over the last 10 months and taking stock of what has been accomplished. I made a list:

• Resolved that I am unlikely to ever be someone’s employee again. The entrepreneur life is what I love and where I have the greatest opportunity to realize my full potential, so that is where I’ll stay.
• Refined my business processes and transitioned to some great, time-saving tools. (Cashboard and Google Voice being the most valuable.)
• Worked with a lawyer to register my business as an LLC and also craft a brief but thorough Services Agreement (no more ridiculous, embarrassing boilerplate contracts!)
• Served 21 clients, bringing 8 new websites into the world, as well as an HTML email design, CD packaging design, 3 letterpress designs and several posters
• Made plans and began working to establish a letterpress stationery business with a friend
• Nurtured existing relationships with friends and family and launched several new ones
• Had a breakthrough with my husband about money, resulting in agreement that we will work together much more closely to manage our spending
• Built and maintained this website

Sounds pretty good, eh? Well, I’m definitely not “done” yet, each week presents a host of new challenges, and the past month has been financially one of our leanest, but the general feeling is hopeful and I am having the time of my life.

So, the lesson to myself, and maybe to you too, is this: Meaningful progress takes constant work and a lot of time. You can’t expect great things to happen over night. With so much going on in our lives—commitments, deadlines, financial obligations and demands—it can be hard to see beyond the daily minutia to the complete picture of a life and what is being built through all those little actions. If you feel overwhelmed by your challenges, take a step back and appreciate what you have already accomplished. I recommend making a list like I did. You’ve probably achieved much more than you think.

I’ve been in a sort of a fog for the past several weeks. I was up to my ears in some very challenging WordPress CMS development. While I was in Development Mode, I became extremely focused on the goals for the project and little else. I checked social sites like Facebook and twitter very little and did almost no reading of the blogs I usually follow. I would literally try to solve code problems in my dreams. This was good for my productivity, but not so good for my general well-being. I began feeling disconnected from my communities. The sense of isolation led me to feel a little desperate and less optimistic about my situation as an independent contractor.

I also started to worry that I wasn’t posting to my blog much. The ideas for posts weren’t coming as easily as they had before. But today, as the development blinders fall away, the ideas are back! I just typed out notes for 4 different posts!

We change gears many times a day: early morning preparation for the day, at work being focused and productive, running errands, socializing with friends and family. All these situations require different patterns of thinking and awareness. My recent adventure in and out of Development Mode is, to me, proof that it our brains’ cycles of focus also can stretch over weeks, as well as days. So, next time I’m feeling down about my abilities or my situation, or overcome by the burden of a seemingly unending project, I shall remind myself that it’s just another swing of the pendulum, another arc on the rhythm of life. Be patient and make the most of your present, because your situation will shift again, soon.

I try to take advantage of having a flexible work schedule on a regular basis (because, if I don’t, I’m just a lonely independent contractor worrying constantly about where my next pay check is going to come from!). This morning, I took a little time to make chai from scratch. Here’s my recipe. I developed it from several other recipes to suit my taste for spicy, not-too-sweet chai.

Ingredients

• 1 × 1 piece ginger sliced (don’t worry about peeling it)
• 3″ piece vanilla bean
• 3″ piece cinnamon stick
• 6 whole cloves
• 7 cardamom pods
• 7 black peppercorns
• 6 star anise pods
• 2 Tablespoons dark brown suger
• 2 cups whole milk
• 3 darjeerling tea bags (or 4 teaspoons loose leaf)

Preparation

Crush all the dry ingredients, using either a mortar and pestle or a zip lock bag and a rolling pin. Combine with ginger, vanilla and 2 cups water in a small pan. Bring to a boil and simmer for 5 minutes. Add brown sugar and stir until dissolved. Add milk and bring back to a boil. As soon as it begins to boil, remove from heat and add the tea. Let steep for 4 minutes. Pour through a mesh strainer and enjoy!

Face-to-face interaction is a powerful thing, especially today when the internet makes it entirely feasible for us to become little hermits who only communicate with the outside world via email, twitter and facebook. That is why traditional networking events and professional clubs still serve a very important purpose for anyone looking to expand their professional network, get new clients, or just make friends with like-minded souls.

I am by nature an introverted person, so the thought of being plopped in a room of strangers really intimidates me. But the reward of budding friendships and interesting discourse with my peers keeps me going back. Here are some tips I can share for developing meaningful connections without working too hard or pretending to be someone you are not:

1. Join a committee. Preferably one that is relevant to your profession or interesting to you in some way. This will get you into a much smaller group of people, making it much easier to remember names and make conversation.
2. Attend events that are relevant to you. For example, go to networking events hosted by businesses in the same industry as yours. Bonus points if you stay late. All the employees will still be hanging around, and you’ll be all but guaranteed to find yourself in a conversation with one or two of them.
3. Make friends, not business connections. Ask questions, listen and don’t talk about yourself too much. Also, try to move the conversation to subjects other than work. Concentrate very hard on each person’s name when you first hear it, this will help you remember it in the future.
4. Don’t bring anyone you already know with you. You’ll just end up talking to each other, and not meeting any one new—ruining the whole point of the experience! Note that it’s helpful if you have already attended a few committee meetings. Chances are, one of your fellow committee members will show up and *presto!* you’ve got someone to hang with!

The first event is the hardest, but it will keep getting easier as you meet more people and become more adept at navigating these intimidating social situations.

Do you have any other ideas to help make network building easy? Please share them in the comments below.