Web Development for Beginners (Resources)

on | 33 Comments

Web Development for Beginners (Resources)While I usually try to write stuff that’s geared more to experienced developers, I don’t want to neglect those who are just starting out.

I’ve been collecting links to beginners resources for web development for some time now, so I thought I’d share that list here. Feel free to add your own in the comments.


A Beginner’s Guide to HTML & CSS (website)
A simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.” This guide, led by front-end developer Shay Howe, looks quite comprehensive, covering everything from tag semantics to new CSS3 features like gradients.


HTML & CSS: Design and Build Websites (book)
A beautifully designed book by Jon Duckett that has been the #1 selling web design book on Amazon for a number of months now. The website describes the book as “a book about code that doesn’t read like a 1980s VCR manual. It’s not just for programmers, it’s written and presented to make it easy for designers, bloggers, content and e-commerce managers, marketers to learn about the code used to write web pages.”


30 Days to Learn HTML and CSS (screencast series)
A video screencast series by Jeffrey Way of the Tuts+ Network that teaches viewers HTML and CSS from the ground up. All the lessons are in the Tuts+ Premium section, but unlike other courses on Tuts+ Premium, this one doesn’t require that you be a Premium member.


The CSS3 Anthology (book)
This book, by Rachel Andrews, is a great question-and-answer type book that can complement linear tutorial-style learning. It’s not the type of book you’ll read cover to cover (although you would definitely benefit from that), but instead works well as a problem-solving reference that you can go back to time again. Excellent for beginners and includes lots of new CSS3 techniques along with an introduction to responsive web design.


Code Avengers (interactive learning)
A free interactive online tutorial that will teach you Javascript, HTML, and CSS, “the fun and effective way.” There are currently three courses to choose from: HTML/CSS, JavaScript level 1, and JavaScript level 2. The site aims to use beginner-friendly terminology and tries to make the lessons resemble real-world problem solving.


30 Days to Learn jQuery (screencast series)
Another free screencast series from the Tuts+ Network, this time covering how to use the jQuery JavaScript library. Definitely looks like a great option for those who want to learn jQuery from scratch.


Don’t Fear The Internet (screencast series)
Video lessons created by Jessica Hische and Russ Maschmeyer. The site offers short tutorial videos that cover topics starting from an introduction to the internet as well as web browsers, HTML and CSS.


Codecademy (interactive learning)
A very popular interactive online learning website created by Zach Sims and Ryan Bubinski. It features beginner-level learning covering JavaScript, HTML, CSS, and jQuery, putting you “on the path to building great websites, games, and apps.”


Treehouse (screencast series / quizzes)
An affordable option for high-quality learning of HTML, CSS, responsive design, and even iOS development for building iPhone and iPad apps. Using Treehouse, users watch videos, take quizzes, and unlock badges.


jQuery Air: First Flight (screencast series)
A free course that’s one of the many programming courses available on Code School. This one covers JavaScript and jQuery fundamentals.


Scrunchup (website)
“The aim of this site is to give decent advice to students who want a career in web design or development. Sure, there are lots of websites out there that give advice on writing really good code, but not many of them are aimed specifically at young people who are just starting out.”


W3C’s Web Education Community Group Wiki (website)
A wiki with articles and resources for teaching and learning web development. Includes a Web Standards Curriculum.


Google: HTML, CSS, and Javascript from the Ground Up (screencast series)
A Google Code resource comprising a series of videos totalling nearly 2 hours of playing time covering the basics of the big three in front-end development.


HTML5 & CSS3 Fundamentals: Development for Absolute Beginners (screencast series)
MSDN presents 21 episodes with Bob Tabor teaching the fundamentals of HTML5 & CSS3 programming. Includes concepts about web pages, CSS3 styles and HTML5 features.


jQuery Fundamentals (website)
Described as “a guide to the basics of jQuery”, this is a very good resource for jQuery and JavaScript beginners. As the intro page explains, it’s “designed to get you comfortable working through common problems you’ll be called upon to solve using jQuery… Each chapter will cover a concept and give you a chance to try example code related to the concept.”


JavaScript For Cats (website)
This one-page resource, billed as “an introduction for new programmers” covers the basics of JavaScript starting with strings, variables, and functions.


Javascript Fundamentals: Development for Absolute Beginners (screencast series)
Another MSDN video series by Bob Tabor, this time covering JavaScript from the ground up. Includes 21 videos.


MDN’s Learn How to Make Websites (links to external sources)
Mozilla Developer Network’s resource for learning HTML, CSS, and JavaScript from the ground up. These aren’t original articles, however. They’re basically just collections of links to articles on other sites (A List Apart, SitePoint, dev.opera, etc).


Beginner Articles on CSS-Tricks (blog articles)
A collection of beginners articles by Chris Coyier.


CSS Basics on Impressive Webs (blog articles)
The CSS Basics section on this site, which I’ve neglected lately, but has some good basic stuff for beginners or those who have been out of the CSS loop for some time.


Learn CSS Layout (info app)
A simple info-app site that teaches CSS layout stuff from the ground up.

Got More?

If you know of any others, I’ll continue to update this list.

Advertise Here

33 Responses

  1. Thanks for the mention… My site now has a 20 lesson introduction to HTML5/CSS3 as well as a 40 lesson intro to JavaScript.

    • Thanks for the update Mike. My description was sitting in my drafts for some time and I forgot to check your site to see if anything’s changed.

      I’ve updated the post to mention the HTML/CSS as well as the two JS courses.

  2. Another great interactive site for learning jQuery and even some basic JavaScript fundamentals is jQuery Fundamentals ( http://jqfundamentals.com/ )

  3. Alex:

    I’m a big fan of http://thecodeplayer.com/ shows someone creating a snippet, tis nice to see the work flow.

    -Alex

  4. Great article for beginners

  5. all of it is nice .. thanks

  6. I think you forgot these –

    HTML5 – http://diveintohtml5.info/ (by Mark Pilgrimage)
    CSS3 – http://css3.bradshawenterprises.com/
    jQuery – http://jqfundamentals.com/

    • Yep, I did include the jQuery link, but I didn’t know about the CSS3 one.

      As for the Mark Pilgrim book, that’s definitely not for beginners. This list is resources aimed at those just starting out.

      Thanks.

  7. Hello. Thanks for this contribution.

    I recently started a GitHub project to have a user-contributed set of recommendations to do web “the right way”. Unfortunately I have nothing started much but I think might be of interest many people around.

    You can see it at HTML & CSS The Right way and be contributed by offering pull requests on GitHub branch

  8. ajit:

    you have submit more information on web designing..
    thats goods…
    post more information ..
    thanks..

  9. These are really good resources. Thanks for sharing.

  10. thats a cracking and extensive list there. I have designed a few tools my self and you can see them by clicking my name. I design mostly using CSS xHTML, php and Jquery so these tools should be pretty useful for newisng CSS designers who dont yet write much CSS and rely on tools to do if it for them :)

  11. For every newbie in web development field these points and resources are very effective to be expert. In this competition era only those can survive who have excellent and extra ordinary ability in their profession.

  12. These are all great resources. The screen cast ones are even more helpful for the beginner.

  13. Hi, I would like to ask for some help with PHP. I want to know PHP applied to wordpress. Because with just pure PHP I dont realize how to work with wordpress. Any help???

    Thanks!!!

    • The best I can do is tell you that Google is your best friend, and you can go through the WP codex:

      http://codex.wordpress.org/Developer_Documentation

      The best way to learn is to find out what problem you want to solve, type the problem into Google, and then use the results to solve the problem. And if you learn PHP, it should still help you with WP, but you still have to learn the WP function names and other parts of the API (which is why the codex helps).

  14. Useful article! wanted to say that I’ve really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

  15. Yep Sabrina me too I’m also waiting for another article like this,thank you for share ,There are so many valuable links, thank you once again !

  16. Really like your blog and above said W3C’s and jQuery Fundamentals are very useful and easy to understand.
    Thanks for posting…

  17. Leonardo Santos:

    thanks man!

  18. Swizzle 1:

    Double L,
    While I’m not new to computing, I certainly am new to web development. Although I’m unsure of how far my quest for knowledge will take me in this field, I would like to gain an understanding of the basics. The information and links will be very beneficial to me, or anyone that is just getting started. Thanks for posting!

  19. Thanks for posting all the web tutorials from different site one place I am really thankful of yours.

  20. These are the great web design and beginners resources which are really great.

  21. Just bought “The Web Book – Build Static and Dynamic Websites” (ISBN:1483929272). It covers five core technologies – HTML, CSS, Javascript, MySQL and PHP and is an excellent book for those who know little or nothing amount web designing. From web introduction to hands-on examples and from website designing to its deployment, this book surely is a complete resource for those who know little or nothing about professional web development.

  22. Great collection! I am glad that i come across your post and get such a useful web development resources together! I bookmarked your post and hope that i can get some new useful resources near in future!!
    Thanks!!

  23. Great list!

    I got another one to include: Web Coding For Idiots! It’s at http://www.webcodingforidiots.com and aimed at the complete beginner – curious what you think :)

    (and would love for you if you include it in your list of course – for those that don’t mind a little mild-hearted condescension while learning)

  24. Code avengers and code academy were on of the my favorite resources, But now i switched to mobile app development so I cant discuss other tools.

  25. shuaib:

    very impressive and thanks a lot

  26. This article of yours will be helpful for beginners as a good first footstep. In my blog I have discussed few useful tools for web developers who may not want to depend on a design guy for small tasks. I really admire your blog, you have very basic but important things discussed here.

  27. Ashley jones:

    I think beginners can also use http://www.glu7.com/

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.