Category Archives: Web Techniques

Start Web Development Now

The web development field offers a variety of languages from front-end development, like HTML, CSS and Javascript, to back-end programming, like PHP, ASP and Ruby on Rails. So how do you start learning how to code?

In this post, I want to offer a variety of great tips on beginning your journey to learning web code. At the end of the post, I want to share a simple site structure with you to get started in HTML and CSS.

I’ll focus on HTML and CSS in this article. HTML and CSS are the most basic web languages that everyone must learn before they can move on to another web language. Even if you plan to do all backend programming, you’ll still need to use them often.

Learn-Web-Development

 

Learning Code from Web Development Books

I don’t advise trying to learn coding from web development books. They’re often filled with syntax errors, outdated or they focus too much on following exercises and not enough on explanation.

These neither help you memorize proper code, nor do they help you critically think out your first site on your own. While you may find it easy to follow along with the exercises, or even do the exercises without looking at the book, you won’t be able to piece together code different from the examples provided.

That being said, books are still a great way to get the very basics down and provide a great point of reference throughout your learning process. When you look for a web development book, try finding one that:

  • presents a basic history of the web and how websites are made and interact.
  • focuses more on web theory and less on shuffling you from exercise to exercise. You need to know why you do it that way, not just how you do it that way.
  • teaches you basic tags and what they mean. For example in HTML you would need to know:
    • <html><body><div><a><img><head><p> just to name a few!

Make Some Friends

After you’ve read a bit about web development, it’s time to start looking for a web developer friend. If you already have a friend who’s a developer, great; but if not, try making some connections on Facebook or Twitter. Ask them politely if they can spend a few minutes talking a little bit about the development process. Ask them if they can provide you with a coded template or old site code that you can use for your learning process.

Make sure the developer has enough experience and is good at what they do. You’d don’t want to learn their bad habits! Make sure their sites are not built in <table>’s and that it validates with W3C (the people who make HTML/CSS standards).

Take a look at the code they give you. Do you notice any patterns? How are the lines spaced? How is the code laid out compared to the layout of the actual site you see in the browser?

Jump In Feet First

Now it’s time to get your feet wet. The best way to learn how to code is to simply start coding. So what do you do with the template the developer has given you?

  • Design a site similar to the template you were given. Make it similar enough to easily use the code provided, but different enough to make you have to change some of it. Learning is the only time copying someone’s code and designs are okay.
  • Start coding. Retype the code line-by-line. Check what each line of code does in your browser as you go along. Some great Firefox plugins to use while you’re coding are Web Developer and Firebug. These will help you debug in the browser, saving you time, and are great for beginners to get used to looking at their HTML and CSS.

Google is Your Best Friend

It’s okay if you don’t understand much, or any, of the CSS and HTML you’re retyping. Google it. You’ll be amazed at how many tutorials exist on the web.

For example, I used to know very little PHP. However, most of my WordPress work I do has to be dynamic. Instead of paying a back-end programmer to do the work, I’m able to Google and find almost any function I need in WordPress. Because of this, I’ve saved lots of money and my knowledge of PHP has grown substantially. While I still may not be able to write it from scratch, I’m able to easily find what I’m looking for and customize it to my needs.

Some Googling tips:

  • Search for specific phrases instead of general terms. For example, instead of Googling  ”WordPress”, try “How to exclude children categories in WordPress.”
  • Learn to hack, or customize, the code. A lot of code you search for can simply be copied and pasted, but you’ll often find that one developer’s solution may not perfectly fit your problem. Even if you don’t plan on learning PHP or Javascript, it’s still good to learn a few basics so you can easily change your found code, as you’ll come across these languages often in the web development world, even if you plan on sticking with CSS and HTML.

Code Problems Are Good Problems

When you first start coding, nothing will work and everything will break. Don’t give up. Just by trying to debug your code and figure out the problems, you’ll learn a lot and will quickly begin to anticipate what happens when you code one way or another. Treat these problems as another HTML learning lesson.

Mix It Up

What happens if you put a div inside of a p tag? If you moved one block of code to the bottom of the page? What can you do to make the site unvalidate or break? How do you fix that? Don’t be afraid to move code around to see what happens.

Next Steps

After you learn basic HTML and CSS, you should jump in to some more advanced layouts. Some great ways to learn advanced coding:

  • Follow tutorials on web development blogs.
  • Continue copying sites you find that you really like. Learn to spot bad and/or unorganized code. Just because the site looks great in the browser, doesn’t mean it’s built great.
  • Team up with a local developer for some tutoring.
  • Take a few web development courses at your local tech college. They can be surprisingly affordable. Get some reviews on the professors first, to make sure they know what they’re talking about, and are easy to learn from.
  • Forums are another great place to post questions and meet with developers.

Ready to Code?

If you’re now ready to jump into your first site, you’re in luck! I’ve coded up the simplest of basic web layouts–a two column layout with a header and footer, along with a jpg of how it should look. It already validates and is organized/spaced correctly, with semantic code.

You can download the zip file here.  Feel free to hack, change, or even use it for your first development portfolio. If you want, I also offer step-by-step coding of this site, from breaking down the layout to the CSS, along with basic explanations of what each line of code is and does.

The New and Improved Way to Create Forms with HTML5 By Alexa D’Agostino

After 12 long years, the core language of the world wide web (HTML or Hyper Text Markup Language) is finally undergoing a major revision with the release of HTML5. Although the much anticipated version is still in beta, with no official launch date having been announced; HTML5 has web designers and programmers buzzing about its latest features.

According to the W3C, new HTML5 features are aimed at improving support for multimedia like video embedding, providing for a better user experience and an easier time for programmers. Although HTML4 has been a huge success, (some even argue the most successful markup format to ever have been released) everyone in the Internet world has been patiently waiting while browsers update with the latest major revision to the core language. As time wanes on, people are wondering, why the wait? The thing is, HTML5 is already well-supported in browsers like Safari, Chrome, FireFox, Opera, and mobile browsers. Even Internet Explorer 9 is set to support the new HTML5. The benefit of HTML5 is that it is backwards compatible – so, if your interested in updating your sites right now, you can. There are just a few browsers that are not fully compatible with HTML5 yet.

HTML5 Logo

Upgrading to HTML5 is fairly easy because it works with HTML4. In fact there’s no reason to throw out HTML4 at all, because HTML 5 is simply a bunch of new cool features that were added to the HTML4 core language. Upgrading (if you want to call it that) to HTML5 is very simple. All you have to do is change your doctype to <!DOCTYPE html>. This new update helps keep things simple; while in HTML4 there were a range of different doc types that you could use, making it a little more tricky. You can go through right now and update all of your websites, they won’t break. All HTML4 tags are 100% supported by HTML5.

HTML5 defined over a dozen new input types and new features that you can use in your forms. The new additions to HTML5 are going to make developers lives much easier.

Place Holder Text

I think this is my favorite improvement in HTML5. All developers are used to using javascript and jQuery to do a placeholder text in an input field, but in HTML5 it makes it extremely easy for developers to display a placeholder. What’s a place holder? A place holder is when text appears in the input field and when you click on the input field it disappears. You can put hints of what the user is supposed to put in the field. As an example, if you have a phone number input box you can put (XXX) XXX-XXXX as the place holder and when they click, it will disappear. I’m sure you’ve seen this around.

place holder in HTML 5

IE

FF

Safari

Chrome

Opera

iphone

Android

3.7+

4+

4+

11+

4+

AutoFocus Fields

The current way in HTML4 to do autofocus is using javascript to focus the first input field on a web form. As soon as a web page loads, the page will move the focus to the particular input field, just as the javascript does. What’s the difference? Since this is now in the HTML markup, users who have disabilities can easily disable this attribute within their browsers. Not all browsers support the autofocus feature, but the browsers that don’t will just simply ignore the attribute. If you want it to work in all browsers just add the new HTML5 autofocus attribute, then detect if the browser supports autofocus. If it does, don’t include the autofocus script, if it doesn’t then include the autofocus script.

IE

FF

Safari

Chrome

Opera

iphone

Android

4+

4+

3+

10+

HTML5 Defines 13 New Input Types.

Email Addresses

The first input field I will talk about is email addresses. Browsers that don’t support the new types will simply treat it as a text field. 99% of people won’t even notice the difference until they submit (this is when the form will validate). iPhone users will notice when they click in the email input box that an @ sign and a . will appear in a shorter easier keyboard. If you have an iPhone, you know what I’m talking about.

Email Addresses in HTML 5

Web Addresses

The next input field we will look at is web addresses. If someone asks for a URL, they are expecting something such as http://www.blackrhinosolutions.com. So now input type URL again allows users that have an iPhone to have an altered virtual keyboard that will allow them to easily add periods, slashes, and .com to their string in their input box. Once again, most people will not even notice the difference until they click submit (when the form validates).

Number

Next topic is numbers. The most annoying of all the values to get is numbers. You have to do a lot of juery to make sure you validate this field. HTML5 adds type number. This includes a few extra attributes (all optional):

  • Min: Specifies the minimum acceptable value for this particular input number field
  • Max: You guessed it right, the maximum acceptable value for the number field
  • Step: Starting at the min number it will than count by the number added in this attribute. The default is 1.

Number input type in HTML 5

This will allow for only numbers (most again will not notice the difference until they try to click submit and they get an error because they typed in something other than what is allowed) and will only allow the numbers 0, 2, and 4.

Numbers as a Slider

I thought this was really cool. HTML 5 allows you to use a new type called range, which will turn the input field into a slider. This is cool for when you want to have slider controls in your web form. The mark up is the same as the number type, but just substitute type=”number” for type =”range”.

Range Type in HTML 5

Date Pickers

By far the best addition is the date picker type called date and datetime (there are other additional date/time types such as time, week, month datetime-local as well). The javascript frameworks have worked this into their libraries such as jQuery UI, YIU, but it’s still annoying to just add a date picker. HTML5 defines a new native date picker control without having to include a script on the page. As of right now Opera is one of the only ones that fully supports this feature, but as the others you can do a fall back script if it’s not supported. Eventually all browsers will be up to date.

Search

HTML5 has added search as a type for input boxes. This is minor, but a cool change for some users. It simply puts rounded edges on the input box automatically and when you start to type it places a small X to the right. Not all browsers again support this.

Seach type in html5

Color

HTML5 also defined type color, which lets you pick a color and returns the hexademical value. Opera 11 is the only browser that supports this type. I don’t think most people use this type anyway, so I don’t think it’ll be a big deal.

Form Validation

Above we spoke about cool new input types like email, date, number, etc. One of the most exciting features of HTML5 is the addition of form validation. Most developers have either client side or server side script to validate a form (I do both!). As the HTML5 form validator may not be able to replace your server side validation, it sure can eventually replace your client side validation. The issue with javascript validation is that users can easily just disable javascript and get around it. Now with HTML5, you won’t have to worry about that. Below is an example from Chrome 12. All browsers and OS’s may render the error messages differently, but this is an example of what it may look like.
All errors are from HTML5, and no javascript was added.

IE

FF

Safari

Chrome

Opera

Iphone

Andriod

4+

5+

10+

9+

Required Fields

HTML5 form validation isn’t just limited to validating the types of fields. It also allows for a new additional markup called, required. This allows developers to verify that all the fields were filled in without having to use javascript.

Required Fields in HTML 5

Any developer knows that these updates are essential for development turnaround time and for enhanced user experience. Once all the browsers accept HTML5 the new updates to the mark up will make the new generation of websites exceed anyone’s expectations.

Well there you have it. A quick starting guide to the new updates you can find in HTML5. If you can take anything away from this article, remember that HTML5 is not something to be scared of. It’s something that will help developers and all your HTML 4 websites can be upgraded whenever you are ready!