Everything that we see, feel or eat is made using some tools for it to materialize. Similarly Web Development requires some tools and along with it some languages, to be specific some programming languages through which websites could actually come into existence.
Today we’ll be talking about some of the basic tools and languages through which any newbie could develop a simple website and for simplicity we’ll be talking only about the front end of a website also known as the user interface today.
One of the most widely used programming language used for building the front end of a website is HTML (Hyper Text Markup Language). It is used for designing the things that we actually see in a page and also all the links that are present, through which users surf through different webpages upon clicking on them. HTML can provide just the basic design as it is mainly a hypertext language used actually for creating links between different pages and also provide some information content to the user. HTML files have a .html extension so that they can be differentiated from different files.
HTML makes use of elements; these elements are present in the language as tags. Each element in HTML has a starting <> and an ending </> tag. Every HTML document must have <!DOCTYPE html> which tells the system which type of document is it and also that it is a HTML5 document.
Also, each element has some attributes that provide some additional feature to the element. Example of some HTML tags are :
<html> </html> = All of the main webpage design code must be enclosed between these tags.
<head> </head> = It contains the title of the webpage, some scripts written for some additional processing of data and also links that lead to different styling sheets known as CSS. (We’ll be talking about CSS soon, keep reading)
<body> </body> = Here goes the actual webpage layout code.
These were some of the basic tags that are used in mostly every HTML document.
Next is CSS (Cascading Style Sheets). HTML provides a basic and also an old fashion way of designing webpages, CSS helps HTML by adding style to the HTML elements. CSS also is helpful as once a style code has been written for an element, the same code could be used for the same element in some other document which means that designers don’t need to write the same code over and over again. Once written, it will stay throughout eternity that is if the system doesn’t crash. J
CSS consist of rule set, each rule set has a selector and a declaration.
The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
One more on the list is JavaScript. JavaScript is a scripting language that is basically not for designing but for data processing at the client side. A server is usually that takes care of most of the data processing part however JavaScript was introduced to reduce the burden on the server. JavaScript also helps in reducing the response time of the page and improves the user experience with the webpage as pages load much more faster. Some of the basic processing done by the JavaScript; are validation of form data, animation on data or elements, etc.
This was a very very basic overview of how to proceed with web development, well we’ve talked about programming languages, coding and all but how do we write code. We can’t write a programming code in a Word document right… Well the most basic tool that anyone can use is a Notepad that is available on every PC as it is available with every OS anyone installs.
Well, Notepad…hmmmm… It’s not actually a tool it’s just plain old paper that requires you to do every bit of the job. What if someone helps you while doing your job that would save a whole lot of your time and also would help you to learn faster. Some of the tools used for coding especially for webpages are, well look below…
Sublime Text : It is one of the most popular code editors around. It uses a Python application Programming Interface and is built using C++ and Python. Some of its notable features are Goto Anything and Split Screen Editing. It was first released in 2008 and has been recently updated on 2018 with the latest being Version 3.1.1.
Atom : It is an open source editor software that allows to fully customize the editor as per the user needs for visualization. It’s back end is written using Electron which is a framework and front end is based on HTML/JavaScript/CoffeeScript. One of the cool features of it is Teletype that allows sharing of code between users so as to work together on the code. It was released in 2014 and has been recently update on January 2019 with the latest being Version 1.35.0Beta.
Visual Studio Code : This editor came in quiet late into the market but has caught the eye of many developers. It has some really cool extensions, like the live server that allows a developer to see the output of his code whenever the user clicks the save button, the browser automatically refreshes itself. It also allows split editing. It was created using TypeScript, JavaScript and CSS. It was first released on 2015 and has been recently updated on February 2019 with the latest being Version 1.31.0
Vim : Vim is an open source editor software that many L
These tools provide many additional features that help any developer write codes and also learn a language in detail while coding. These editors provide drop down list of functions as a developer writes lines of codes just after he/she enters a character. Also, these editors provide debugging tools and many more features such as live servers so that you can see the output of your code whenever you save it.
Well, that’s all for now… See you next time coding lovers.
