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.
- Your first web page with html: hello world
- Using a good free text editor for building web sites: SublimeText
- What are HTML tags? An introduction
- Hyperlinks in HTML with the <a> tag
- Images in HTML with the <img> tag
- HTML typography: formatting text with bold, italic, headers and lists
- Tables in HTML
- Putting it into practice #1: a very, very basic restaurant page
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!
- Intro to CSS: styling your web site
- Using CSS to specify colors
- Specifying size and position with CSS
- The CSS box model: margin, padding and border
- Fonts in CSS
- Linking to an external CSS file
- Putting it into practice #2: a nicer looking restaurant page
Series 3: a polished, modern web site
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.
- More size and positioning with CSS: centering
- Rounded corners, gradients and drop shadows with CSS
- Using jQuery to pimp your site #1: dialogs
- Using jQuery to pimp your site #2: image slideshow
- Using Google Analytics to track your visitors
- Putting it into practice #3: a polished, modern, multi page restaurant web site. Idiot no more!
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
- 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