Bootstrap for Stunning Web Design - Fast

This week the focus is on Bootstrap. Bootstrap is a set of coding templates developed a few years ago by some folks at Twitter. It took off in 2011 with the realization that once released, very little was needed to take the code and customize it. Anyone with a working knowledge of HTML and CSS can take Bootstrap and customize it to create elegant web sites that are sure to please the eye.



Courtesy of www.getbootstrap.com

My first reaction to Bootstrap is surprise. I expected web design to be a little more in-depth than it really is. However, I'm learning that it's just a matter of cutting and pasting code that is already established. After all, why re-invent the wheel? After that, the web designer simply goes in and inputs the content or makes minor adjustments to the code. This assists tremendously with building sites. There is no need to create new code. Of course, Bootstrap requires that you have a working knowledge of HTML and CSS and how they work together. But, with a good eye and a knack for design, Bootstrap will assist you with creating beautiful websites.

To try Bootstrap, go to www.getbootstrap.com and download the files in zip form. You will be given an ample amount of material to choose from to build your site.

Qualifications of a Web Designer (...or what do I need to know to getthat job?)

Courtesy of

http://careerwithonlinedegrees.com/wp-content/uploads/2013/09/Web-Design-A-Profitable-Career-Path.jpg

In my journey to figure out how to nab that web designer job, I'm realizing there are certain skills that are required. Not only am I trying to learn how to design my own web pages, but I'm on the look out for any "entry-level" position I can grab in the process. Unfortunately, most of these types of positions require some type of experience in the field. A company definitely doesn't want to have to teach you how to code.

Here is a list of a few of the requirements I have come across as I'm searching for Web Designer/Developer positions:

- Sublime Text, CSS, HTML, Angular. JS, JavaScript
- Take complex requirements and create static mockup for static workflow
- A Portfolio of your work

It's this last qualification, a portfolio, that is the key to getting that job. A friend of mine who is in the industry advised me to be able to show my work and explain it in easy terms during the interview. An employer wants to know that you know what you're talking about.

In addition, many employers require at least a technology-related Bachelor's degree and/or experience in the field. The amount of experience varies from 2 to 5 years based on the employer. Ok, this sounds like a daunting task. But, I believe the portfolio qualification is probably the best hope of landing a job.

Your portfolio will show your work. Be ready to explain it and to shine when you're interviewed. All the best!

The secret to coding an awesome web page!

As I am working through the Web Design learning experience, I'm realizing that CSS code makes a big difference in the way a webpage looks and feels. But, I'm also learning that, if I'm going to be good at this stuff, I have to practice.

Image courtesy of  http://liverybrew.com/wp-content/uploads/2013/03/awesome.jpg

What does practicing web design look like? After thinking about it, I have come to the conclusion that practice looks like this:

1. Read a lot. Technology is always changing. Specifically, the internet is constantly in flux. There are new ways of rendering ideas and images that are always in development. For example, since 1995, HTML code has gone through more than a dozen major updates and changes. Indeed, the web developer must constantly stay up to date in his field or risk becoming outdated.

2. Collaborate with fellow web developers. There are lots of virtual groups one can find to participate in. The web developer cannot be ashamed of asking for help. In fact, some of the best do this all the time.

3. Practice, practice, practice! Even if you practice one piece of code at a time, practice will make you awesome at what you do! This, of course, applies to any endeavor you take on. But, with code, practice is very necessary.

Your webpage can look awesome, if you take on and commit to learning code by practicing. With these basics in place, you are sure to move forward and produce some great content. Happy coding!

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!

An Ugly Website: The first coding assignment

Learning code is exciting, but complicated. When I learned how to ride a bike, I focused on one thing: balance. There was no need to think about the position of my hands on the handlebars or my feet on the pedals. The main concern was balancing the bike so I wouldn’t fall off. And, believe me, I fell off that bike! Writing code is very different. There is no one thing that can be focused on. I have to be aware of the various aspects of the code to ensure that everything fits together. In addition, I have to be careful to not leave anything out of the code.

This week, I received feedback on my first coding assignment. I created what is called an “ugly website”. This website is supposed to be a no frills website that gives a glimpse at the foundations of creating content on the web. There were several challenges in that I had to incorporate particular coding and file structure. For example, the files created for the website have to be named in such a way that when the webpage is displayed by the browser, it is easy to reference the source file name. This means no spaces or capital letters when naming files and folders.

The challenge to me was remembering how to use specific tags in the code. A tag is a word surrounded by karat brackets such as <br> and <hr>. Knowing what each of these do, is the challenge. All websites have a head and a body indicated by the tags <head> and <body>. It is vital that each tag is closed with the closing tag. The closing tag has a backwards slash before the name of the tag like </body>.

Really, anyone can learn to code. I believe that a person’s disposition and goals will determine if this is something that should be pursued. To some, web code can be scary. I know it was for me. But, once I started to learn it, I began to understand it. As Henry Ford once said:

“There isn't a person anywhere who isn't capable of doing more than he thinks he can.”

(http://www.great-quotes.com/quotes/author/Henry/Ford)