A Beginner’s Guide to Web Development

Learn-Web-DevelopmentThe 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.

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.

Your Turn

Are you learning web development? What techniques have you tried? Do they work? If you’re already a developer, how did you learn your basic coding?