- Back to Home »
- Quick startup guide for your first website Part-1
Posted by : Paras Sharma Saturday, 28 May 2016
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.
Setting Up tools:
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.
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 Brackets, then you can code Brackets. In other words, although you initially get a simple, usable editor, seasoned programmers should be able to hack it to their liking.
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)
Grab up the browsers:
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.
Setting Up Directory Architecture:
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.
|This Basic Files Architecture should be followed for basic website|
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.
In my next part I will discuss about the html, CSS, JS basics=> required for quick web setup.