Learn How to Code a Website in One Day - Web Development Introduction

This short, easy to understand article is a single page taken from the tutorial on "Creating Websites" at www.tastyseed.com.

Web development is a broad term used to describe the many aspects involved in creating a website. For more information, you can look up Web development on Wikipedia.

Literally a website is nothing more than an arrangement of folders with files, images, and other data types in them. The files contain specific instructions for the website, such as:

• How the website looks, its order, layout, color, fonts, etc.
• How, when and where to display your website content.
• How your website will act and tasks it will perform in various situations.

These instructions all come in the form of various "coding languages" which as any language, just conveys a message. In this case a coding language is simply any language that a computer can understand.
Therefore, you can say...
Your website is made up of files that contain instructions in languages that a computer can understand and execute.

All modern, well developed, websites believe in the separation of elements to achieve a high level of clarity, portability, and maintainability.

The structure of a website is usually broken down into 3 distinct elements:

As mentioned, these elements exist as files, or images, or other types of raw data. I will be referring to these 3 elements using these terms:

CONTENT, PRESENTATION , and BEHAVIOR respectively.

It is important to remember that these elements will exist separately as often as possible, so when we talk about them, please keep that in mind.

Separating and distinguishing your elements makes them a lot more organized. When your elements are organized, they are easier to find, access, edit, and maintain.

Consider a massively huge site like Amazon.com. They have millions of products and therefore millions of different product pages. Suppose there was actually one file for each product page on amazon.

Notice, however, that every single product page looks and acts the exact same way. For example the search bar and product navigation are exactly the same, and the layout is the same, the product image, the description, the user reviews, they are all in the same place on every page.

Click on image to view full version

So not only would you be writing the same coding instructions over and over again, if you ever wanted to change the presentation or behavior of your site, you would have to edit every page you ever created.

You can see clearly that it makes much more sense to be very organized.
By simply separating out all the elements, you have instantly become more organized and gained a huge advantage. But there are more benefits as well.

Remember how we said that amazon's product pages all look the same. The product content changes, but the structure and the layout does not. You can see then that if you could create a central page or TEMPLATE that contained only the PRESENTATION + BEHAVIOR files, then you can reuse that page over and over as a sort of "wrapper" for the different CONTENT (the different product data). Now if you wanted to make changes to how your site looked or behaved, you would need only to edit your single product template page, and since your entire site uses that single template over and over again to display product content, then the result would be a change to your entire website.

If you have one million products, then you still have to store and retrieve one million product pictures, product descriptions, and product data to load into your template. One way of doing this is to store each product's data in its own file or folder. This works for small websites with maybe 20 products, but not with one million files or folders to sort through.

The better way to store, manage, and organize your CONTENT data is to use a database. We will talk more about databases in our content chapter, but for now all you need to understand is that a database is a superior way to organize your data.

Learning HTML:
Many of the existing website tutorials focus on learning HTML and getting you started with coding right off the bat. While HTML and coding are integral to web development, I strongly believe these tutorials are vastly outdated and do not give an accurate representation of what developing your own website is really about.

Obsolete Web Development Practices:
Web developers worldwide, have been building from past models and experiences and are developing better, more productive ways of doing things. The concepts of old, while still valuable, are no longer as valuable, nor as productive as what is been developed today, and will be developed tomorrow.

It is therefore crucial that you learn not only the HOW, but the more fundamental and conceptual WHY, so as to get you on a more rooted and versatile path. You need to be versatile because the pace of technology is like no other industry. By understanding WHY things work they way they do, you are better able to adapt to improved methods because improved methods are frequently just better adherence to to the core development principles.

 

Motivation:
If I did not really love coding, messing up so much and having to UNLEARN so many things would have probably destroyed my confidence. On the other hand, learning how huge sites manage so much information so elegantly is vastly more motivating. (You can read about who I am in the about section here)

Simplicity:
All I have taught you up until now is essentially: Be organized.
Coding really is that simple. It is really that logical, because coding itself is 100% logic. Slow down, relax, think simply, start small, and you will get there before you know it. I promise. Google was not built in a day =)

Web Standards:
Whenever you read about "web standards" or "validating your code" the entire purpose is really just to make things more organized for yourself, and for others. We will get into the details later, but web standards are good because they are organized, so choose this path whenever you can.

For the complete tutorial, and more on how to Code your very own advanced Webite, please go to www.tastyseed.com