How does one create a website – I’ve come across this question a lot of times, mostly from people aspiring to learn web design or web development but not knowing where exactly to start and go about it. I mostly thought the question was too broad and vague to answer, but after some reflection felt it might be a valid question.
Web Design and Development has indeed become a wide area now. With concepts like pre-processors, frameworks, dependency managers, jargons and platforms it might get a little too confusing. I recently had a conversation with one of my friends who wanted to learn web design. After some research she decided to try learning “HTML”,”CSS” etc. However, I was a surprised to know she spent a lot of time only trying to learn git instead because the web design tutorial she was referring to used git to make things easy. Yes, git is useful, but it might not be the first thing a beginner should face when learning web designing. So if you’re a beginner and didn’t understand the paragraph above, don’t worry, the whole point is that it’s you don’t need to 🙂
This is why I thought of putting together this series of web design and web development tutorials in a fairly structured manner. You can think of it as my personal journal, where I’ll document all the tools, resources, projects etc I’ve come across when learning web design and development. I’ll continue to document all that I learn in the future as well. This way it becomes a good repository for you use as well as a reference point for me to revisit in the future if needed. I hope it serves it’s purpose.
Components of the web (scope of this series)
So before we jump into creating a website / web application let’s understand the overall landscape.
The Network
The web is full of servers and clients.
1. Servers You can think of servers as computers that are a bit more powerful and customized to have good connectivity and high processing speeds. These are the systems that “house” the actual web application / website. Anything you make, if it needs to be “online”, it needs to be on a server. As the name suggest, it’s the system that “serves” the web pages.
2. Clients: Clients on the other hand, are the systems you and I use. It can be anything – desktops, laptops, smartphones even smartwatches.
So the web is basically an interconnected network of all these servers and clients.
Websites vs Web Applications
I have seen many people use the two terms interchangeably. The term “website” being more popular. People often use the word “website” when they’re actually referring to a web applications. So what’s the difference between the two. Well, it’s a very blurry line. Traditionally, websites were basic set of pages while web applications were more sophisticated systems that let you do certain things, like gmail letting you check mails or even google letting you search random content. However with time, even websites are developing advanced features thus blurring the lines between the two. Today different people have different definitions for the two. On a broad level however you can think of websites as a slightly simple version of a web application. In this series I will normally use the term “web application” in general.
Components of a web application
On a broad level, web applications have a front end and a back end component.
- Front End
Front end is what resides on the client side. It’s everything that we can see and interact with directly. It’s what’s displayed in our browsers. The login forms, Facebook feeds, Inbox views even this page, it’s all front end. The front end includes visual as well as behavioral components.Visual Components include everything that we can see, the text, fonts, colors, buttons, form fields, images etc.
Behavioral Components are aspects that determine the behavior of the page. For example buttons being disabled in certain cases, automatic refreshing of your Facebook timeline, alerts being prompted when your password is not strong enough etc.
LanguagesThe front end is made up for three main languages.1. HTML -> Decides structure of your webpage
2. CSS -> Decides look and visual appeal of your webpage
3. Javascript -> Decides behavior of your webpageThere are many more languages, frameworks etc like jquery, Pre-Processors, Plugins etc. But let’s not get into those details for now. So the front end is basically a “bundle” of HTML,CSS and JavaScript working together. When a page is being views, HTML,CSS and JavaScript code actually resides on your systems and is being run be the browser.Knowing only these languages make you a web designer. - Back-end Components
Back-end components are what stay and function on the server side. We cannot see or interact directly with it. Examples include instances when Facebook checks your credentials and either logs you in or not, or how gmail stores all of your email etc.The back-end comprises of logic and a databases.Database is where all the necessary data is stored. It’s where gmail stores all your mails and contacts, or where Facebook stores the list of all your friends, posts, etc. Or an E-Commerce site holds all your purchases, wish-lists etc.
Logic is the basic behavior of the application. Example: When someone adds a friend on Facebook, the concerned account should show up under “friends”.LanguagesDatabase : Likewise, there are many types of databases and associated languages, MSSQL, SQL, MangoDB being a few examples.
Logic : A variety of languages can be used to define the logic, a few examples are PHP, .NET (C#, VB), Ruby, Python, Perl etc. Its not necessary to know all languages, knowing any one should also suffice.Knowing these languages along with basic HTML, CSS, makes you a web developer.
For the sake of this series, I’ll be using PHP and MySQL for the web development tutorials.
I hope you now have a good high level idea of how the web works and what purpose every language has.
In future posts we’ll dig deeper into every language and stage of web design and development. We will however start with front end design as you would need atleast basic understanding of front end while learning back-end web development.
