Here are some files to get started with web design, about Javascript mainly. First some points to note.

1) In general use CSS for the layout and JS to do things like interactions with the server or the user. Time was when HTML did the page layout, CSS added some colour, and JS did popups or forms. It’s evolved so HTML is the wireframe which you no longer deal with, CSS becomes the part that controls the layout, and JS handles everything that is interactive on a site including animations.

2) HTML: It’s so small to learn so start here. All you need to learn are the elements, e.g. the paragraph tag <a> used to handle text blocks. If you code from scratch it will be the framework, and if you use something like WordPress then you will never see the HTML code at all.

You learn HTML because CSS and JS sit on top of it. For example using CSS you can apply a colour to all the text on a page, so you would use a color:red;. Using JS you will find most useful the ability to interact with the HTML tags, so JS can select any HTML tag, for example a paragraph tag <a> and manipulate that paragraph of text.

3) PHP is the main language on the server side, for example it can read cookies and determine which pages to serve, it is a server side application. With the increasing powers of CSS and JS, JS has moved into this area. It’s like the way JS used to handle small animations but now CSS is taking that over, in the same way PHP used to (and still does) handle server side funtionality but now JS is moving into that arena.

It could be that in the near future all you will need are CSS and JS without having to deal with any HTML or PHP, but as you can see, everything sits on the HTML framework so that still needs to be learned. The ultimate scenario is that browsers will merge HTML, CSS and JS to form one language. In the meantime the additional part to learn for using JS in server side mode is known as node.js. You can download node.js and install it so that your computer can simulate a server environment for you to test a script. For now just be aware that node.js is an extension to the language and something to learn separately, after you have understood the basic version of pure JS, known as vanilla JS.

4) Starting a web design project can be confusing when at the same time starting out learning about it all. You can take some of the headache out of it, for example not worrying about the basic HTML, by installing a content management system (CMS) software such as WordPress. It’s free and once you are logged in to the back-end you are able to click just one button to create a new page. On that page you can use a text module to write text, but more importantly you can experiment with HTML, CSS and JS.

In a WordPress page, the text module talks directly to the machine, so you could type the following and as you can see, this is HTML code:

<h1>A HEADING</h1>
<p>a block of text</p>

You could apply inline styles (i.e. CSS) like this:

<h1 style="color:red;">A HEADING</h1>

Or you could create an external stylesheet to list some classes and do this:

<h1 class="heading-colour">A HEADING</h1>

… and then in your stylesheet the class would look like this:

.heading-colour {color: red;}

In the same way any JS can be applied internally or sit on an external file with the extension .js and be called from within the WordPress page.

Using a CMS like WordPress is the quickest way to get a website up but you can use it to learn HTML, CSS and JS also.




HTML5 and CSS3 for the real world

CSS for dummies 2005

Beginning Javascript

Beginning JS with DOM scripting and ajax

Javascript for Dummies

Javascript for Breakfast

Javascript step-by-step

Javascript in ten steps

Javascript and DOM

Modern Javascript 2012

The Javascript Bible

PHP5 for Dummies