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
- Make your website interactive using JavaScript
- 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
- Conclusion
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
- Firefox
- Safari
- UC Browser
- Internet Explorer
- Opera
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
- Eclipse
- 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:-
Local Development
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:
Free Hosting:-
- 000webhost
- awardspace
- freehosting.com
Paid Hosting:-
- Godaddy
- Bluehost
- HostGator
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
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>
There are more than 100 tags in HTML5. For a complete reference of tags you should visit Mozilla and w3schools.com websites respectively.
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
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.
Make your website interactive using JavaScript
So far we learned how to structure and design the website but do you know we can also add really cool things in a website like animated sliders, time counter, validate user input, menu drop-down, load latest posts without refreshing the page like in Facebook etc. It’s all possible due to the power and flexibility that JavaScript provides.
JavaScript
Basically JavaScript is a high level object oriented programming language which your browser understand. It has all the features of a typical programming language such as variables, arithmetic and comparison operations, loops for repeating a task again and again, arrays, functions and so on. It allows you to interact with your HTML elements and their design (such as change the color of paragraph on button click).
To add JavaScript in your web page you have two options, which are as follow:
- Inside <script> tag:- You can add your JavaScript code inside HTML file using a <script> tag. You can place this tag anywhere in the document but the recommended way is to add it just before the closing <body> tag to decrease the page load time of our website.
- External file:- If you want to use the same JavaScript code in multiple files then i recommend you to create a separate text file having an extension of .js and place your code in it. So, that you will be able to add it in any web page you like. You can connect a JavaScript file in HTML using a <script> 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.
Static 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 website
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
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)
- JavaScript Frameworks
- jquery
- PHP frameworks
- Codeigniter
- Laravel
- Symfony
- Zend
- Cakephp
- Content Management System
- WordPress
- Drupal
- Joomla
- Icon fonts
- FontAwesome
- Bootstrap glyphicons
- FTP (File Transfer Protocol) / C-panel to upload website files to hosting/server
Conclusion
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.
Good job keep it up i dont knw if u can create a post on how to create an app without coding and use ad on it
Thanks dear.
Actually on this website i’ll only focus on things that are related to web design and development.
Interesting I really want to know how to create a web site and web development. I have passion for it.
Great to hear that you have passion for web development field. I’ll be uploading more useful resources on this website to help beginners learn web development easily. Please stay tuned.
Very good
Thanks a lot dear.
Thanx for a nice & brief overview of the website.
You are welcome bro.
great work,i need ur contact pls.
wow,this article is superb,marvellous work.pls i need ur contact i am passionate about web design and development.
I like the valuable info you provide in your articles.
I will bookmark your blog and check again here frequently.
I am quite sure I’ll learn lots of new stuff right here!
Good luck for the next!
Thanks dear.
Great and educating. Best precise summary of most that i needed.
I need more help in that coz am a beginner.
Hi Jerry Alvin,
You should join our FB group and ask any question related to web development there. It is a very big community of web developers that are willing to help each other.
Link: https://www.facebook.com/groups/webdev
I want you to guide in building an E-commerce website using wordpress or from the scratch.
Please can you help me?
Hi dear,
I’ve already written few articles that may be helpful for you.
1- https://www.edopedia.com/blog/how-to-create-a-wordpress-website/
2- https://www.edopedia.com/blog/best-free-wordpress-ecommerce-plugins/
3- https://www.edopedia.com/blog/best-free-ecommerce-wordpress-themes/
Great
Thanks Muhammad Qasim. 🙂
This is the best blog i have ever seen. i like it.
Thanks a lot Eusto Kateya. 🙂
Really useful for me as a beginner!
Thanks edopedia.
You are welcome Ali.
Nice..best information
Thanks dear. 🙂
This the best blog i have ever seen.It clears all confusion. #thanksedopedia
Thanks Sahil,
I’m pleased to hear that you like my blog. It is really motivating for me.
This is a post that has ever caught the attention of my yearning desire to learn website development. I found it mind-blowing and useful. Please I want to learn more. I want to devour more of this and I don’t mind if you can be my coach in this field. Thanks and God bless you. Warm regards from Nigeria.
Hi Olawale Joseph Livingfaith,
I’m very pleased to know that this article provides useful information to you. I want to inform you that I’m already working on Edopedia to create step by step courses on programming languages that are related to web development. So, it will be very helpful for you and many others.
By the way, if you ever have any questions related to web development then feel free to ask me on Facebook.
Here’s my FB profile link: https://www.facebook.com/trulyfurqan
God bless you too dear. 🙂
Hi. I want to learn Website debeloping. Can you teach in a little bit?
Hi Xtian,
Thanks for your comment.
Yes, sure. Ask me any question related to web development and I’ll try my best to help you out.
Greatest work please keep it 👆 up
May God help you. Thanks.
I need your personal assistance.
I have sent you an email.
Hii.
Thanks a ton.
I want to learn web development. But before starting, I was in search of a blog/tutorial from where I could have general idea about the tools & elements which are used in it. And your blog gave me that general idea from where to start it. You wrote it in a very simple way. Thanks a lot again.
Hi Sandeep,
I’m pleased to hear that this article helped you. I’ll be creating similar articles soon to help you create your own professional website in a step-by-step manner. So stay tuned.
Thanks.
Hi boss I’m Godfred from Ghana and I am 21 years old and I will please want to know how to create or design a software or website, Because I have chosen you as my role model so please I’m on whatsapp can you please let us chat there so that you can teach me more about it there please.
Hi Godfred,
I’ve sent you an email with the details on how to create a website using WordPress.
Good try …. Hope to see you achieving more 🤘👌👌👌👌👌✌️✌️✌️🤘🖖🤞
Thanks dear 🙂
bawa g heavi ho gya <3
Thanks bawa 😀
great work………….keep it up bro!
Thanks dear 😉
great work ………keep it up bro!
Great post!
By the way do you know about Codeigniter framework? If so, will you please write some articles on it.
Thanks.
Hi,
Yes i’ll definitely write articles on Codeigniter in near future. So stay tuned. 🙂
Awsome Bro… good Work . keep it up?
Thanks bawa g. 😀
Great article and important information for newbie Web Developers
Thanks Noaman for appreciating me 🙂
Nice article dear!
Only few people write perfectly organized and structured article on their first try, you are one of them.
Best of luck.
Thanks for the compliment dear 🙂