Web Development
Getting Started – Front End Web Development

Getting Started – Front End Web Development

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.

Front-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.

Everything that your eye sees on the web is the mix of HTML, CSS and JavaScripts. Those are the main three languages used to present your website in the best way possible. HTML (or Hyper Text Markup Language) is responsible for creating a markup ( systematic data presentation ) of your website and letting the browser read it and display it correctly. CSS (Cascading Style Sheets) is the place where we bring all the colors, backgrounds, font sizes etc. to life. JavaScript is the most advanced language of all three which enables us to interact with user in form of sliders, drop-down menus, quizzes, and many more interactive elements where sky is the limit.

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.

 

Back-End Development

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:

  • HTML
  • CSS
  • Javascript

Lets discuss all of them one by one….

1.HTML-

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,

3.Javascript-

Javascript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.javascript is main programming language used in web development. It add interactivity to your website like the scrolling menues , toggle things , sliders , carousels( image sliders) etc. Example of javascript code is given below,

 

Besides main elements in front-end environment, there are libraries and frameworks making code and life easier. It all depends on the needs of the project and client. You can use jQuery (JavaScript library), Less (CSS library), Bootstrap (Front-End framework) or any of the different ones that are coming out every day. But these are complex things now,once you will get handy with main three components, you will automatically start getting idea about these things. Even I will be coming with separate posts to give you a insight to these elements individually one by one.

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 getting a insight into all three components (HTML , CSS , Javascript ) along with practicing I would recommend you the CODECADEMy website , even I started from here. I have attached the links of courses. And one more things, these courses are free of cost and you can complete them on your pace. Just all you need is to create an account over there.Link is: https://www.codecademy.com/learn

After you get the basic knowledge from the above links, I would recommend you to consider W3School , it provides the material that you would be able to understand easily after going through above course and make you aware of all the things available in HTML , CSS and Javascript. Links are:

For HTML: http://www.w3schools.com/html/

For CSS: http://www.w3schools.com/css/

For Javascript: http://www.w3schools.com/js/

 

If you liked my post and if it would have benefitted you , please like my post and facebook page.

Getting Started – Front End Web Development SVB

Summary:

User Rating: 3 (3 votes)
Share this Story

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

About Me


I am an enthusiastic technology geek, always on an endeavour to explore new areas of technology. At present, I am on an endeavour to explore the area of Machine Learning. At KnowMyWork I am constantly sharing my learning from my endeavors with people.

Facebook

Newsletter