Getting Started with Web Development

A well-designed website can speak volumes on your behalf. Whether you're interested in creating a web presence, building your personal brand online, or in promoting a product or service you offer, a website can help.

Knowing how to put together a simple website is a valuable skill that everyone—not just web designers—should know. Having them at your disposal means you can quickly set up simple sites from scratch or customize existing site templates (including WordPress sites) on your own.

Thanks to the hundreds of online courses devoted to the topic, it's easier than ever to learn how.

We've hand picked what we think are the best courses available today.

Why learn these skills?

When you're done taking these courses, you'll be able to launch your presence on the web. This might mean launching your own:

• Personal portfolio website—think of these as a step up from your typical paper resume or CV
• Marketing site for your products and services, akin to an online version of a brochure or flyer you might hand out in the physical world
• A landing page to help you generate leads and gauge interest from prospective customers

You could hire any web developer to do these things for you. However, having these skills on hand put you in control. Best of all, you can learn these skills in a matter of weeks.

Estimated cost of these courses

• $0-$75

Estimated time commitment

• 6-10 hours per week
• 4-8 weeks

Learning the technologies that power a website

To the uninitiated, the names and acronyms of different technologies you'll use to build websites may overwhelm at first.

That and the fact that you'll have to keep track of all of these technologies simultaneously (they're closely interconnected to each other) make for a steep learning curve.

Fret not.

The courses we've chosen have all proven to be beginner-friendly. There's a lot of hand holding for each new concept so you'll hopefully never get lost. And if you do, you can always re-watch an old lecture or ask for help through course forums (most courses listed here will have one). Over time, building well-designed websites will come easily.

At any point you feel like you've hit a wall, step away for a moment, go outside, read a book, and dabble in another online course. One of our perennial favorites is Learning How to Learn, which you can read about in our post.

Editor's Note: Most of the courses we'll recommend here come from Treehouse, an online coding school. They take a clear and consistent approach to teaching that's well suited for beginners.

They offer a 7-day trial through OpenCourser, but because there's a cost for their service (starting at $25/month) we'll suggest free or other low-cost alternatives where alternatives exist.

Start simple

The first course focuses on the absolute basics and gain familiarity with HTML and CSS.

HTML is the language that gives a site its basic structure and defines its content. CSS helps us give the website in its entirety a visual identity so that things look consistent from page to page.

Once you've completed the first course, you'll be able to put together a simple, cleanly designed website. Use your newfound skills to build a professional profile for yourself or a few pages marketing a small business that can accept inquiries (through form inputs) from its customers

What we recommend

• How to Make a Website from Treehouse

Good alternatives

• Intro to HTML and CSS from Udacity

Editor's note: How to Make a Website is a great way to spend your free trial from Treehouse to see if they're the right fit for you.

Make it pretty

The next set of courses will teach you how to use more advanced techniques you'll need to layout your site and improve its usability.

The way your website looks is more important than ever. It reflects your brand, your products, and your services. Online, your website is an agent who speaks on your behalf. Would you rather dress it up in an old t-shirt riddled with holes? Or give it a new, clean pressed shirt instead?

These courses teach you the tools for designing sites and industry best practices you should follow to create professional looking sites. For example, early on you'll learn about responsive design, the paradigm that governs how to make sites look wonderful on mobile, tablet, and desktop devices.

As important as appearances are, they're only half the equation. The best web designers aim for highly functional designs. Good websites present useful information. Great websites help visitors navigate and discover information that's useful to them on your site quickly and easily.

You could have a beautiful website that shows off a local business you own perfectly, but if you bury your phone number and address behind layers of links, amid paragraphs of text, only a handful of people will actually find you. A site like that won't add much value to your business.

Once you've nailed down CSS, learn one of its most popular frameworks. Bootstrap, actively maintained by the folks at Twitter, gives web developers the tools they need to design quickly. It also puts powerful tools, like the 12-column grid, at your disposal.

What we recommend

• CSS Basics from Treehouse
• CSS Layout Basics from Treehouse
• Bootstrap 4 Basics from Treehouse

Good alternatives

• CSS Basics from The World Wide Web Consortium
• Advanced CSS Concepts from Microsoft
• Bootstrap Official Documentation (not an online course)

Editor's Note: At this point you will have spent about a month learning the core fundamentals. If you're feeling learner's fatigue, take a break here. You already have everything you need to build fantastic looking sites and this is as good a time as any to start a project or two. Go ahead. Take an idea you've sketched on paper and translating it into a tangible site. When you're ready, move onto the next and last sections dealing with interaction (through JavaScript) and launching your site on the web.

Give your site some interaction

If CSS breathes fresh aesthetics into a website, JavaScript brings it to life.

With just a few hours of JavaScript learning, you'll be able to add simple interactions to your website. OpenCourser's "suggest a topic" and language toggle buttons are just two examples of JavaScript magic happening on our site.

Many interactive browser games and interactive websites like Gmail, Facebook, and Reddit rely on JavaScript to function like the modern web apps they are.

As with CSS, there are powerful frameworks and libraries you can load onto your site. jQuery is one of the most popular libraries built on top of JavaScript that makes it much easier for developers to build complex interactions than they would with plain JavaScript.

What we recommend

• JavaScript Basics from Treehouse
• Introduction to jQuery from Treehouse

Good alternatives

• Intro to JavaScript from Udacity
• Intro to jQuery from Udacity

Launching your site idea for the world to see

When you're done with these courses, try to put your own project together from scratch, referencing code you've written for exercises and challenges during your courses when you're stuck.

The best way to retain and strengthen your grasp of all of the new languages you've learned is to practice. Use it or lose it applies without exception here and the last thing you want to do is sink so many tens of hours in only to forget everything due to neglect.

When you're ready to show off your site, deploy it to the web so that others can see it.

Editor's Note: As of this writing, there aren't too many online courses devoted to deploying simple websites, so we're going to recommend a few guides you can read and follow on your own. These are a bit more advanced, but if you follow the instructions to a tee you should do just fine. Consider it a challenge :)

Recommended Reading

• Deploy your website to DigitalOcean for free (for two months, $5/mo after) and follow this guide to set up a server running Ubuntu and Nginx
• Or alternatively, deploy your site to Heroku (very limited free tier) using this guide