How can I start to learn web development?
I'm very interested in learning web development and have learned some basics regarding HTML and CSS a few years back from W3Schools, but I never learned how to develop websites that are up to today's standards, i.e. free-flowing sites without the use of tables to govern the design of the site.
What are some good resources that I can start with?
CSS Zen Garden
Check out CSS Zen Garden and flip through end various results. They're very versatile and provide a lot of difference over the same source code. You will learn much about modern CSS techniques. Even if you don't dissect them completely you will at least find a lot of inspiration and CSS abilities against normal accessible HTML. The great thing about CSS Zen Garden is semantics against style. Content is not styles whatsoever. Everything you see styles is done purely by CSS which is the correct way of doing it, because data can be consumed by many different clients, and style only by those that visualize it.
When it comes to learning from books this one looks very like a good start CSS: The Missing Manual.
I read Smashing Magazine on the internet that provides a lot of examples and approaches. It spans articles from the design business to great approaches in web design and alike.
The best way to learn how to create websites and applications is to actually do it, meaning you should create projects, and to do it all the time. This short video conveys the emotions of a newcomer and gives some good advice on the subject.
I also wrote some other recommendations for people interested in learning web development that you should give a read before you start.
However, just as you can't speak languages you don't know any words in, you need a good understanding of the basics before you can build a useful project. Here are some resources to pick up some some basics and sites that let you explore for yourself.
There are great places to learn the basics of web development for free. Start here, but branch off of them to play around with things they don't directly teach. After going through a few, try making other sites/projects on your own from scratch. Doing so will reinforce the concepts, teach you implementation details, and likely teach you additional things as well. You simply can't become a good developer or designer by reading only, you must create!
I made a crash course for designers learning web development
Check it out! They're tailored for a design based audience but apply to anyone learning. They teach the basics in the slides/post/video then assign a small project at the end of each to teach real-world front-end development.
- Lesson 1 - The why and what behind web development
- Lesson 2 - Starting HTML & CSS
Other good tutorial websites
- CodeAcademy - General knowledge basics of several languages.
- Mozilla's "Learning the Web" series - This starts at the beginning level and can guide you into some more complex topics. Great resource, I highly recommend it.
- Udacity - General web development class.
- Tuts+ - Tutorials on more specific topics.
- KhanAcademy - I haven't used it personally, but it seems to be getting better every day.
Don't use W3Schools, it is generally outdated and very error prone. Instead, use a tutorial website like the ones above to learn and use one of the documentation sites below when you're looking for something specific.
Looking at documentation for properties, libraries, and such is vital to becoming a good web developer. The following are among the best docs you can use:
- W3.org - The official documentation for most everything implemented by web browsers. Learning to read these docs is very important! This is not affiliated with W3Schools in any way.
- Mozilla Docs - A very reliable 3rd party resource from the creators of FireFox that stays up to date.
- WHATWG.org - A sort of open source competitor to W3; some browsers implement certain suggestions from here over W3 at times.
- DevDocs - Not official, but has a lot of languages docs on one site. Quite convenient.
- WebPlatformDaily - A list of news dealing with everything web updated daily (except weekends).
- SitePoint - Really useful articles on various things.
- WebDesignerDepot - Can be on the spammy side, but most of their actual articles are good.
- Smashing Magazine - More advanced topics, but mostly all good reads.
- A List Apart - A bit more advanced knowledge in blog form.
Small projects/playing with code
- JSFiddle - Make little projects and keep track of them.
- CodePen - Look at other people's code doodles and submit your own for others to see.
Full text editors
Other useful websites
- My Resources page - A list of resources I've been compiling, ranging from an intro to responsive design to an analysis of different ways to animate in a web browser.
- Front-end developer handbook - A more diverse but helpful collection of posts covering a wide range of front-end topics.
- WebFieldManual - A large collection of helpful resources.
- StackOverflow - If you have a specific programming related question, StackOverflow is unmatched to get you help.
- LearnLayout - Learn some basics about doing layouts in CSS.
- Positioning in web design - Part of my crash course that is perhaps the most useful.
- 30 CSS selectors you should know - Get to know them and save you time later on. There's also a cool little game to test your CSS selector knowledge.
- Codrops CSS Reference - A concise and helpful reference page.
- CodeMentor and Thinkful - Sites where you can pay to be mentored 1 on 1.
Look for web developer's and designer's personal blogs that you like. They often have great, great content.
I have also written up an intro to UI design which could be very useful. I linked some additional great resources in it.
I cannot stress enough, the best way to learn is to build things that push your limits and to do so continually.
For an even larger (and perhaps overwhelming) list of helpful web related sites, checkout WebDesignRepo!