Getting with the program. Web development.

For discussions about game development that does not fit in any of the other topics.
Post Reply
User avatar
mattykins
Posts: 203
Joined: Sun Jan 15, 2012 10:15 pm

Getting with the program. Web development.

Post by mattykins »

So, i would venture to say that 90% of you guys do mainly web development, wether it be browser based games or some sort of website design. My aunt owns her own buisness and a couple months ago she asked if i knew how to do websites (she knows i do programming) and wanted me to make her a website. I told her I had no experiance designing websites or really doing any sort of web programming.

Now here I am a few months later and i've decided it would be good to learn the ins and outs of website development. However I don't know where to start, I've found many tutorials on things like php, javascript, html, css, etc. But i dunno how it all really works together. So far i've just gotten a feel for it, and written a few basic things that looked pretty good with the css i did, but i didn't use any scripting language so it wasn't all that functional.

So I was wondering, how do all of the web languages really tie together? I know you can't build a website with just one language like an html template, you need to have multiple, but which ones would be worth learning? Like I said i've dabbled a bit in php, javascript, html, xhtml, css, and a few web frameworks for python but none of the tutorials really showed how that specific language fit into the website as a whole.
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Getting with the program. Web development.

Post by Jackolantern »

HTML is at the heart of it all. You have to have your HTML in place first before doing anything else, since you need the structure to build up your JS or CSS. Now when I say "HTML", that could mean HTML built in a server-side language like PHP, Python, etc.. When you write HTML, you are only setting up a basic structure. Your page should just be a white page with some basic black text in varying sizes due to header sizes. Then most people first build up the CSS to make it pretty since the CSS requires the HTML, and then build out the Javascript since it requires both the HTML and CSS.

Here are some design-based tutorials.
Here are a crapload of tutorials :)
The indelible lord of tl;dr
User avatar
Chris
Posts: 1580
Joined: Wed Sep 30, 2009 7:22 pm

Re: Getting with the program. Web development.

Post by Chris »

Web development should be quite straight forward if you're used to other programming, the only thing is there are so many little tricks you learn along the way to achieve certain results which takes time to learn. The only way of learning them is by stumbling across all the little bugs and annoyances along the way. As with everything it's nothing more than a lot of patience, curiosity and practice.

A good web designer needs that creative eye, they are people who see something that looks good, and can make it look and feel even better. There are a lot of little things I have learned from other designers that most developers wouldn't even think of. It's actually quite crazy that a designer gets the crappiest pay in the development process. A designer is the guy who will tell you that every pixel counts, they don't allow one margin to be out of line. Most designers actually spend more time using programs like Photoshop rather than actually writing code.

When I make a website I generally take it in steps, much like baking a cake.
1. Get the content.
You need to know how you are going to structure the website, so you will need to know what the website is going to contain. Put it down on paper. What pages are you going to make? Which pages lead to other pages? A logical flow is a must for a good website.

2. Start the design.
The first step in the design process is to make the base template. The second step is then to take the template and make all the different pages and layouts you are going to need. Once you have done this the website is ready for some critique from your client.

3. Write the HTML.
Start to structure the website in code. Make sure you use good practice, don't use tables, use the HTML elements the way they are designed to be used. It doesn't take long to learn all there is to know. Don't worry if it's not all perfect yet, it's all about getting the basics at this stage.

4. Add the styling.
Start snipping the layout into the little images needed to achieve the right effect and write your along with the CSS, remember to try keep the images as small as possible, for example, rather than making a background gradient 1000 pixels wide, try making it 5 pixels wide and use the CSS background-repeat attribute to make the background repeat the way it should. Smaller files = less bandwidth wasted and faster downloads. I've seen examples where a whole website was put onto one sprite, it's crazy how much some people can optimize this stage.

5. Start on the functionality.
Some websites don't even need this step. If it's nothing more than a static website with some text, there won't be any actual scripting or programming needed. This step is done by the developers, generally you start with the server-side language, then move onto the client-side language to make the website "flow". This step can be time consuming, but luckily there are tons of resources to make life easier.

6. Test
Test the entire project, think of all the different scenarios, make a check list and check them off one by one. Fix any bugs along the way.

7. Polish
Start going through all the code, starting with the HTML and CSS, get rid of any errors, bugs or annoyances. Don't forget, every pixel counts. If you do this step right, you're done.

8. Deploy.
Upload and get paid.


If I were to give a good tip, it would be not to get lost in your code. Sure it's important to make your code look nice and keep it easy to maintain, but don't forget the client most likely doesn't have a clue what it does, and to be honest most of them don't even care. They care that the website works, and that it works they way they want it. You can get lost in structuring your code, there's nearly always a more efficient way, but inventing efficient code takes time. Time the client doesn't have nor wants to pay for. Getting it done on time is more important. Don't forget there's always a chance to make version 2 or 3.

Here's a list of good tools for development.

http://960.gs/
Comes with brilliant resources. Has template files for loads of different designing programs and some ready made CSS to make you life nice and easy. If you stick to this system you could almost use it as your CSS standard.

http://jquery.com/
JavaScript framework. Must know for front end developers, gets the job done, always works, quick and easy to learn.

http://codeigniter.com/
PHP MVC framework. Might not be exactly what you're after, but I love this thing. You will need to learn PHP.

I'd advise you to go down the .NET route as I know you have some experience in C#.
http://www.asp.net/web-forms
http://www.asp.net/mvc

Development tools I recommend:
Dreamweaver
Sublime Text
Visual Studio
Google Chrome (hit F12)
Firefox (http://getfirebug.com/)
Opera, Dragonfly comes with some handy tools other browsers don't.

I do all my designing in Photoshop, I'd definitely recommend you spend some time using it.

Learning resources:
http://w3schools.com/html/default.asp
http://w3schools.com/css/default.asp
http://w3schools.com/js/default.asp
http://w3schools.com/php/default.asp
http://w3schools.com/aspnet/default.asp
http://sixrevisions.com/web_design/the- ... made-easy/
http://designinstruct.com/web-design/cr ... photoshop/

Handy tools:
http://jsfiddle.net/
http://css.maxdesign.com.au/floatutorial/
http://www.my-debugbar.com/wiki/IETester/HomePage
Fighting for peace is declaring war on war. If you want peace be peaceful.
Xaleph
Posts: 897
Joined: Mon Feb 07, 2011 2:55 am

Re: Getting with the program. Web development.

Post by Xaleph »

Holy crap, Chris laid it out perfectly for you, nothing to add to this.

One thing, when using w3schools.com, try to verify some content with other sources, they don`t update it on a regular basis so some old ( and wrong) content still thrives there. However, nothing for you to worry about.
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: Getting with the program. Web development.

Post by hallsofvallhalla »

Nice comments here. Stickied the topic.
User avatar
OldRod
Posts: 1321
Joined: Sun Sep 20, 2009 4:26 pm

Re: Getting with the program. Web development.

Post by OldRod »

Very nice post Chris! :)
User avatar
mattykins
Posts: 203
Joined: Sun Jan 15, 2012 10:15 pm

Re: Getting with the program. Web development.

Post by mattykins »

Thanks Chris! That comment will actually help me more than you know lol. It laid out exactly how i need to go about things very nicely.

As far as progress so far: I've pretty much mastered the basics of HTML and CSS. If you guys have a spare moment take a look at the website i put in the attachments, i made it as sort of a blog style thing. I know the button gradients got messed up but thats because i saved it as a gif and it defaulted to web colors lol. But please critique me on it.

As far as server-side scripting goes, I was hoping to stick with python rather than php, as so far i'm not really liking php.

And i've just learned the basics of JavaScript, but many people on an IRC channel were recommending JQuery over JavaScript for frotnend development. I will try to learn things in the order Chris has laid out for website design (Very nicely done guide) and hopefully have something i'm proud of soon enough.
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Getting with the program. Web development.

Post by Jackolantern »

You need to know Javascript to use jQuery, since jQuery is a JS library. Really what jQuery does more than augment Javascript, is create a logical, easy-to-use layer above the DOM API, which pretty much everyone admits is not as simple, as straight-forward or as elegant as it could be. I love jQuery, but it is not a substitute for basic JS knowledge, so definitely learn that first.

JS is very different from other OO languages, though. It is actually a cross between Scheme and Lisp in Java's clothing lol.
The indelible lord of tl;dr
User avatar
mattykins
Posts: 203
Joined: Sun Jan 15, 2012 10:15 pm

Re: Getting with the program. Web development.

Post by mattykins »

I actually learned quite a bit of javascript, I just couldn't really see what it was used for untill i saw some actual code examples. JQuery is nice so far though. I created a cool looking fade in effect on one of my pages in only a few lines.
Alysha50
Posts: 6
Joined: Tue Nov 26, 2013 2:45 pm

Re: Getting with the program. Web development.

Post by Alysha50 »

Hello, I am a newbie in web development. I say some tutorial of lynda.com about it but I practically never try this before. I hope I can take help from you if I need. Thanks.
Post Reply

Return to “General Development”