Are you impressed with the beautiful websites you visit daily? Or did you finally made the decision of learning how to make a website? Maybe you are just curious about how websites work?
Let me tell you something, you are at the right spot. Today i will cover the basics of web development (like tools, technologies, programming languages used to create a website) all through a step by step guide. So, let’s get started with our awesome journey!
What you will learn in this article?
- Simple requirements before getting started
- What is a Markup Language and HTML
- Give style to your markup using CSS
- Difference between Static and Dynamic website
- What is a server-side programming language and PHP
- What is a Database Management System and MySQL
- List of some advanced web development topics of interest
Simple requirements before getting started
You have to fulfill few basic requirements before we start making some awesome stuff. Are you ready?
1- You need a Web Browser to see what you design
As you are seeing this article using a browser it means you already fulfill this small but important requirement. Wow, let’s talk a little bit more about it.
A web browser is simply an application software particularly designed to view information resources on the World Wide Web. An information resource can be anything from a simple web-page to images, videos or any other multimedia content. These information resources are located by a unique address known as URL (Uniform Resource Locator). Simple enough?
Some popular web browsers are as follow:-
- Google Chrome
- UC Browser
- Internet Explorer
2- Text Editor or IDE (Integrated Development Environment)
You need a simple text editor to start coding websites right away. It’s likely that you already have one installed on your computer like Notepad, TextEdit etc. but i would recommend using a little more advanced text editor like Notepad++ or Sublime Text. As they have some features like “tabs” which allows you to open multiple files in one screen. We will definitely be using this feature a lot when we begin making professional websites.
If you want a more advanced software then you can choose an IDE (Integrated Development Environment) which provides you with a lot more features than a simple text editor. Some of its features include “finding bugs”, “intelligent code completion” etc.
Some of the most used IDE for web development are as follow:-
- Adobe Dreamweaver
- Aptana Studio
3- Domain name and hosting / Local development
As we will be creating some files to write the code for our website so we need a storage space where we put all these files and access them later. We have two options for storage space, these are as follow:-
Yes, you can create a website in your computer and view it whenever you like without having an internet connection. But the website is only accessible to you as all the code and multimedia files are residing in your local computer and no one else has access to it.
You can store the files anywhere in your computer but to stay organized i would recommend creating a separate folder for every website you will create.
If you want to make your website online, which allows your friends, family and the whole world having an internet connection to view your stunning website then you must read the “Domain name and hosting” section otherwise you can skip that and move on to the “Markup Language” section.
Domain name and hosting
In simple words hosting is an online file storage space where you can put your website resources (i.e. code files, images, videos etc.) so everyone having an internet connection can access them using a web browser to view the website, isn’t that cool?
There are many free and paid hosting providers you can use, such as:
Now you know where to store your website files and resources, but how other people in the world can access them? For that you need a unique address (often called a domain name) and link it to your hosting.
If you get the domain name and hosting from a same company then it’s more likely that they will automatically connect and setup your domain name with the hosting account. Otherwise you may have to do a simple configuration in your domain manager and hosting account respectively, you can get the step by step information from your particular domain name and hosting providers.
That’s all you need to create and view your own website. Let’s move on and learn which languages you need to start writing code for your website, excited? Me too!
What is a Markup Language and HTML
In simple words a markup language is used to describe and give structure to the content in a file. It consists of markup’s (also known as “tags”) which instructs the computer to display the text inside the opening and closing tag in a specified way (i.e. make this text heading or paragraph etc.). In most markup languages the tags are omitted in output and only the actual text inside them is shown.
There are many different markup languages but for modern website development we only use HTML and in particular the latest version which is HTML5. Let’s talk a little bit more about HTML.
HTML also known as Hyper Text Markup Language is the primary language of the web. Your web browsers understand it and display the formatted content on the screen while omitting tags from the end-result. Sometimes HTML files are also referred to as a “HTML document” or “web page”.
It consists of a collection of predefined elements, all of them have a specific meaning hence they should be used appropriately. Most of the HTML elements have an opening and closing tag which allows us to add the desired text in-between. Some HTML elements don’t have a closing tag that’s why they are known as self-closing tags.
Some of the most important HTML elements you see daily are as follow:
- Headings: <h1> to <h6>
- Paragraphs: <p>
- Buttons: <button>
- input fields: <input>
- Anchor tags (also known as links): <a>
HTML elements also have attributes which allows them to provide additional information and functionality. The allowed attributes depends on the element selected and should be include in the opening tag.
To start writing HTML code you need to create a file having an extension of .html from your favorite text editor. Save the file after writing some HTML code in it and then open it with your favorite web browser. It’s that simple!
Give style to your markup using CSS
Now that you may got a little idea about how the structure of a web page is created but you may be thinking about how your favorite websites like Google or Facebook style the HTML elements to make a professional looking website. Let me tell you something that it all happens with the great powers of CSS.
CSS also known as Cascading Style Sheets is a language that allows you to style your HTML tags according to your needs. Web browsers understand it and style your web page as desired.
The syntax of CSS is very simple as it consists of rule-sets which is further divided into selector and declaration parts. The selector defines the HTML element(s) you want to change and the declaration block specifies all the properties to be changed. The CSS properties have predefined meaning but you can change their values (like: “change color property of paragraph from green to blue”), the possibilities are endless.
For a complete reference of CSS properties i would recommend visiting w3schools.com website.
There are three ways in which you can add CSS in your web page, these are as follow:
- Inline style:- Inline style is a collection of CSS properties which are inserted within the “style” attribute of HTML element.
- Internal style sheet:- Internal style sheet is a collection of CSS rule-sets which are added in an HTML file using a <style> tag.
- External style sheet:- In external style sheet we create a separate text file having an extension of .css and place all of our CSS rule-sets in it and then simply connect that file in our HTML file using a <link> tag.
Difference between Static and Dynamic website
Actually we can broadly categories websites into two main types, Static and Dynamic. So far we have learned about the static website, now move on to discuss what’s different in a dynamic website.
A website whose content cannot be changed without actually editing the code is called Static website. These websites are only created to show the content which we don’t have to update frequently.
Dynamic websites are those which update their content frequently without editing the actual code files. Just like you see latest posts from your friends and family appearing in your Facebook news feed.
But how do they do it?
To create a dynamic website we have to use two more things, a Server-side programming language and a Database Management System.
The basic concept behind dynamic website is that we store and retrieve our data from a Database instead of hard-coding it inside the HTML file. A Server-side programming language is used to perform the operations of storing and retrieving data.
What is a server-side programming language and PHP
A Server-side programming language is one that runs on a server instead of browser. There is a big list of these languages such as PHP, ASP.NET, Java, Python and so on. For the sake of this article i will choose the most popular Server-side programming language “PHP” which is free and open source. Most importantly your favorite websites like Facebook, Yahoo, Wikipedia, Flickr etc. are developed using it. So, that’s the big reason of choosing this language as a career opportunity.
Let’s discuss more about PHP…
PHP (recursive acronym for PHP: Hypertext Preprocessor) is an object oriented high level scripting language. By scripting language i mean that it can be embedded within our HTML code. It is the most widely used Server-side programming language for creating dynamic websites. It has all the features of a modern programming language. It allows us to connect with a Database Management System to perform CRUD (Create, Retrieve, Update and Delete) operations on a database.
We need a text file having an extension of .php to start writing our PHP code. Yes it’s true, we can’t execute the PHP code in an HTML file, but we are able to add HTML code in PHP file.
To execute the PHP code we need a server. Are you thinking about what we will do if we haven’t purchased a hosting server yet? Here’s a good news for you: we can run PHP code on our local computer by installing a simple and free software. Almost all professional developers create the website in the local computer first and after complete testing of code upload it to the online server.
There are many free software’s available that provides the required tools to execute PHP code in local computer, some of these are as follow:
What is a Database Management System and MySQL
Database Management System or DBMS is an application software which allows you to create and manage your databases. There are several types of DBMS but we will only focus on the Relational Database Management System (RDBMS) which is built on the basis of Relational model.
There are several companies like Oracle Corporation and Microsoft which develop their own RDBMS. So, there are a lot of RDBMS which we can use with a programming language but the most widely used free and open source RDBMS is “MySQL”, we will definitely take benefit from it.
Want to hear a good news? Here it is: As we have talked about few software’s earlier XAMPP, WAMP, MAMP and LAMP they all come with a built-in MySQL DBMS and an application called PHPMyAdmin which makes it so easy to create and manage a database, so we don’t need to install any additional software.
Save and retrieve data from a database – (MySQL)
There is one more language called as Structured Query Language or SQL which is a common language for talking to RDBMS and allows us to perform a bunch of operations (like creating a database, CRUD “Create, Retrieve, Update and Delete records” etc.) on a database.
To learn more about SQL i would recommend visiting w3schools.com
List of some advanced web development topics of interest
That’s all for now, if you want to learn more than here are some advanced topics of interest
- Responsive Design
- Media Queries
- Bootstrap (a CSS framework)
- PHP frameworks
- Content Management System
- Icon fonts
- Bootstrap glyphicons
- FTP (File Transfer Protocol) / C-panel to upload website files to hosting/server
Web development is an interesting field with a big scope due to the increasing use of internet day by day. Small and large businesses are hiring people to develop websites for their online presence. You can also work from home as a freelancer and start earning money right away. But the main thing is that it takes patience and continuous effort to learn anything.
Share your own experiences about web development technologies in the comments. Also let me know how’s my first blog post and if you don’t understand anything then i’m here to help. Just contact me.
If you find this post useful, then don’t forget to share it with your friends on your favorite social media platform.