If you’re someone who can’t afford to mess with a huge amount of money but are nevertheless willing to spend time and some measure of investment to learn web development, you’ll have to take a more unconventional approach.

First things first: You’ll need to be curious, interested, and a lifelong learner.

While not definitive nor, in any way, exhaustive, the following is a list of resources to help you through your web development journey from absolute beginner to multi-project achiever level.

Familiarize yourself with essential HTML and CSS elements

Webpages are largely made up of HTML and CSS codes. These two are the basic. Of course, there are other languages to make things more interactive, stylized, animated, adaptive and/or responsive, such as jQuery, Python, Ruby on Rails and JavaScript. But for starters, focus on HTML and CSS. These are the things you need to get a head start at creating a webpage from scratch.

Give both a run-through with the help of tutorial sites. Most are free, some are paid but still cheaper than a years-long degree, especially if you add in cafeteria, beer weekends and lodging fees.

SitePoint

SitePoint has an absolute beginner’s guide for HTML and CSS, so this is a good place to start familiarizing yourself with the basic concepts. You will learn not just the code but also tools to build a website – from text editors to browsers to graphics editors.

Channel 9

This is a 21-episode page of lessons that teaches the fundamentals of web pages and coding. Geared towards absolute beginners, be prepared to spend from 6 to 48 minutes per episode. If you want to skip to episodes you think you need to focus on more, the lessons are entirely free and can be watched in any order, any time.

w3resource

w3resource is a developer community-approved, comprehensive resource for anything related to web development. It offers a wide base of web development lessons, not just HTML and CSS. Its learning materials are grouped by function. The first category contains the set of languages needed for front-end development, and this is where you’ll find HTML and CSS. The other categories include language tutorials for back-end development, database management, data interchange, and APIs.

HTML Dog

Established in 2003, HTML Dog is a site with HTML, CSS and JavaScript tutorials. Their goal is to publish easy-to-digest learning materials to encourage beginners and those intimidated by coding. The lessons are subdivided into various chapters and levels, from beginner to advanced, and further structured by content that shows what you’ll learn per lesson.

Shay Howe

This tutorial site walks you through 12 lessons on basic HTML and CSS for free. Rather than pay for a beginner course right out of the gate, you may try these first. When you’re done, determine if you still need the paid ones. If you still do, at the very least, an introduction from a free tutorial site will ease you into your paid lessons much faster than with absolutely no knowledge at all.

Once you’re done with the “building your first web page” tutorial, you can move on to the advanced tutorial for deeper front-end design development.

Mozilla Developer Network

This site contains a comprehensive list of links to a variety of tutorials and training materials curated by companies and developers. There are a lot of lessons to choose from, not just HTML and CSS. Since they are chosen by developers, you can rest assured the content the links lead to are credible, with lessons geared toward varying levels, from beginner to advanced.

Memrise

In learning, repetition is key, and Memrise helps make repetition-style memorization fun through gaming. This can be done while on a commute, while waiting in line to order some takeout – anywhere with access to the Internet, really.

Here are links to some useful lessons about important HTML, HTML5, CSS and CSS3 codes:

• 30 CSS Selectors You MUST memrise
• All HTML Attributes List
• Complete Element List HTML5
• All HTML5 Attributes
• All CSS3 Selectors
• CSS3 Properties
• CSS3 Syntax of Properties

If you’re feeling particularly diligent, you can create lessons tailored to your own needs and add your own mems. While preferable and very helpful, you’re not expected to remember all the codes all the time. If you want to go pro, however, knowing your codes by heart can save you time when building sites with very stringent deadlines.

W3C

W3C, short for the World Wide Web Consortium, consists of an international community of authorities teaming up with companies, other member communities, in-house staff and the public to organize, maintain, and develop web standards. Checking out the site for the latest news and updates regarding web standards can help you hone and tailor your skills accordingly.

W3Schools

Widely regarded by pro developers as a website for “noobs,” W3Schools offers a decent learning experience and environment for those just starting out to learn how to code. They have a structured list of lessons that any newbie can comfortably go through, complete with examples and a simulator to practice with. W3Schools also provides certifications, but you’ll have to pay for them.

WebPlatform.org

WebPlatform.org is a W3C collaboration with Apple, Adobe, Facebook, Google, HP, Microsoft, Intel, Mozilla, Opera, and Nokia. The main function of WebPlatform.org is to serve as host to all documentation on web development. Anyone is welcome to join and participate in conversations. Contribution and collaboration is highly encouraged,which are possible through a MediaWiki platform.

InstantShift

If you’re a regular visitor, we know that you already know. But for the sake of consistency, InstantShift, as its About snippet shows, is a community for web developers and designers. A multi-authored blog, it offers a wide range of resources, articles and how-tos, even free themes, which designers and developers of varying experience and levels of expertise can reference to either jump-start their knowledge or draw inspiration from. Article categories include web design, WordPress, CSS, tutorials, tools, freebies, photography, and icons, among others.

Participate in online classes/courses

Harvard CS50

An edX class taught by David J. Malan, a Harvard University professor, taking this introductory course to Computer Science is an investment worth its weight in gold, it’s a wonder they don’t charge for it. This is primarily why a lot of lifelong learners around the world are thankful for the possibilities that MOOCs (massive open online courses) present to those who can’t afford to get into prestigious universities like Harvard. The languages you will be taught will include C, PHP, JavaScript, SQL, and, of course, CSS and HTML. If you want to use this class for credit, you’ll have to pay for the certification.

Tuts+

Tuts+ contains a bevy of tutorials and courses to choose from, ranging from coding to illustration, to design, and mobile app development. Tuts+ has free courses and tutorials, but premium access needs payment of at least $15 per month to $360 per year. They offer a 14-day free trial.

Treehouse

Treehouse is a for-paid service aimed at teaching web development, design, and mobile app development. Basic access is priced at $24 a month, and pro costs $49. The site is also equipped with forums, workspaces, contests and challenges area, bonus lessons and conferences area, live workshops, a library and a community you can reach out to and interact with.

Practice

Practice makes better, if not perfect. By practicing, you let your brain make an active, creative action that will stimulate better learning and retention, as opposed to just merely reading and viewing tutorials. Complement your studying by practicing with MOOCs like:

Codecademy

Signing up is free with Codecademy, and the lessons are made easy for beginners. You can see how your HTML and CSS codes translate into a web page as they are shown live beside your text editor, changing as you go along. There’s also a forum where you can share your questions and answers with the community.

Code Avengers

With Code Avengers, signing up is also free. It lets you build a website through HTML and CSS, complete with instructions through text and video. After clicking the check button on the topmost part of the text editor, you get to see what your code looks like through a cellphone-shaped window to the right. If you sign up for an account, you gain the ability to save your progress and get scored against other participants through a leader board.

Get inspired

To get your creative juices flowing and find role models to emulate, look around the web for some real-world examples. See the type of good material that’s already out there and what everyone else is saying about it from a developer, audience, user interface, design and programming point of view

For example, you can check out globally recognized developers, agencies and web sites through Awwwards, a site dedicated to recognizing and promoting the best in web design and development around the world.

Create a portfolio

To make yourself more visible to clients, a portfolio is essential. There are a lot of portfolio hosting sites out there, but here are two examples:

PortfolioBox

With domain hosting, social media integration, search engine optimization, built-in statistics dashboard, and newsletter-sending functionality, PortfolioBox is worth looking into. It has built-in support for smartphones and tablets, too, so your website looks just as great when viewed from any device. PortfolioBox offers a free account, which can host up to 40 images and, upon signing up, will let you use Pro features for 30 days. Pro costs a monthly $6.90 and is paid annually.

Dribbble

A site by developers that serves as a show-and-tell platform for other developers, Dribbble allows you to share screenshots of your processes, work and projects. It has a social-media like feature which shows you how many views, likes, and comments you get.

Get paid to work

It’s productive to continue training and practicing, but nothing beats the sort of training that pays, which is essentially what getting paid work for your skills does. You’re applying and honing your craft, and at the end of the day, someone benefits from its value and pays for it. Freelancing sites like ProgrammerMeetDesigner, GetACoder, and AuthenticJobs are just some of the places that hire coders and designers. This somewhat outdated article from Hongkiat.com lists 50 freelance job sites for designers and programmers, most of which are still going strong.

Be part of a community

Being part of a community is great to keep you encouraged and find answers to some particularly difficult issues you will encounter along your web development journey. Here’s a list of forums to participate in to gain more current knowledge, friends, mentors, even job referrals.

• Reddit
• Dream.In.Code
• WebDeveloper.com
• SitePoint Community
• StackOverflow
• CodingForums

Manage your projects

The moment you land clients, project management becomes an essential skill. Simple and easy to use, TeuxDeux can organize your daily task list. Web development is usually not a single-day project. For some projects, you’ll need to schedule tasks within a time frame and approximate how much time each needs to be completed. For more comprehensive future projects that simple to-do lists or collaboration software can’t tackle, there are intuitive and adaptive full-fledged project management and collaboration tools, like Comindware Project, that are worth considering.

An online repository for your work is another handy tool, so you’ll have backup in case of problems with your local unit. GitHub can host your code, and if you decide to make the code publicly available, you can ask for other developers’ comments, suggestions, or edits to make your work even better.

Any other resources we failed to mention?