Tutorial Getting started in web development

Rad

...
Requirements:
  • Personal computer to which you have access to install software and forward ports (optional, but suggested)
  • Basic computer knowledge, such as creating a file and editing file extensions
  • Suggested knowledge of home networking, ultimately to understand how your website works globally

I'll try to refine this to make it more user friendly, and less wordy. However, I believe if you are interested in how people learn to make websites you should take the time to thoroughly read and work with this guide.

Introductions: This guide is intended for anyone interested in designing websites, without the slightest idea on where to start. There are no example pages or any free layouts of any sort - Simply the info you'll need to get your computer set up as a learning environment for web design.

After reading this guide you should be able to:
  1. Establish a server (Either using your computer or a web server)
  2. Create and edit files that can easily be tested
  3. Share files over the internet, generally for support but possibly for deployment
  4. Overall, learn how to learn how to make a website.

From a novice web designers point-of-view: Heres the way I learned what I know about web design, along with the tools and how you should go about using them. First, everyone may have their own opinion about what to learn first, and everyone may also excel at other languages where others may struggle. Second, you should start not by trying to show off your skills with fancy images, but making stuff work - aligned well, and cross-browser compliant. Third, have patience. Web design is serious stuff and can take months to be able to put together a well designed site, and years to master.

You can save the standards and markup evaluations for later, at least until you have the knowledge to put something together thats usable (and serves some sort of purpose) to other users.

regarding the use of templates/themes for starter websites
Although they are nice, and usually suited for the new web designer, its not recommended to start the more advanced designing aspects without grasping the basics offered by these templates. They do however offer as a reference on how tasks are accomplished, and can save you alot of time in designing a website.

Languages to start with
  1. HTML is of course the building block of web design, although basic in format its elements will serve as a starting point for other tools used later
  2. CSS is the glue that will hold your page together, along with the paint and duct tape for when it falls apart. It can do formatting such as highlighting images when you mouse over and moving elements/resizing/coloring etc.
  3. (optional)Javascript is used for interactivity, updating the page without navigating to a new one. Used inline later with AJAX (to interact with the server itself) this is a powerful, though harder to learn language
  4. PHP, if your server supports it (which any decent host provides, at least with limitations), is useful for things like:
    • Organizing templates (Reducing clutter making it easier to add content)
    • Providing security, things like Captchas and authorizing access to files
    • Allows the server to handle computational tasks that the user (or their browser) may not support, especially in drawing images using a graphics plugin
    Also see this site (official)
  5. MySQL is used for storing data, including users information (Passwords, emails etc) working alongside with PHP to access the database. Also see This site (the official)
  6. (optional) Flash is used for detailed graphics (higher framerate than GIF's), is generally light-weight, but can be used for interactivity, games, movies etc.

Now you should have a vague idea of where web design comes from, as you progress in knowledge you'll find when its necessary to use different languages, plugins, and software. For instance, using PHP to generate bot-stopping captchas is more secure than Javascript, which the user can view by looking at the source of the website (and possibly design a bot and exploit the purpose).

Setting up your learning station:
Getting ready to learn
Before you get started, you need something to work with. When you first start off with HTML, CSS, and even Javascript - you do not need to go through the trouble of installing server software (below). You can simply create your own folder and open the files in your favorite web browser to test them.
For more advanced things, such as using PHP and MySQL along with making sure it will function once deployed, you should follow the steps below. This will also enable you to share your files on the internet, especially useful for seeking help when you get stuck

Setting up your computer to be the web server
  1. Allow your computer to be the 'server', download and install Apache or Xampp if you're interested in PHP/MySQL as well (makes it easier).
  2. Once installed, you should forward port 80 [TCP] (if not done already), apache and xampp both offer an option to forward 8080 instead if your ISP does not allow 80. If you're unsure about this click here for a specific guide for your router.
  3. After you have installed the server and are ready to accept incoming connections to your website, you can either link them to your IP address, or more preferably to a domain. No-Ip.com offers an exceptional free service allow automatic IP renewal for dynamic IP addresses, along with free domain names ending in no-ip.org
  4. Now when you send someone a link such as radleygh.no-ip.org (no WWW), they should be redirected to your computer, and more specifically, to the folder specified in your XAMPP/Apache configuration file (By default this is set to htdocs, which can be found in the Apache install directory (C:\Program Files\Apache software... or C:\Xampp\Htdocs)
  5. When you first test your domain, it may not be available for up to 5 minutes. In the meantime you can either connect to localhost or even your IP address (xxx.xxx.xxx.xxx). If you specified port 8080 you may need to add it to the IP (xxx.xxx.xxx.xxx:8080)
  6. You should see a page that simply lists It works!, or if you're using Xampp it will be the configuration guide to setup your server and keep it secure. Follow the instructions given in that case.
  7. To edit your website, you can start by editing or creating the index file in the htdocs folder. Name it index.html if no other index file is given, and your browser should automatically find and open this file by default

Where to start, and where to go [wordy]
If all went well and you're able to access your website you can begin designing your first website. For starters, you should try learning the basics of HTML structure and syntax. This guide will not cover the specifics, refer to the site above for free tutorials, examples, and references.

After you've established some knowledge for creating some content on your website you can begin learning CSS[/b]. CSS is used for formatting the website, including things like font types, colors, border style and sizes, position and size of objects (such as images and frames), and many many other things. CSS can also be used to add basic interactivity, such as hover-over highlighting.

For more advanced interactivity you should move to [url=http://w3schools.com/js/default.asp]Javascript
. With javascript you can do things like showing error messages, creating content, showing/hiding elements and other things. Javascript can also be used to validate form data (Such as the syntax of an email, or to check required fields).

Once you get a form established in Javascript, you could move to PHP. PHP is a much more in depth language, looking very similar to C++/Java in syntax. This one may be more difficult to learn having no programming experience in the past. Although PHP is one of the most versatile, it can be used for many things such as sending emails, creating images dynamically (such as captchas, or generating signatures). You can even make an image contain PHP code, which is how those archaic hit counters worked

With a hit counter, every time you load the image an HTML request is sent that then executes the specified PHP file which then adds to a variable and write out the current number of hits and send it to the client.hat if you want to store more than just a number? Thats where MySQL comes in. Similar to any SQL database, its used to store data such as usernames, passwords, emails, forum posts, signatures, links... just about anything you can imagine.

Tools you may need
In the developing of websites, one can easily create and edit their entire website using the most basic text editor such as notepad. If they have the need for an image or two, paint can suffice... However, if you plan to make a website that someone would actually like to visit you'll need some more style.
Source Editors
  1. SciTE - A versatile open source text editor with the basic features such as syntax highlighting and automatic compiling/testing
  2. Notepad++ - Very similar to SciTE, this free software has almost identical features and also supports the majority of web design filetypes
  3. [WYSIWYG] Dreamweaver - This is one of, if not the most professional web design program. It features everything offered by Scite and Notepad++ along with a preview of the website as you work, and automatic formatting (it will close tags for you and show possible attributes for each element)
  4. Frontpage - Just don't use this. This is for designing websites without knowing what this guide is trying to teach you how to learn!
Graphic Editors
  • Photoshop - Most popular graphics editor out there, although its not free. Far from it. It's very good at what it does.
  • GIMP - A free graphics editor which is comparable to Photoshop. It lacks many of the features, but has plenty features to create a great looking website in itself.
  • There are many other graphic programs out there, and they each have their own advantages/disadvantages. The two listed here are the most widely used, and the only I can honestly recommend.
Web Software
  • Apache, listed above, is used for web servers but can be installed on any PC especially useful for learning how things work server-side
  • Xampp is a suite of Apache, PHP, MySQL and other tools which makes it easy to install and set up on your computer all at once
  • PHP is a server-side scripting language widely used, described above
  • MySQL software will host the database and authenticate all access to the database. Described above
  • Plugins may include the graphics library for PHP, which allows dynamically generated images, there are many more you can find on the PHP website, or many other places on the web


Now you should know the purpose of each language
 

n[u]ll

You can change this now in User CP.
Good Tutorial, I've only skimmed through it, 'cause I don't have the time atm. But later I will want to read the whole thing..

My only suggestion is to maybe include Delphi in your Languages to start with section.

Delphi's a pretty easy language to learn, and pretty powerful.
Here's a useful link:
Learn Delphi in 21 days.:D
 

Andyoyo

TH.net Regular
I liked your progression of languages you chose for this guide. HTML to CSS to Javascript to PHP. Also had no idea there was able to host on your own computer as a server instead of a web server. But I have a question, where's all the page request bandwith come from? The sent packages, I asked similar question in other thread, but will the sent packages slow down your computer RAM, or internet speed?

Delphi's a pretty easy language to learn, and pretty powerful.
cool I'll have to check that out
 

ReVolver

Moderator
Staff member
Good Job on the Guide :thup: but you forgot to mentioned the person who showed you no-ip.org :p
 

Rad

...
Was it you? That was awhile ago... :thup:

@Andyoyo -------
Whenever someone requests the files from your computer it will use your bandwidth. Specifically your upload bandwidth, which is typically very low compared to your download rate.

I wouldn't recommend using your personal computer as a dedicated server / file server. But hosting small html/css (etc) files shouldn't be a problem. Just make sure you aren't using any large images, especially bitmaps, that might take up your bandwidth.

@nll -------
I've heard of borland delphi, but never took the time to learn any of it. I thought it was like C++, not a web design tool?


-----
For anyone interested in a live-updating HTML editor, I made a modification of the SMOOTHDZION Live Editor.

Click here to check it out.

This page is intended for Firefox users, if you do not use firefox you will be redirected to the default editor. It's great to use to test small snippets of code without creating any files on your machine.

I basically integrated the liveEdit website to include syntax highlighting and other features provided by CodePress.
 

mase

____ ___ ____ __
You should also include ASP in there. A lot of people use it.
 

n[u]ll

You can change this now in User CP.
I've heard of borland delphi, but never took the time to learn any of it. I thought it was like C++, not a web design tool?
Well, it's not really a web design tool like HTML or CSS, but you can write a program on the server that can go and create an html/css/java/etc web page... It's kinda weird, but that's how my pop always did, so I kinda caught on xD
 

SFilip

Gone but not forgotten
nll, you seem to be confusing Delphi with Delphi for PHP. The first has nothing to do with web design.
 
General chit-chat
Help Users
  • No one is chatting at the moment.
  • Ghan Ghan:
    We did!
  • Ghan Ghan:
    The old shoutbox wasn't supported anymore. We updated xenForo, so it had to be replaced.
  • jonas jonas:
    let's see if everyone finds it... the nice thing about the shoutbox was I could check on it even while logged out, but the existence of this one is hidden when you're not logged in
  • Ghan Ghan:
    We can fix that.
  • Ghan Ghan:
    Chat should show on the sidebar when not logged in now.
  • Ghan Ghan:
    (You'll still need to log in to post messages)
  • Ghan Ghan:
    Test!
  • tom_mai78101 tom_mai78101:
    I must be in a test server.
  • tom_mai78101 tom_mai78101:
    Nice, Twitter tweets embedding now works
  • Wizard Wizard:
    Yup.
  • Ghan Ghan:
    Excellent.
  • Ghan Ghan:
    @tom_mai78101 Hello there.
  • Ghan Ghan:
    Tagging works in the chat too.
  • tom_mai78101 tom_mai78101:
    @Ghan Missed it.
  • Wizard Wizard:
    Still fixing things here and there. Added widgets to the portal, will make it match the ones here on the forum index tomorrow.
  • Ghan Ghan:
    The venerable World Editor Tutorials site has been converted to HTTPS at last.
  • jonas jonas:
    cool
  • jonas jonas:
    and I can even edit my messages, nice
  • seph ir oth seph ir oth:
    GENERAL CHIT CHAT, YOU ARE A BOLD ONE
  • Ghan Ghan:
    Hello there
  • The Helper The Helper:
    this new chatbox is great and the forum software update is great too
    +1
  • The Helper The Helper:
    upgrade has fixed forum registration spam problem
  • tom_mai78101 tom_mai78101:
    Something tells me we might be able to customize the chatbox a bit, considering that there's a gap under every message.
  • Wizard Wizard:
    Going to deploy a fix soon, just had to take some time for myself this weekend.

    Members online

    No members online now.

    Affiliates

    Hive Workshop
    Top