A Beginner’s Guide to Web Development
Posted January 8, 2010 in How-To, Programming 39 Comments »
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.
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?
About the author: Amber is a freelancer with over 10 years of experience and specializes in clean, semantic and valid 1.0 Strict XHTML, CSS and Wordpress development. She also writes a web development blog on her portfolio at www.amberweinberg.com.
-
A website’s design gets all the glory. When someone visits a site, you’ll hear them talk about how awesome the…
[Read More...] -
One of the things that many freelancers struggle with is that we find it hard to manage time. No matter…
[Read More...] -
LinkedIn is a good tool for freelancers because it provides instant access to employers, clients, and colleagues. Maintaining these contacts…
[Read More...]
The Unlimited Freelancer is Now Only $19
Unleash the true potential of your business. Get The Unlimited Freelancer and start transforming your freelance business,
now only $19.
Try searching "Getting Clients" or "Productivity"
FreelanceCommunity
Free Resource: Massive Web UI and Button Set
This is a free photoshop set provided by MediaLoot with hundreds of free buttons, boxes, and other useful web elements.5 Fresh and Useful jQuery Plugins Were Born in November 2009
In November 2009, 5 jQuery plugins were born that are new and useful for web designers. Read this post to learn more.How Well Do You Understand CSS Positioning?
The css position property seems easy to grasp, but it works a little differently than it appears on the surface.
Free Report
Sign up for our product discount list to get a free copy of Why Some Freelancers Thrive and Others Barely Survive. You can unsubscribe anytime.
Popular Articles
- SEO Techniques All Top Websites Should Use
- When a Client Can't Afford You: Why It's Still Better to Bid High
- How To Stop Scrambling For Clients And Get A Steady Stream Of Paying Gigs
- A Simple Way To Stop Clients From Rejecting Your Proposals
- 3 Reasons Your Rates Are Still Low (And How To Start Raising Them)
39 Comments
Damian Herrington
January 8th, 2010 at 8:56 amGreat guide.
I would say practice practice practice. When I started learning to develop websites I was fortunate to have instilled in me standards compliant html and css so I didn’t have to worry about converting from tabled websites to table-less websites. I suppose the best tip as mentioned in the article is to mix things up and use W3C’s validator to see if its compliant, if its not find out why and how to rectify.
website design New York City
January 8th, 2010 at 9:36 amWow this is a nice collection. Thanks for sharing
Paul Anthony
January 8th, 2010 at 10:16 amGreat post Amber – definitely reference material that I’ll be directing some of the email queries I receive to!
As Damian said, practice practice practice is a one of the best ways to learn, and as you’ve mentioned jumping in an failing a few times is great advice.
Dave Howell
January 8th, 2010 at 10:23 amI used to build web pages for the online store I used to work for. We all used an early version of Dreamweaver. I still use the programme today for general coding, but you always need to tweak the HTML a bit no matter how careful you are.
Many people want a quick way to build websites such as the template driven systems that most hosting services now offer. This is fine, but no template is ever going to be just what you need. Learning some HTML is really the only way to go.
Dave.
Nikhil
January 8th, 2010 at 12:29 pmNice post Amber,
This will be great read for the beginners!
Amber Weinberg
January 8th, 2010 at 12:33 pm@Damien That;’s great! When I first learned HTML, there really wasn’t any CSS, so we had to use tables. It was tough transitioning from tables to CSS.
@Paul & @Nikhil Thanks!
@Dave Exactly. I use FTP as well, but only the coding site and for the file management and FTP. I like having everything integrated in one program. I’ve been thinking about switching to Coda though.
Jaisa....I LOVE WEB DESIGN
January 8th, 2010 at 12:57 pmCongratulations on the release. I’ve been awaiting for something like thsese..
Great stuff! Just what i’m looking for.
Muchas gracias!-
Rosalind Wills
January 8th, 2010 at 2:13 pmAwesome post! I definitely agree about books not being the best source for learning to code; the field is changing so fast that you’re always going to be working hard to keep up and learn new things long after your books have gone outdated and obsolete, but the rest of the design/development community will always remain a potent resource.
It’s also worth pointing out that debugging, in addition to being a useful way to learn more about the languages, can lead to some of the most satisfying moments in coding too. Finding that mistake that’s messing things up after a long time hunting for it? Ahhh… =P
Jim Coulter
January 8th, 2010 at 2:42 pmGood article. As a mostly self-taught web and software developer I’ve run through my share of bad books, but the good ones have been invaluable. I always check reader reviewers at Amazon before spending any money on a title. I have been very happy with the pdf books I’ve purchased from The Pragmatic Programmer. Each title has its own forum for asking questions or reporting errors, and revisions are free.
Learning the basics of standard-compliant HTML and CSS is also a must and not very difficult. Tools that generate code or convert from text to HTML too often get it wrong and not only frustrate the beginner but can also teach some very bad habits.
Getting your hands dirty is a must. Like Amber says, Google is your best friend.
Now, can anybody recommend a good book for a developer trying to learn good web design?
Mosotomoss
January 8th, 2010 at 3:32 pmGreat Post! Jim is right. When buying books, check reviews on Amazon.
Heidi Cool
January 8th, 2010 at 4:04 pmGreat overview! When I was Webmaster at Case Western Reserve University I worked with campus Web maintainers of varying skill levels so I started blogging various tips and tricks to help them get started. At one point I also did some posts to cross-train some of the writers in our group so that they could more easily post their press releases to our News Center blog. I’ve collected those on my HTML and CSS Tutorials page for anyone who may find them useful.
I first learned to code using NCSA’s “A Beginner’s Guide to HTML” which is no longer maintained. Of course that was back in the old days (93-94ish) when we first discovered that we could use tables as a hack to organize our site layouts. (It seemed horribly clever at the time.) Back then I built what are now just awful looking sites, using images for bullets and other such nonsense. As time went on I just picked up more tips here and there, mostly from the Web but I did buy a few of Eric Meyer’s books on CSS. For a few years I kept his Cascading Style Sheets 2.0 Programmer’s Reference close at hand so I could easily look things up when necessary.
Amber Weinberg
January 8th, 2010 at 6:30 pm@Rosalind I agree. I’ve learned so much by debugging, and have found that you also start anticipating what will happen if you write the code a certain way
@Jim I heard the Smashing Book is awesome for both web design and coding, although I heard the binding and printing itself is terrible. I ordered mine yesterday, so I’ll let you know how it is :) Also teaches you basic design principles, color theory etc etc
ryanMoultrup
January 8th, 2010 at 7:19 pmThe best resource that I have come across and has helped me the most is Lynda.com. They have long, in depth professional tutorials That will walk you through a projects and completely explain what your doing and how it all works. Many times as you move to more advance tut’s it is the same author doing the tutorial so there is no gap in the learning process.
Amber I agree that Google will become your best friend. Google has helped me out of so many jams in the past. Problems I probably would not have been able to solve on my own.
Anne
January 9th, 2010 at 10:53 amGreat post Amber. Practice, practice, practice – it really helps. I like your advice about re-coding an old site template, but I would add that beginners first learn about HTML, and as you pointed out, there are many great resources for learning available on the web.
It is important for beginners to familiarize themselves with standard HTML first. Learn the basics and take it from there, e.g. learn what a tag is used for, stuff like that. Only move on to CSS when you’re confident you can create simple paragraphs, format text, learn what H1, H2 etc. is used for, etc. using HTML alone. Baby steps.
I share the same experience as you do, having started way back before CSS came to the rescue – working with tables and HTML. :D CSS really changed the way we design today.
Chris Connor
January 10th, 2010 at 4:49 amGreat information, that. It’s also important to remember that if you have your mind truly set on it, never give up!
Janet Kern
January 10th, 2010 at 12:59 pmGreat tutorial. I’ve learned html/css through books, online tutorials and LOTS of practice. Some more advice besides looking at book reviews, (which I also do), is looking at the published date. I always look for newer published books, as the ‘rules’ change and technology becomes more advanced.
Doron Orenstein
January 10th, 2010 at 4:53 pmGreat article Amber, really thorough!
I personally hate hate hate trying to learn web development out of a book. I would say that books are great for reference, but I’d say that Google is much better, since it’s way faster and you can employ the magic of cut-and-paste (as opposed to thumbing through a phone-book-sized manual looking for that possible needle-in-a-haystack solution).
Although I’ve been developing websites for many years, whenever I need to learn a new skill, I look for a *practical* application for that skill.
For example, is there any way that one of my own web projects could benefit from this new technique? As an example,I learned how to modify WordPress page templates when a site I was building for myself as a side project required me to create a specific page layout that was not a part of the WordPress theme I was using.
This way, I am not simply doing a hollow, empty intellectual exercise, but instead, I’m actually creating something of value to myself. This provides the impetus to push through the inevitable challenges and roadblocks. Then I find myself doing *whatever* is needed to learn what I need to learn, whether it be referring to specific pages in a book, going to a online forum for help, reaching out to other developers I know personally, Googling the hell outta something, or even hiring someone to do it for me, and then studying their code.
Dr. Nicolas Rao
January 10th, 2010 at 10:07 pmI have been involved in setting up websites for at least 3 companies and since I am basically the man with the content and the photographs, I have had to work with people who know the coding languages. Yes! I am 58, almost 59 years old, but have been using the web for a couple of decades now.
Most of my work has been with apps like Photoshop and though I am qualified physician, my forte has been research and this has always lead me to areas where the web was an area of familiarity. Now I want to be creative and do my own stuff and would love to learn things in a structured way.
I really appreciate your tips and comments and hope to be able to follow your site and learn from the good material available here. Your excellent advice is also appreciated.
Thank you.
Dr. Nicolas Rao
ипотпал
January 11th, 2010 at 12:47 amThanks for the tips :)
Mike B
January 11th, 2010 at 4:42 amOne of the trickiest things when coding websites is browser compatibility. Generally no two browsers read code quite the same way. One problem is often caused by padding or margin in CSS which is interpreted differently by different browsers. I’ve found a simple solution is to use this code in the CSS * {padding:0; margin:0;} which just sets all margin and padding default to zero.
Lee
January 11th, 2010 at 1:03 pmYou stated, “I don’t advise trying to learn coding from web development books.” You should also have mentioned that many, in fact a very large amount, of websites that teach web development are very outdated. There are very good books. You just need to make sure they were published within the last year or so. Also, check the top listings on amazon.com, as mentioned before.
A very good method is by viewing the source of the page. Don’t worry about the gimmicks. Find out how to build the page first, using HTML and CSS.
Carla
January 12th, 2010 at 1:29 amI pretty much learned the basics via Google and a few used books. I cant seem to get past the basics though. Thanks for the tips, maybe this year I can graduate!
jon
January 15th, 2010 at 4:57 ami use lynda.com video tutorials to get started. They are better than books for sure although some books are ok. Headfirst makes a nice xhtml -css mixed book that i really recommend.
Dr. Nicolas Rao
January 15th, 2010 at 12:34 pmThank you Jon. I really appreciate that.
Warm regards,
Nicolas
PS. The other comments on the site are also a great help.
Thank you all.
Blake Tallos
January 18th, 2010 at 3:57 amWow, Amber! I’m really happy about the outcome of your blog post.
Chad @ Tech201
January 19th, 2010 at 10:29 pmGreat article, this demystifies a lot of the process and has given me some direction.
I’ve been using lynda.com for a while now, and the educational material found there is really great. I highly recommend it.
I’ve been wondering what to do next, and your directive to just start coding is the answer I’ve been looking for. Thanks.
Aaron Guzman
February 4th, 2010 at 10:56 pmVery helpful guide you have posted here, especially for people who are just learning the ropes. I am just now teaching myself how to code with XHTML.
I was especially fond of your sections about asking friends for help and searching on Google. This is great advice. Your friends and contacts are your greatest resource for one on one help, and Google is by far your best research tool.
Nice article. Look forward to more.
Online Outsourcing
March 6th, 2010 at 6:47 amI am working in the software field. But my aim is to switch over my current field to web development field like html, css. For that your guidance was helpful to me.
Trackbacks