Learn HTML, CSS, JavaScript and PHP

This is the kind of stuff you'll be doing!

This is the kind of stuff you’ll be doing!

Welcome to Web Coding For Idiots! This is a series of tutorials to go from zero to a fully functional web site using HTML, CSS and more.

Follow all of the tutorials below and you’ll be building great web sites in no time – who knows if you will be the next Mark Zuckerberg?

Well, I know. You won’t be. But hey, maybe after you finish all these tutorials he will let you work for him.

Building a good looking site: HTML and CSS

Follow these in order. Each set of tutorials should take somewhere between a day and a week, depending on how much time you devote to playing around with what you learned, and how drunk and/or stupid you really are.

Series one: the basic HTML building blocks

Where we meet HTML, the language underlying all of the web, and use it to build a ‘static’ web site with links, images, tables and whatnot.

Series 2: making it look like you want

On to CSS, the language used to ‘style’ your page: define in detail how everything looks. Use it to make your page look great!

Series 3: a polished, modern web site

Some slightly more advanced and subtle CSS tricks that make your site look like it was actually built in the 21st century, and a first look at JavaScript to add some moving parts to your site!

Warning: while Javascript programming is something all the cool kids do, we’ll show you just enough to intelligently copy paste from other resources. Save the programming for PHP (see below), which gives you a lot more Return On Brainpower.

And now for some Seriously Cool News.

After you’ve finished this series, you have enough knowledge (but probably not yet the practice or audacity) to build sites you can ask money for.

Beyond a static website, towards a true web app

True programming is not just about how something should look, but also what it should do. Here we start to make our web pages dynamic and interactive, and – finally – do our first real programming with PHP.

PHP is the language Facebook, Wikipedia, WordPress, and millions of other sites and frameworks were built in. In other words, once you finish this, prepare to be employed.

Series 4: using PHP to make your site dynamic and interactive

  • Getting started with PHP: what it is and how to get it working
  • Intro to PHP: hello world!
  • Using PHP to include different files in one another
  • Variables, arrays and functions in PHP
  • Forms, POST, GET and SESSION variables in PHP
  • Creating an ‘admin area login’ form with PHP
  • Uploading and storing an image with PHP
  • Creating a ‘contact me’ e-mail form with PHP

Series 5: towards a true web app

Where we start to use databases for our content, and build the kind of stuff some people in Silicon Valley have gotten very, very rich with.

  • Intro to MySQL
  • Creating, updating and listing data in MySQL
  • Working with a MySQL database of users
  • Using JOIN to connect data from different tables in MySQL

Series 6: code like a pro

Your code may work, but it’s probably ugly, and hard to maintain. Real coders (yes I know, we should stop saying that) add some intelligent structure to their code, so they’ll still understand it in a year, and be able to change and add functionality of the project quickly.

  • Object-oriented programming in PHP
  • Introduction to MVC frameworks in PHP
  • Writing your own JavaScript: using AJAX with jQuery
  • Responsive design techniques with CSS
  • First meeting with an API: showing tweets with a hashtag on your site
  • Second meeting with an API: integrating with Facebook
  • Introduction to version control with git
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s