How do you make a webSITE?

cyborglizard

New Member
Hey guys.

So I have done a lot of tutorials online and some in class and have a decent understanding of how HTML, CSS, Javascript and Perl work.

I have made a website with wordpress before, and used the twentytwelve theme that I then just made slight tweaks too by looking up css code online.

However, what I need help on is actually putting it all together and making a website (not just a webpage) that I can then neatly upload to a web host.

It is hard to explain what I am looking for but essentially I would like to see how a real web developer makes a website from scratch and what tools and methods he uses to create it.

There are so many web development tools out there I don't even know where to start. I have notepad++, that is about it. I'd like to know how to have separate files for the CSS, and Javascript and know how to link those together into a website with several pages.

Basically, I would like to actually watch a real web developer create a site from start to finish and see all the minute steps like naming folders or making multiple sites. What programs do I need? ( I use windows 8). Should I just always start with a wordpress twentytwelve theme? What is the professional way to do it?

I am having a hard time finding any tutorials or guides on this. Even most books that I have looked at just tell you how to CODE but they don't tell you how to actually make a WEBSITE from the ground up.

Helps plz?:)

Much love,
cyborglizard
 

chrishirst

Well-Known Member
Staff member
a website (not just a webpage)
A website is just a collection of webpages.

You need to know how to code BEFORE you can even start building the simplest HTML document. So if you know how to make one HTML document ... You know how to make many.

But I suspect the answer you are looking for is for a question that you haven't actually asked

It is hard to explain what I am looking for but essentially I would like to see how a real web developer makes a website from scratch and what tools and methods he uses to create it.

Speaking for myself, I look at a drawing or an digital image of what the designer wants, visualise what the HTML structure will be and the CSS rules to make it work, then start coding.

Tools?

NotePad ++, Geany, FireFox, Chrome and Infernet Exploder.

Methods?

Experience plus trial and error.
 

ronaldroe

Super Moderator
Staff member
Not many people around here are going to give up their design process so easily. Keeping that information close is part of what keeps us competitive.

However,
I have notepad++...
That's one hell of a good start. Find a site you like (one that's not overly complex), and view source on it. Try to work your way through what's what in the code. Then, pull up N++ and try to recreate the structure of the site, even if you can't really duplicate the look completely. Here's the kicker, though: recreate it while referencing the actual code as little as possible. Who knows, maybe you'll find a better way to do what they've done.

Basically, I would like to actually watch a real web developer create a site from start to finish and see all the minute steps like naming folders or making multiple sites. What programs do I need? ( I use windows 8)...

...I am having a hard time finding any tutorials or guides on this. Even most books that I have looked at just tell you how to CODE but they don't tell you how to actually make a WEBSITE from the ground up.
If you're willing to spend a little money ($13-$20 per month), Chris Coyier did exactly what you're wanting in The Lodge section of his site, and you can get the videos on there. He uses a Mac, but there are good Windows alternatives to all the software he uses.
Should I just always start with a wordpress twentytwelve theme? What is the professional way to do it?
Both yes and no.

No, because you shouldn't link the 2 ideas. The "professional" way to do web design/development is the way that turns out a professional quality product. You have to define what that means for yourself.

Yes, because if that's the way you choose, then go for it. Personally, when I do work with WP, I create a theme from scratch. Every. Single. Time. I have snippets in my code editor that I use for blocks of code that are always the same, such as the <head> contents. But other than that, I start with an empty index.php and get to coding. It really isn't as difficult as you might think.
What programs do I need?
A code editor, a web server, and a way to get what you do in the code editor onto the web server.

You're going to have to figure out what works for you. Trust me, I've been right where you're at. It just takes tearing things apart and trying to put them back together, lots of reading and even more practice. You'll get there.
 
Last edited:

cyborglizard

New Member
Thanks for the help guys. It cleared some things up.

Maybe the correct question I was looking for was how to use "web authoring" software? Geany is a web authoring software correct? I just also found Kompozer online too.

I see what you mean by people guarding their secrets and I don't wish to steal those.

The question is: After doing every possible html, css and javascript tutorial, what are the next steps for the student to start coding like a real web developer. I feel there is not enough information about that online or in books. Most tutorials or books just show you how to code without actually showing you the process of how to be a web developer.

It's kind of like, most books and tutorials show you how each part of a car works from the engine to the wheels, but none that I have found actually show you the process of using all the tools and parts to create a car from start to finish.

What are some of your experiences with moving from "knowing a bunch of code" to "actually creating your first real website project from scratch that you launched on the internets"

Thanks, and ROFL at infernet exploder!!
 

ronaldroe

Super Moderator
Staff member
Maybe the question is what is your "working environment"?

I develop locally, using MS Webmatrix for my server. It has a perfectly good code editor built in too, but I don't use it. I like to use Sublime Text 2 for that. I use SASS for my CSS, so I have Prepros running to compile it, as well as minify/concatenate my JS and compress images. For deployment, I use git if available, but more often than not, I have to use FTP, for which I use Filezilla.
 
Last edited:

Apokalupsis

New Member
A great resource for learning web design is www.udemy.com. There are numerous design courses their under 1 house, written by numerous instructors, professors, training sites, etc... It's a "collective" if you will.

2 of the big names there for web design are "Robert Farrell" and "Infinite Skills." I own over 100 courses there, many from these 2 sources. I can't recommend it high enough, it's great.

Note on price: some are free, some can be costly (but can be found at discounted costs at times).
 

AppleDesignAsia

New Member
I believe nowadays most people using all kind of skeleton to start with? Like Drupal, etc?
Do you guys think its still a trend to use hard hand coding method?
 

Edge

Member
One thing to think about is how clients are guided through what you do and the various stages such as wireframes, mockups, prototyping etc. We've learnt to spend longer initially explaining to the client how the project will run, what involvement will be needed from them and when. Don't just think about the development and the tools but think about the communication. Give them a plan, update them with progress and so on.
 

chrishirst

Well-Known Member
Staff member
I believe nowadays most people using all kind of skeleton to start with? Like Drupal, etc?
Do you guys think its still a trend to use hard hand coding method?

Drupal is a content management system NOT a 'skeleton'.

The Templates/Themes/Layouts for any CMS STILL have to be "hard coded" BEFORE they can be used for displaying the content.
 
Top