Instructobit
Web development has become a very popular career and/or hobby that is fun and potentially lucrative, it has also allowed businesses, entrepreneurs and others to get themselves out there using informative, accessible and visually appealing websites.
To get started with web development there are a few things you should learn about. There are several different ways in which to create a website, one of which is to make use of a website creation platform such as Wordpress, these provide an graphical interface where you can drag and drop components onto a page to create a simple yet appealing and informative website. If you plan on creating something a more complicated or plan on properly teaching yourself web development, then you should probably start off by learning HTML and CSS.
To find tutorials on the individual components below
, simply search through the tutorials on this site to find what you need.
Teaching yourself HTML
HTML (hypertext markup language) is used to serve people formatted web pages. This should be your first step in learning web development. An HTML document is made up of several elements which function as containers for other elements and content, there are a few main ones that must be included in every document:
html
: This element represents the start of the HTML document.
head
: Contains the title of the page, meta data, links and other data that will not be shown on the page.
body
: The main part of the HTML document, this is where you place other elements and content
Most HTML elements have a starting tag which is the element's name surrounded by "< >" such as "<html>", and an end tag which is the element's name again surrounded by "</ >" such as "</html>". The basic structure of an HTML document looks like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
The <head> element contains other elements such as <title> or <meta> which will not be displayed. The <body> element contains all other content and elements such as <div>, <section>, <span> and much more.
To start developing HTML documents, simply create a text file, insert your HTML content and change the extension of the file to .html, then the file can be opened up in your browser and you will see the result.
Styling your HTML document with CSS
CSS is used to style elements and content within an HTML document, this is what turns a web page from a dull and unappealing text page into a beautiful and eye catching application.
Learning the basics of CSS is fairly simple, it is made up of two main components: selectors and properties.
A property refers to an aspect of an elements that you can give a different value to, for example the font size of an element or the thickness and color of a an element's border.
A selector is used to select specific elements, this can be done by selecting them by the name of the element such as "div" or by an identifier specified in the HTML document such as an ID or class.
Here is an example of styling all "div" elements in an HTML document to have red text and a blue background.
div{
color:red;
background:blue;
}
CSS has many more properties to adjust, giving you a lot of control over the look of your website.
Adding interactivity to your website using Javascript
Javascript is a programming language used along with HTML to provide client-side processing, interactivity and much more. The syntax of this language is similar to Java but it is much more simple.
To start off with, you should learn how to create Javascript functions that allow a user to interact with the website, you can add, remove and edit content depending on what the user clicks or otherwise interacts with. It also allows for quite complex processing tasks if needs be. Other uses of Javascript include:
-Asynchronous requests to the server that allow data to be fetched without the page needing to reload.
-Creating and accessing cookies.
-Storing values in variables for later use.
-Interacting with the HTML document object model (DOM)
Server-side processing with PHP
With PHP you can create scripts on your server that do various tasks, from saving data to a database, to processing data before sending it to a user. There are several other server-side processing languages that exist, but PHP is the common and compatible on most hosting provider's servers.
This language does get a little more complicated and does require there to be a server involved, but this can be solved by installing and learning how to use a local server such as WAMP on your home computer, this is not as difficult as it sounds and it provides an easy way to learn more about web servers.
Storing, retrieving and modifying data with SQL
SQL is a language that most database management systems use for creating and interacting with databases. A database is used to store data in an efficient and organized manner, where it is easy to access. Storing data in a database rather than text files or XML files provides quite a number of advantages such as:
-More efficient use of space
-Easier access to data
-Enhanced security
-Effective organization of data
-Less chance of data errors and corruption
-Easier development of data storage systems
It is quite easy to learn the basics of SQL and it is definitely worth it as it can also be used with many other programming languages.
