How To Start Coding Websites From Scratch, A Brief Overview

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:

• XAMPP
• WAMP
• MAMP
• LAMP

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.