Web Development Fundamental’s

Web Development is a topic which every individual should know to a certain extent. Today in the age where the internet is available everywhere and easily accessible the businesses tend to target the people through this medium. Many small scale businesses seeing the potential of web pages are bringing there businesses online. This has led to increase in the requirement of the web developers. So an individual can use this opportunity and build a career in this huge field. The are many things which a individual should keep in mind and some common mistakes which one forget while pursuing a career in this field. Every new individual should start leaning the web development in HCJ(HTML, CSS and Javascript) In this post we try to bring this into consideration and provide a list the fundamental which will help in the process of learning.

HTML Fundamental’s

HTML has been around from a very long time from being This to what we see today is a long journey. This was not design to develop websites with great design, but describes the structure of a Web page. So coming back to our topic, what we discuss further is been written keeping in mind that the reader knows the basic of HTML. Before starting one thing to take forward, HTML is not a programming language people tend to forget that many a time. So lets start with the fundamentals.

• Semantic development

HTML has undergone a long journey and has introduce the concept of semantic development with the introduction of the HTML5. So what is semantic development? It is a way to give the meaning to different section of the web page which makes the code more readable and understandable to other’s and also makes debugging and updating easier. So what are the tag’s used in the semantic development.

The above tags are the mostly used by the developers, there are more semantic tags other than this but they are used in the advance web development you can learn about it from here.

A developer should use these semantic tags for the web development as it gives a meaning the every section of the page and is a sign of a good developer. These are just the tags and don’t do some magic like the H tags or the anchor tags.

• Doctype at the top of web document

Doctype declaration should be present at the top of every HTML pages. Declaring the doctype tells the web browser a little bit of information about what it is going to see on the page. Because there are different specifications for XHTML and HTML, the web browser knows which language it’s about to see and render. IN HTML5 we write

• <div> tag making life simpler

Division is a tag which is used to create the web document in the form of blocks or containers. Most of the developers use it with the semantic element to create the web pages. It is mostly used with class or ID attributes, so that CSS styles and Javascript functionality can be applied of the particular block of web document. This provides easy control over the elements inside the division element which is wrap around a particular section of the code.

• Indentation a good practice

Writing the code with proper indentation helps you when you need to apply CSS styles and you need to target the element which may be wrap inside other element and to understand the formatting to be done by using CSS styles. It is not compulsory to use the indentation, but using it makes the code look clean and help to debug error’s faster. So a learning individual should keep a practice to use indentations.

CSS Fundamental’s

Cascading Style Sheets is the one which makes the web pages look prettier. It help to design the webpages and make them more attractive which could not be useful with the help of only HTML. The version of CSS which is used is CSS3. Learning CSS helps you to get yourself in the front-end development which also include HTML and Javascript which we will discuss further. Whenever one start’s learning the CSS it should know this basic fundamentals which are discussed here.

• Include CSS files externally

There are three ways to include CSS to your HTML. knowing about all three is good but we don’t need to use all three ways.

1. Inline
2. Internal
3. External

we need the use the External way to include the CSS styles as it makes updating the style easier and saves us from the problems which arises when using the Inline and Internal coding style. keeping things separate help us operating in simple and smooth manner.

• CSS selectors a good way to target elements

Selectors is the art in CSS which help us to target the the HTML elements and Tag. With CSS3, we can target almost any element on the page with a wide range of selectors. using selectors for providing CSS styles and formatting to the document improve the CSS styles reusability. Adding the tag which require the style which is used earlier adding same styles again and again increase the length of the CSS document and creates unnecessary large code. so try to use the selector and don’t remember all the selectors just learn and use the cheat sheet for CSS which you can download from here.

• Don’t mug up all CSS styles

CSS3 has brought a whole lots of new styles and remembering all the styles is not a cup of tea for all and it is also not essential to remember so. CSS has large styles and a good developer take help of internet sources whenever he/she wants to use any CSS style which he needs to use. One of the largely used website for CSS help is CSS Tricks. Whenever you need to apply a formatting and you don’t how to do so you need to use these as your helping hand. CSS is not a hard Topic and the introduction of CDN ( content delivery network) which is provided by the Bootstrap and Google materialize.css are the two which help you by using their styles easily by including its URL in the project. we will learn more about it in other blog post.

• Give a try to templates

It is good to use the ready-made templates rather than starting the whole thing from scratch. Today when you search for free template there are lots and lots of sources available. Just download the template and modify according to your use and finish the work.

1. https://colorlib.com/
2. http://www.mashup-template.com/templates.html

and many more are out there over internet for you to explore.

JAVASCRIPT

One of the most popular and used scripting language is javascript, yes Javascript is a language which was developed by Netscape. This browser first introduced the javascript to include the interactivity into the web pages. Javascript has evolved in the years and now the one we are using is the ES9. Javascript is also called ECMA script by many people. It introduce the concept of functionality and behavior changing into websites. Learning this requires to brush your knowledge of logic which is important in every language. So lets learn some of the fundamentals of JS :

• Know where to put your script

Like the CSS, javascript should be written in separate files created only for javascript itself. Knowing this we should also know where to place the script tab for linking the javascript into our HTML code. It is always preferred to place the script tab at the end of our code before the closing of the body tag. This is due to the reason that HTML interpreter reads the code line by line. So placing the script at the start will led the the interpreter to read the script first and if the script is too long it will delay the reading of HTML body tags and this is disturb the user experience. so keep a practice to always place the script tag at the end of our HTML code and before the closing of the body tag.

• Where to start is Important

Javascript has gone through many changes in the previous year’s, so a person just starting with this needs to know where to start from. JavaScript is object-oriented, but is not a class-based object-oriented language like Java, C++ etc. Class-based OOP languages are a subset of the larger family of OOP languages which also include prototype-based languages like JavaScript and Self. So start with grabbing the tags with the help of class name, id, name. display their values in the console. perform mathematical functions and operation, there is many different mathematical operators and functions which you have not learn in other language like java, C and C++. After this go the concept of DOM manipulation and event listeners. Learn new variable type of Let and const introduce in ECMA 6. Then go through advance looping concept’s and than start with functional development and then learn the OOP part of this language.

• Where to code javascript while learning

This is one question in the mind of every programmer when learning to code in javascript.Most people code in .JS file link it to a empty HTML page and refresh the page again and again after updating the the .JS file. I would suggest two ways which is helpful and makes coding easy. First is to use the console provided by the browser and can opened by going to developer’s option in the browser. The console is very user friendly and provide the suggestion which makes coding easy for the person. Another resource is the repl.it. This is a very good online resource which help you to code in javascript and also help you to store your work. Every programmer should have a environment of its own which help him to work in a better and efficient way. Choose any of the above option to start learning javascript.

• What after javascript

After completing the long journey of HTML, CSS and javascript, what is the next step you should you take to continue your journey in web development. There is much more to learn about the web development which can’t be covered in this post. we learn of the front-end technology so our next step should be to learn back-end technology which consist of the databases. Having a grip over javascript help you to learn javascript libraries like the React, Angular.js, Jquery. This libraries not help in efficient DOM manipulation but also help in front end development for creating websites with reusable components and uses JSX. This is beyond the scope of this post, but I thought that introducing this will help to create other post of each of these Topics.

So I hope I could explain you the fundamentals of web development in the easy way possible. I tried to cover all the thing which I and many developers like me go through while learning web-development. Thankyou for going through the whole article.