Digging in to CSS Code: This is getting serious!

Courtesy of http://www.slate.com/articles/life/family/2012/05/training_wheels_don_t_work_balance_bikes_teach_children_how_to_ride_.html

Learning code for Web Design has just become a little more complicated. It's like the first time you rode a bike without the training wheels. CSS (Cascading Style Sheets) is like riding the bike of HTML (HyperText Markup Language) without those training wheels! Don't get me wrong. It's not that learning CSS is difficult. The crux of the matter lies in the intricate details of each aspect of a webpage. For example, think about the way boxes of information appear on a website such as www.myciti.com. When looking at this page, you will notice a grey box at the left that allows the user to sign on to his or her banking or credit card accounts. That box is more than just a few lines.

CSS allows the web designer/developer to shape the way the box looks and add color and depth. Oh, and let us not forget "padding". Yes, padding is another detail needed to ensure that text and windows within that box are spaced correctly and evenly. The web developer also has to type in code that will set margins, width, height, font type, font size, and even the way the box and the elements in the box will "float" on the page. Float refers to the position of that box in relation to other elements of the web page. So, your CSS code may look something like this:

#content{
 display: block;
 width: 960px;
 margin-top: 15px;
 float: left;
 background: #ffffff;
 border-radius: 10px;
 border: 6px solid #638e22;
 padding: 15px;
 margin-left: 15px;
}

There is a lot of code in that little piece. But it tells each browser that opens your webpage what to do with the content that the code is directed to. I know it looks complicated. But, I promise, it's understandable. And, when done over and over again, it can even become second nature!

There are lots of great resources out there to help a person learn more. I'm using www.w3schools.com and www.udemy.com. I have also used www.codeacademy.com in the past. All of these have some great ways to learn code. If you have the desire to do so, I encourage you to get started!

Come on, take the training wheels off.

Making Code look Pretty with CSS

Image courtesy of http://wisepreneur.com/wp-content/uploads/2010/03/pencil.jpg

At one point in my college career, I decided to take a Basic Drawing class. When I started the class, I drew pictures with lines and strokes that were very purposeful and practical. A straight line put to paper was final. There was no correcting it. At least, that's how I viewed my effort.

However, I spent the next 16 weeks of that semester learning that making a drawing look pretty is not about the straightest line or the most perfect pencil stroke. No, drawing is about placing many different lines lightly onto a page until you get the right one down. Then, you go back and erase the rest.

I'm finding out that creating a web page with HTML (Hyper Text Markup Language) code is just like drawing.

When HTML is first typed into the canvas of a text editor (like notepad), it is not pretty. A browser such as Firefox or Internet Explorer will take that code and render it to a simple white background with basic text and images. Much like my first attempts to draw "perfection", HTML is the skeleton of a website that tells the browser what information should be rendered.

Once CSS is introduced, the entire game changes.

CSS stands for "Cascading Style Sheets". This new form of code represents the finesse of the light pencil stroke many professional artists use to craft an image into something beautiful. No longer will your website look like a plain canvas with lines. It is now chock full of color, stylized fonts, and beautifully arranged layouts. Of course, CSS is a bit more complicated than placing a pencil on a piece of paper. But, this new code added to any HTML-based website will completely change the look and feel of a website. If you are learning to code, CSS is a must!

To learn more about CSS and HTML, go to www.w3schools.com.

Creativity in Web Design

Image courtesy of http://www.adventurestateparks.com/

I am truly enjoying my new-found coding knowledge. This experience is fun because it is bringing out two aspects of my personality: creativity and ordered logic. 

Treacherous Travel

We traveled to Colorado one year to experience a "White Christmas". Since my wife and I are from South Texas, we really have never seen the snow falling like friends and family up north. So, we decided we wanted to experience that. I chose to drive from San Antonio to El Paso, through New Mexico, and finally to our destination: Estes Park. Driving was an adventure in itself. As we started reaching the mountainous terrain of northern New Mexico, I realized how treacherous the higher elevation highways had become. At some points in our trip, I found myself next to large trucks on a two-lane highway with a mountain on my left and nothing but a steep drop off to my right! This forced me to be creative and logical.

Logically, I knew that if I stuck to the road, I would be alright. Even though my hands were holding that steering wheel so tightly my knuckles were turning white, I knew that we would be safe if I focused and drove safely. However, at some point, I had to get creative. I asked myself, "How can I avoid this situation if it comes up again?" I decided to allow the larger vehicles to pass me up. This kept me out of perceived danger.

Creative Coding

In coding my next assignment, I was asked to navigate my way through the treacherous roads of adding tables, drop-down menus, and survey-type forms to a web-page. In reality, adding such things to a web page is a simple matter of knowing the right coding elements to type in. Finding the correct HTML element was not a hard task. However, crafting a page and placing these elements in the appropriate spot required logic and creativity. I decided to place the specific elements at the end of the section explaining what the element would do and what it would look like. 

Web design is a great way to put your work on public display. The Internet is accessible my many who browse for work or fun. If this group happens to view your website, you have the potential to make an impression. Coding helps you construct that website that can get you or the business you work for noticed. The benefit for me is the ability to create whatever I want right now. But, for the future, I want to create whatever a company wants and be good at it! Here's to future creativity!