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?

How To Get More Clients

Get More Clients

Tired of struggling every month to find new clients?

Join us for our latest workshop and build your own custom marketing plan. Conrad Feagin - the Chief Executive Freelancer at FreelanceFolder - will guide you step-by-step.

The workshop includes live classes, expert support and one-on-one coaching.
Learn more here.

Comments

  1. says

    Great 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.

  2. says

    Great 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.

  3. says

    I 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.

  4. says

    @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.

  5. says

    Awesome 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

  6. says

    Good 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?

  7. says

    Great 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.

  8. says

    @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

  9. says

    The 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.

  10. says

    Great 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.

  11. Janet Kern says

    Great 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.

  12. says

    Great 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.

  13. Dr. Nicolas Rao says

    I 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

  14. says

    One 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.

  15. says

    You 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.

  16. says

    I 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!

  17. jon says

    i 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.

  18. Dr. Nicolas Rao says

    Thank you Jon. I really appreciate that.
    Warm regards,
    Nicolas
    PS. The other comments on the site are also a great help.
    Thank you all.

  19. says

    Great 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.

  20. says

    Very 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.

  21. Will says

    I’ve been reading Freelance Folder for some time now and started to do some freelance work myself.

    Following the advice from this article, I would appreciate any advice from professionals to develop my projects.

    If anyone want’s to contact me just follow me on Twitter @ioowilly or find me on Facebook: http://www.facebook.com/#!/profile.php?id=1269241695.

    Thanks everyone! :)
    Will

  22. Kero says

    i stopped reading when you advice against reading books

    out off 100 outdated bad syntax books there are still few that will teach fundamental of say HTML and what is bad practice/habits you would avoid

    i would say before jumping into others code and wasting your time goggling what is this and is it possible to do that a good reference book is essential for beginner

  23. says

    Another nice feature of FrontPage is that it allows you to work on your pages from a remote site. When you need to edit a page, FrontPage will download the file from the server to your local disk, modifying the links if necessary so they work locally.

  24. says

    Great article for beginning web developers to consider where to start the journey. I’m interested in teaching new web designers and developers foundational skills in my new website. The more opportunities you undertake (e.g., books, web tutorials, formal classes) the broader your education and the better your skills will become!

  25. says

    Great Post for the beginners like me. web development can only be learned
    through practice and practice .Until you code you can not learn. Download templates from free templates websites and try to recode them and observe and learn each HTMLand CSS element . Try to google about every new thing coming in your way of learning and learn about it .This will be very helpful.

  26. says

    Just switched hosts/servers after years with a very easy, simple file management system…I’m now paying way less for a ton more space. I used the very basic html for all those years, and created some fairly passable pages. I read HTML GOODIES, and a whole bunch of other books, which are jamming with hand-written notes, and underlining in ten different colors; I picked generous peoples’ minds, and trial and error, as frustrating as it was, provided me an eventual understanding of how to slap a good page together. My thing is very image-based, so it was fairly easy, when you just want to display your work. But now I’m going to try for a little bit more flash and inter-activity, without bells and whistles for their own sake. I’m glad I found this tutorial, as I have been lax in building for a few years, and ended up just copying the html of a basic page, and when I wanted to add more substance, I just plugged in the new files into the standard form….good luck everybody…hang tough, and eventually it gets much easier, and sometimes kinda fun. There is tremendous POWER in being able to create a page with anything you want on it!!!! ~E/MODARTIST

Trackbacks

  1. [...] A Beginner's Guide to Web Developement – Continue reading on Freelancefolder.com SHARETHIS.addEntry({ title: "A Beginner’s Guide to Web Developement", url: "http://soultravelmultimedia.com/2010/01/16/a-beginners-guide-to-web-developement/&quot; }); Tagged as: Graphic Design, Web Design, Web Design tutorials, Web Developement Leave a comment Comments (0) Trackbacks (0) ( subscribe to comments on this post ) [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>