<< Back to http://jacobsstuff.com/

How to Teach Yourself Web Development

See d3 learning thread too

New tool:
http://codepen.io/pen/

The below is excerpted from the fateful "Web Design Over Summer" Email in '08 - some links may be broken

I want to turn you all into professional web designers/programmers.
(Yeah, it's a big thing. You are going to commit to your brains basically all the information on <http://w3schools.com/> and more)

There is enough time in THIS SUMMER to do it though. You are going to be busy. Freshmen, this is the tip of the iceberg for you, if you don't believe me, read the intro pages on the sophomore section of the yearbook. It's not going to get easier, so you might as well be ready.

And I have a vision, an idea, and a strategy to get this done in a fast, fun, and edifying manner.

First, off, I want to explain how this is going to work.

We need to get everybody up to speed in the various technologies, but we don't want to go too slowly for the advanced programmers. As soon as I get the account system on the TPP website up and running, you all will have accounts there (Thursday?), but for now, we will stick with funpic.org or awardspace.com hosting. Who here does not have a web host or not know how to FTP to it?

I am going to give you challenges of different levels that create useful tools for professional websites. You will use and perfect these tools in the next few weeks as we first practice on the TPP site and then begin to do actual professional work. These challenges will require the use of many different languages and will simulate the conditions of professional work quite accurately.

I am willing to personally help each of you to learn each necessary element of web design. The knowledge you gain here will be equivalent to that given in an advanced web design course (if you FOCUS. That means when you get the urge to jump off and play an awesome online game or somebody msgs you to play StarCraft you take a deep breath, pause and say "OK. I CAN DO THIS. I have a goal and can imagine how happy I will be when I meet it".)

This is where we start.

Step 0: Background - 1 more time

First read for the basics.
<http://w3schools.com/web/default.asp> and <http://w3schools.com/site/default.asp>

At least in terms of what you are concerned with, this is how the web functions:

In the most basic sense, you can imagine most internet technologies as communications between two computers, client and server. A client (e.g. you) sends HTTP (or other) requests to the server, asking for a certain file (e.g. a webpage likehttp://www.yahoo.com/). (Actually the request goes through a DNS, or domain name server, first and the URL is converted to an IP address, but this doesn't concern you yet).

external image client_and_server.jpg
Looking at the image, you might think "What about all the other technologies listed on <http://w3schools.com/>?" They work WITH these core building blocks to make them more dynamic, faster, or more powerful. AJAX, for example, simply refers to the use of XMLHTTPRequests to asynchronously transfer data between server and client (don't worry, it will make sense when you get there).

We are going to start by making sure you all know HTML the most basic, standard web technology. You should learn XHTML, a form of HTML that more rigorously obeys standards and thus loads faster and more consistently. I like to use XHTML transitional.

Also, you should ALWAYS check your work for browser compatibility. You will quickly learn why IE is so widely hated (come ON! IE7 DIDN'T EVEN TRY TO PASS ACID2 <http://en.wikipedia.org/wiki/Acid2>...)

Now, how do you learn to actually use these wonderful languages in real life? Let's take a look at some basic software that you'll need.

Step 1: Software
As I have said before, there are a few programs that will greatly help you:
Technically, you can do basically everything with Notepad (the regular program that comes on your PC) by simply writing the code in Notepad file, then when saving choose "All Files" as file type and put .htm or whatever extension you want.
Dreamweaver: This is the best if you can get ahold of it. It's rather tricky to use but very powerful. PRABHAV - post a reply to this explaining how to setup a connection to a funpic site.
Notepad++: <http://sourceforge.net/project/showfiles.php?group_id=95717&package_id=102072> I recommend clicking on npp.4.9.2.Installer.exe, it's under the 4.9 tab. This is a nice free code editing program.

How to use these programs: Notepad++ is rather self explanatory: mess around with it, save files, explore features, etc.
Dreamweaver: use split view for optimal coding. This is not the place for an in-depth tutorial on Dreamweaver, but my advice is to first figure out how to mess around with tables. You can handcode if you wish. See Prabhav's reply on how to setup a site in Dreamweaver and connect to and FTP to it.

So you first make your files with these programs, then you have to upload them. We will use FTP (file transfer protocol) to upload to these sites. See this thread to learn how: <http://groups.google.com/group/tppacsl/browse_thread/thread/42acf1be30aeb715#>

You can then view your files by going to http://yourusername.first2letters.funpic.org (e.g. tmad would be http://tmad.tm.funpic.org)

Note: additional free hosts include http://www.awardspace.com/ or http://www.zymic.com/

Step 2: Languages
See this post for the order in which to learn languages:

THE ABSOLUTELY VITAL LANGUAGES TO START WITH ARE:
HTML/CSS
JavaScript
PHP
Use <http://w3schools.com/> (HTML, CSS, JavaScript, PHP) and <http://php.net/> and see
<http://groups.google.com/group/tppacsl/browse_thread/thread/45c5ab1d67057d60#>

Step 2.5 (added): Graphic Design
This awesome skill - often overlooked by the code-oriented - is necessary to design slick user interfaces and professional-quality logos and layouts. To teach yourself, I recommend:
a) Get software. I recommend Photoshop, though Fireworks or GIMP are fine (GIMP is free). Note about file formats to beginners: images in the process of being created by these programs are often in a different, less compact, less widely readable format than those that are published. Photoshop uses .psd files, GIMP uses .xcf files. Before posting online, save or export them as .jpg, .gif or .png. Fireworks uses its own special type of .png file that is widely readable, but still oversized - "save as" or "export" in this case as well.
b) Get inspired. Throw yourself into fun, high-level tutorials straight off and learn whatever skills are necessary in the process of completing them. By the time you have created a few images in this manner, you'll have a broad foundation in using the software. Check out this list the Photoshop tutorials I have found interesting and useful. Here is a gallery of a few of my own projects for idea-generation purposes (additionally: an intuitive web site layout I made in Photoshop).
c) Create. Do not be daunted. Browse http://www.deviantart.com/ for extra inspiration.

Step 3: Challenges/The Plan
The goal of these challenges (see separate is to
a) give you practice with the technologies you are going to be using
b) make useful code that you will need for later
c) see how we all work together

We will start by writing small cool web programs like those on:
<http://groups.google.com/group/tppacsl/browse_thread/thread/e1808b86a5faa46b#>
Here's a sample word search done with my wordsearcher <http://tinyurl.com/4c99cu>

Then we'll make some web layout templates and work on graphic design (it WOULD be a good idea to invest in Photoshop or Fireworks or Illustrator and maybe Flash. You can get them cheaply with an Educational License).

Then we'll go all out and write awesome web-apps for TPP as a team. e.g. a wiki, file upload system, personal profiles, etc.

Then we're ready. We go public and professional. This will be early July. This could turn out to be very very very good.

Good luck! Have fun! See Challenges email for challenges.

~Jacob

To start off our summer web design, we are issuing challenges of different levels.

Challenges of the week:

Beginner :
HTML - Design a frameset, and make a site that navigates like this one <http://geocities.com/azlers/>. Make a flash animation/game appear in the main cell of one of the above webpages. Integrate it with text.

Intermediate
PHP - Write a script that includes pages specified in GET vars. Make it behave like <http://programmers.tpclubs.com/>. Bonus points if you use the structure in Larry Ullman's PHP 5 Advanced. <http://www.dmcinsights.com/phpvqp2/downloads/PHPAdv2Scripts.zip> See chapter 2. Then make one of the pages have a form that processes data of some sort and does something useful.

Advanced:
Make the equivalent of w3schools' TryIt Editor except for PHP. Watch for security issues. Think carefully about this one.

I expect everybody to try to program one of these. It is physically painful sometimes to drag yourself to do something that appears so mundane, BUT you're going to need the code and you're going to be extremely glad you practiced. I'm going to do the Advanced challenge myself.

Note: once you know the languages, these shouldn't take long. So next time you're about to start a game of StarCraft, think about it and convince your friends to do one of these instead. Then go play ;).

I also challenge all of you to make a layout for their funpic website and link their pages in a logical manner. Also, try to make the site as aesthetically pleasing as possible.

Questions? Comments? Ideas? Post them here! A very popular question is "how do you make rounded corners?"
Either be resourceful or ask us <http://groups.google.com/group/tppacsl> !
~Jacob



To start off our summer web design, we are issuing challenges of different levels.

Challenges of the week:

Beginner :
HTML - Design a frameset, and make a site that navigates like this one <http://geocities.com/azlers/>. Make a flash animation/game appear in the main cell of one of the above webpages. Integrate it with text.

Intermediate
PHP - Write a script that includes pages specified in GET vars. Make it behave like <http://programmers.tpclubs.com/>. Bonus points if you use the structure in Larry Ullman's PHP 5 Advanced. <http://www.dmcinsights.com/phpvqp2/downloads/PHPAdv2Scripts.zip> See chapter 2. Then make one of the pages have a form that processes data of some sort and does something useful.

Advanced:
Make the equivalent of w3schools' TryIt Editor except for PHP. Watch for security issues. Think carefully about this one.

I expect everybody to try to program one of these. It is physically painful sometimes to drag yourself to do something that appears so mundane, BUT you're going to need the code and you're going to be extremely glad you practiced. I'm going to do the Advanced challenge myself.

Note: once you know the languages, these shouldn't take long. So next time you're about to start a game of StarCraft, think about it and convince your friends to do one of these instead. Then go play ;).

I also challenge all of you to make a layout for their funpic website and link their pages in a logical manner. Also, try to make the site as aesthetically pleasing as possible.

Questions? Comments? Ideas? Post them here! A very popular question is "how do you make rounded corners?"
Either be resourceful or ask us!
~Jacob

Advanced challenge #2
This is a VERY practical challenge whose result you almost certainly will be using: a photo gallery and updater.

Here is an example of a photo gallery. The only major feature I think it is lacking is a way to zoom in on the pictures.
<http://www.shaolinkempoarts.com/index.cfm?page=11>

So first try to make a photo gallery that looks like the one above except make it so that when you click on an image, either it opens large in a new window or when you click on it, it gets big on the screen (THIS IS THE BEST. USES FLASH OR JS). Ex: <http://library.thinkquest.org/07aug/01676/lighterside_movies.html> Click on the Create waves to touch cryptic codes button on the lower right. under Play it cool.

Now make a secure program that lets you update the photo gallery once you login (login status should be stored in session var). Make an intuitive editor that lets or add, remove, or change any photo or caption in any spot. Note that it is better to use thumbnails instead of simply shrinking an image with HTML since they load faster that way. Also possibly consider making multiple pages of photos (like define a variable for number of photos per page). This could be done well with AJAX.