
Need help creating website from scratch - jhacks
Hi all.<p>I'm looking to learn to develop from scratch. I know html, css, and some php. I understand the basis concepts of web development, but I want to really gain a better understanding of things from the ground up. And learn to do it right.<p>So, I want to learn how to best approach file structure, front-end/back-end coding (including language vs framework), etc. I'm even open to learning the hardware side of things (to a certain extent).<p>I'm just sick of the shortcuts and "user-friendly" approaches to creation. I feel more lost than if I were to learn the fundamentals. I never get the questions I actually want answered, answered.<p>Are there any good resources out there to learn this? Any and all help appreciated. Thanks.
======
thetabyte
I don't have time at the moment (I'm about to leave a train) for a detailed
explanation, but what I can say:

Look into Ruby on Rails. I've started it recently, and it's brilliant for
building and deploying a web application. It cuts out so many annoying steps.
I recommend the Pragmatic Programmers Guide to Agile Web Development with
Rails, but there are plenty of free resources too.

If I have time, I'll post more later! Hope this helps!

------
noahc
First of all don't try to create a website from scratch. It's too much work.

I would suggest using something like twitter bootstrap to get started on the
css if design isn't your strong point.

Next you need to learn how to program. Php is super easy to get started with,
but it has a reputation for teaching people bad habits. You can use a
framework like code igniter to get started.

Essentially, what you need to do is find a framework that is MVC in a language
you want to learn and focus on that. Just make the pages work. Then you can
come along later with bootstrap or a theme you've created and make it look
pretty.

If you ever get stuck ask a question <http://stackoverflow.com>

------
mrpopular
> I'm just sick of the shortcuts and "user-friendly" approaches to creation. I
> feel more lost than if I were to learn the fundamentals. I never get the
> questions I actually want answered, answered.

Depending on who says it, that could mean anything. Can we have some examples?
Lest we send you off on a wild-goose chase learning every last detail of some
huge trendy framework, only to discover you were meaning something that takes
5 lines of PHP...

~~~
jhacks
It's hard for me to really say what I want as I don't know enough to ask the
right questions. However, here's an analogy...

You want to a build a house. You can build it from brick, stone, or wood.
However, if you tell someone how to stack bricks, lay stone, or cut and screw
together wood, will they actually know how to build a house? No way. So, here
I am looking at learning code, but it doesn't help because I want to see the
bigger picture. So, I'm fine with shortcuts, like using an excavator to dig a
hole for a foundation instead of a bunch of guys with shovels. However, if you
understand the big picture, at least you see why your using a certain shortcut
and what it achieves.

I'm not sure if that helps at all, but if I could say what I want specifically
relating to development, I know I would want to learn file structure, how all
the different files and tables should relate to one another and be organized
(and where, locally vs. server vs. development server). But as I said, I don't
even know the questions to ask here, which is part of the problem. So any help
is appreciated. Thanks!

------
ryanfitz
Browse around github for projects that involve whatever concept you want to
learn. Study the source code and attempt to add new features or make some sort
of change. As an example if you want to learn less/css look at twitter
bootstrap, for javascript check out underscore.js

------
chetane07
It seems your focus is not on productivity (e.g. build a good website,
quickly) but rather working hard, from the basics in order to build a strong
foundation for the future. Learning from the "ground up" is no easy task, so I
would suggest a divide and conquer strategy rather than trying to attack all
the problem at the same time. For that reason I'll split the learning in a few
different buckets, that you can choose to attack whenever you feel ready for
it. I think the methodology below works best if you have a simple project in
mind to work through (But remain stay realistic/minimalistic for now).

1\. Front-end layout: html/css

Here, think about the website layout you would like to have. Feel free to
wander the web and get inspired by other design you like, and try to recreate
them. At this point, you might need to brush up your Photoshop skills (for
minor things). Look at css frameworks in terms of what they have to offer, and
recreate it. (You can even look at their code to understand better).

I would highly recommend using Firebug at this stage, to inspect page elements
and css properties for websites you visit. As far as html is concerned, learn
about good practices, and standards (quickly, don't become a fanatic). Use w3c
validator at the end and try to make it down to zero errors/warnings.

2\. Front-end UX: javascript

While html/css focus on presentation, and creating a layout. Client-side
Javascript will give life to it. Here I would suggest doing basic things like
onclick events, DOM manipulation (e.g. create tabs, when you click on a link a
div appears, the other one becomes hidden), changing css properties based on
events and so on. You have a big important choice to make here however: To use
jquery, or not.

jQuery will make things much much easier, because the truth is client side
javascript is a big mess. Every browser handles events, dom, etc...
differently. If you were to use pure javascript from scratch, you would need
handle all those differences yourself in order for the site to work on all
browsers. If you use jQuery, it's all taken care of. So it's your call how
much time you want to spend here. Honestly, I think it's safe to use jQuery
directly. Also, I would suggest reading the following book at this point:
"Javascript, the good parts". Don't worry, it's a small, quick, and easy book
to read.

NOTE: The following two steps above can be done on your computer locally,
without the need of a server etc. But we are at a fork now, as you'll want to
get your stuff online. If you want to learn about server now, read on. If you
want to focus on back-end first, skip this step and come back to it
afterwards.

3\. Server stuff

The easiest way would be to get a hosting, and drop your files using ftp. But
you asked for a harder way which teaches you the fundamentals. I would
therefore suggest getting a VPS (Virtual Private Server), which is a machine
somewhere online which belongs to you. On this 24/7 connected machine, you can
install anything you want based on your needs. These are not free, but if you
look at <http://chunkhost.com/> you can get one free month. Having a domain is
useful as well, which is not free. But you can always reach your server using
its IP if you prefer. You are familiar with php already, so go ahead and
install apache/mysql on that server, along with an ftp for you to connect to
it. How to learn about it? Slicehost has amazing documentation
<http://articles.slicehost.com/sitemap>. I realize there are 'hotter' things
out there than apache/mysql, but stick to the basics for now. After all, this
will not teach you how to install "apache and mysql" on a machine, but really
teach you how to get/setup/install anything on a VPS (nodejs, nginx, any other
db). A word of warning here, this will involve very little programming, and
might seem pretty tedious -- but it's good learning.

4\. Backend: MVC

You already know php, and I suppose how to use mysql with it. So it's time to
use the MVC pattern. There are many frameworks out there, but if you really
want the core understanding of how it works, create your own MVC framework.
There are a few tutorials that will walk you through it, and give you great
understanding of model, view, controller, routing, etc... At some point, you
might realize you're duplicating a lot of mysql code and queries are all over
the place. You might want to create a simple abstraction layer that makes it
easier to create your queries in php (rather than in SQL). Once you get those
running and working, it should be an Eureka moment. You'll understand a world
of opportunities opened up for creating more complex websites, in a simpler
way. You'll also realise that there are so many cool things you could add to
make the system "better". That's where Frameworks come in: Teams of strong
people have spent time to precisely create that. If you want to stick with
php, look into "CodeIgniter" which is a lightweight php mvc framework. It is
so lightweight, that it might feel in many ways similar to what you created.
Also read about ORM (Object Relational Mapping), by using "Doctrine" along
with code igniter.

5\. Next steps...

If you make it this far, congratulations :) The road won't be easy, and you'll
have to dig all over the web to find answers. But it's through this search
that you'll progress, so don't let it stop you (think of it as a sign you're
doing things right). Now once you make it this far, there will be a lot more
interesting topics to look into. But remember this lao tse quote: "A journey
of a thousand miles begins with a single step" -- take your time, be patient,
and learn one step at the time. Good luck, and I hope this post will be useful
to you.

~~~
jhacks
THANK YOU!

That was incredibly be helpful. I will work my way through this stuff for sure
and hopefully all works well. I'm sure I'll stumble and fall a bit... but
that's part of the learning process. I'm in between a rock and a hard place. I
want to focus on productivity (build a good website, quickly), but don't want
to skimp on fundamentals and get lost in all either. I'll to try my best to
find the balance, but knowing me I'll likely take the slower route and learn
all I can... hopefully it ends up being the better choice.

Anyway, I guess it's time to dive into the front-end a bit more. In regards to
photoshop, is splicing the accepted way to design html/css? Or do designers
ever go straight to the code?

And I think going the jQuery route will be more effective. I'm sure you'd
learn javascript by default when learning the jQuery framework anyhow.

And then there is the back-end. Which I will tackle after the above. Although,
one question on that... as I only know limited PHP (and mySQL), I'm open to
learning something different (Python/Django, Ruby/Rails), what are the reasons
to choose one over another?

Anyway, I'll take this all one step at a time.

Thanks again!

~~~
chetane07
I'm not a "designer", so the way I use photoshop is potentially not the best,
but it works. I usually design my website on photoshop (after manual sketches)
in order to be able to try different prototypes fairly quickly. I don't use
the splice tool, but rather generate pictures that I need manually. (e.g. 1x20
image is enough for a background, logo in png if need for transparency etc..).
Then I jump to css and build up the design.

As far as php/mysql vs. Python/Django vs. RoR... I would suggest sticking to
what's most comfortable for you to learn fundamentals. But once you know your
basics, it's much easier to jump from a technology/language to another.

~~~
jhacks
Thanks again.

Okay, so you just use it as a tool to get the image out there, but not to then
generate the code. I'm not looking to be have an artistic website, I actually
like minimalist and easy to use, so I'll just code that myself, no splicing
necessary.

Thanks again for the help.

