“Before Getting started with front end web development , I want to point out the difference between front end and back end web development.“
When we develop websites, our work is usually divided in two parts: Front-End Development and Back-End Development.
As the name states “Front-End” is the part of the code that is on the front of the application. It is usually visible to user in the form of an interface inviting to interact with user. The main purpose of the front-end code is to interact with user, as well as present the data in a well-defined style and matter.
The front-end developer is the bridge connecting the designer and back-end developer. The developer’s work is to take the final designs of an application from the designer, and code it into the front-end code so the back-end developer can understand it and build functionality of that app around it.
We call back-end code the brain of any webpage out there. The back-end development is a part of the application (website) that is never visible to the user. It is built with use of server-side language (Languages used to fetch data from somewhere else.) and database. In simpler words, front-end code interacts with a user in real time while back-end code interacts with a server to return user ready results. Anything displayed on the website is because of the query performed on the server returned data to the front-end.
Operation of back-end code is a bit more complex. The developer builds an application(code) (using server-side code like PHP, Ruby, Python, .Net etc.) which connects with a database (using MySQL, SQL, Access etc.) to look up, save or change data and return it back to the user in form of front-end code. This complicated structure helps us look for things, shop, interact socially and more in the modern world of the internet. If you think of any operation on your website like sending a contact form, signing up for a newsletter or editing page content, it is always a back-end code responsible for that operation.
The back-end developer usually takes ready front-end code and implements it into application where everything is displayed dynamically using data stored in a database. This developer works closely with proposed functionality specifications that end user want to achieve.
Now I’m pretty sure that you have clear understanding about both parts of development and can go on with front end web development.
Lets get start , as I mentioned in above paragraphs , everything you see on website is mix of three main components which are:
Lets discuss all of them one by one….
HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. It is written in the form of HTML elements consisting of tags enclosed in angle brackets (like ). Basically Html help browsers to display content on web page without the tags<> used. In this way , HTML elements form the building blocks of all websites. Example of HTML code is given below,
2.CSS- CSS provides styling to a web page. Everything that gives pleasure to your eyes is because of CSS. HTML just provides the readable data but by using CSS , HTML data comes in hand with presentation. It is like a gift (HTML) and a gift in wrapping paper ( HTML with CSS). CSS is added in HTML file by providing a reference to it. Example of CSS code is given below,
In this post , I’m not going to teach you all these three topics as their syllabi is very vast but I’m going to provide the resources from where you can learn them in a very efficient manner.
For HTML: http://www.w3schools.com/html/
For CSS: http://www.w3schools.com/css/
If you liked my post and if it would have benefitted you , please like my post and facebook page.