ParaZz Quotes

So you are thinking of building your first website, but not getting a start. No problem this post will get you through the basic set up for your first web project.

As we know that good workman is known by his Tools...therefore it is essential to have some basic tools to increase your productivity. In field of web development tools are basically a text editor, well we have notepad, text edit like inbuilt tools in our pc and mac. But they are not so flexible and extensible in terms of experience and looks too. So to write a beautiful code I would recommend the following text editors:

1.    Atom (1st favourite):

Launched in 2008, GitHub has become the code storage and development site of choice worldwide, and so any tool it releases is going to cause a big stir. That's certainly been the case with Atom. Dubbed "a hackable text editor for the 21st Century", it's designed to be simple to use out of the box, but also easily expandable using hundreds of packages. Since launching in invite-only private beta early last year, it's now fully open source and available to download for free.

 

Atom has got many features and best in its class.

Link:  https://atom.io

2.    Brackets (2nd favourite) 

Adobe's open-source text editor is created from the code that builds the web, and the developers note that if you can code in Brackets, then you can code on Brackets. In other words, although you initially get a simple, usable editor, seasoned programmers should be able to hack it to their liking.

Link: www.brackets.io

3.    Sublime Text (Not my favourite but ok for a beginner)

4.    Many more search internet (you can use Visual Studio Also)

ParaZzDevTips: After you have downloaded the text editors, just go through their themes and configuration set up according to your likes. (like font-size, extendibility, readability etc. And make it ergonomic to your brain. (because if you will be comfortable with what you doing then only you will get good ideas)

Also make sure that you have modern web browser installed on your pc (Mozilla and chrome you should have both for web page testing).

ParaZzDevTips: It should be great if you learn basics of development tools that is equipped with browser… to enhance error-testing and your productivity.

When you are done with basic environment setup, next task is to set up files architecture.  Means what type of structure your website should have.

I would recommend using following directory structure:

The most common things we'll have on any website project we create are an index HTML file and folders to contain images, style files, and script files. Let's create these now:

1. index.html: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file called index.html and save it just inside your test-site folder.

2.     images folder: This folder will contain all the images that you use on your site. Create a folder called images, inside your site folder.

3.  styles folder: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called styles, inside site folder.

4.   scripts folder: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a folder called scripts, inside your test-site folder.

In my next part I will discuss about the html, CSS, JS basics=> required for quick web setup.