Hello friends and welcome again @MohitRanpura.com

I am sure that you all are enjoying all articles here. And I am sure now you have complete knowledge related to Front-End Developing. In previous article I had explained HTML5 Enhancements & Why HTML5 is far better than HTML4.0. There are Part one & Part two – two articles for HTML5 Enhancements.

Today, I am going to give you some important ideas which you have to keep in mind before starting front-end development. It’s really interesting, many developers are starting designing and developing front end without preparation. But it’s really needful to save time and improve performance of website.

Pillars of Front-end Development

As we all know, base is most important for development and we have to maintain that perfectly. Based on that we will get great performance. For Front-End, there are some pillars which could help us for better performance.  There are three main pillars which we have to follow for better and great performance.

• Separation of Layout, Content, and Flow.
• Markup should be well-formed, semantically correct and generally valid.
• JavaScript / jQuery should progressively enhance the experience.

Separation of layout, content, flow: if mockup (PSD file or Image) is ready for web page than this is first step for front-end developer. First of all we have to separate everything from that layout for web page.

After complete separation, we have to collect content for respective section / article. If contents are not available then we have to visualize that part and we can use “Lorem Ipsum” for dummy contents.

Now, after separation of layout and collecting contents, main part – understand flow. This one is very important because our whole project / website based on flow. We have to understand flow for website kind of where we are redirecting or where everything will be come.

Markup should be well-formed, semantically correct and generally valid: now, it’s time for coding / markup. We have to keep in mind this thing when we are working on coding. Html markup which we are creating that should be well-formed by coding standards. For that we have to talk with back-end developer – how they will work on that. For example if there are any type of form than what will become as button – <input type=”submit” /> or <button type=”submit”/>? We have to confirm this kind of things with developer so it could save our future time.

Also, coding should be semantically correct for future because if we make it correct then we can modify it easily or any other front-end developer can understand that and change it easily. Code which we are writing, it should be generally valid. It will help us to load contents or section easily and performance of web page will be best.

JavaScript / jQuery should progressively enhance the experience: Scripting, which we are implementing in code – it should be enhanced. If we are going use to minimum scripts for web pages than it will help us to improve performance for front end. But if we need scripts for animation then we have to use it. Also we can implement less code and if we are going to write that code from our end then I am sure that code of script will be less than third party’s scripts. So my suggestion is use scripts but less than others and if possible than write scripts by self. It could help you if you want to change it.

Intention / reason to develop

Everything which you want to do on this world, is based on only WWH. I mean to say is WHAT, WHY, HOW.

This three are only important factors to complete any task on this world.

We are talking here about development, so 95% developers are only do focus on HOW. But there are most priority of WHAT and WHY rather than HOW.

We are clear here what we have to do. But after that we are directly focus on HOW. How we will do that? But before that we have to focus on WHY, A reason to develop.

Other important point is reason to develop. Many developers across me, they are directly starting work on coding / markup part, they are never going to understand reason to develop before making it. It’s easy to make code directly but when changes are coming on those web pages than it makes hard for performance.

I am also developer and I know whenever changes are coming, I am implementing that changes and writing new code for that new requirements. If I am making new structure than I have to write new CSS code for that and I am never going to delete that code, so it could be effect on performance of web page.

So that’s why it’s really important to understand reason to develop, based on that we can fix out requirements and we can make better code and performance will be good and flexible.

So, we have to understand intention and reason to develop and we have to understand that why we are coding? And why we are making this.

Requirement of Project / Website

Now, as explained in previous point it’s really important to understand requirement first. We know, there are many types of website and it depends on requirement. We can design layout and we can code based on type of website. First of all we have to gather requirements for project or website.

There is more type of website as we know: e-commerce portal, landing pages, marketing only, informative website, and service website.

After deciding type of website now it’s time to fix flow for that website and if we are success to define flow than congratulations – we are ready to start developing. Requirements of project or website help us to make perfect flow for that and based on perfect flow we can make nice coding for that project.
So, that is importance to gather and understand requirements first before starting development.

This is just beginning to start front end development. In next article I will explain you general guidelines, HTML markup strategy, CSS box model and more many things which could help you for Front-End Development.

Happy Learning.