8 steps to creating your own website

I did not find good step-by-step templates for action for beginners in website building, so I want to share my experience in creating my own websites from idea to launch.
Minimum requirements: the ability to impose HTML-pages and basic knowledge in any of the web programming languages (PHP / Python / Perl / Ruby).
Recommended: Basic work in graphic editors (Photoshop / Adobe Illustrator), skill of divine HTML layout, proficiency in at least one of the languages for web programming (PHP / Python / Perl / Ruby ...).
Time costs: directly depend on skills and desire. My project took from a couple of hours to a week for me (depending on the detail of the implementation of each item).

Idea

When creating websites for myself, first of all I solved my problems, because I did not find convenient analogues. As a result, the useful information that I myself used was laid out for everyone on my site.
The choice of subjects
You should not create another insurance / FOREX portal just because you want to make money from the context. If the topic is of no interest to you, and even worse, you are a complete layman in the chosen subject and do not want to correct it, at best, you will create another satellite, trying to initially squeeze the maximum profit out of it.
A small example from the life: A few years ago, I began to actively visit bars and restaurants in my city, evaluate the quality of services, recommend to friends where I liked what I didn’t like. As a result, I created a website of recommendations for the youth audience of our city. On the bare enthusiasm, I visited the entertainment and cultural places of the city, the site developed, was replenished with content and brought benefits.
If now you can say what task your website will solve, and you have enough enthusiasm for implementation - you can proceed to domain registration. If you already have some idea how much space you need for your project, you can immediately take hosting. In this case, do not forget to set the "stub" for the site .

Useful articles:

Content

Content is the basis of your site. Whether it is author articles or user articles - the user first of all comes for information, and we should present it in a pleasant form.
At this stage, you need to have an idea what sections will be on your site. For example, if there is a page "About the site" - what will a visitor find on it?
Before I start designing the interface of the site, I select the material that in my opinion will be useful to visitors. Whether it’s an article or a video, I read and view it before we publish, sifting out useless trash.
If you urgently need to publish unread material, I recommend checking for spelling errors (at least with the help of MS Word).
If your site is not a news resource, and you are preparing a place for the news block - think again. It is unpleasant to see on the site the latest news, added a few months ago. If you still decide to allocate space for the news, try posting the latest feed from Twitter. Thus, you will not only get potential subscribers, but also facilitate the functionality of the site.

Useful articles:

Interface

Having picked up interesting materials, it is worth going to your vision of the interface with which the visitor of our site will constantly interact.
At this stage, it will be necessary to determine whether our site will be rubber, or a fixed width. In the future, this will help us to understand what workspace we can count on and what size to use for previewing photos.
Usually I take a pen and a notebook and imagine starting from the start page, how convenient it would be for me to find the necessary information and how to get it.
The main thing is not to go into small details, such as “a shadow in this corner” or “gradient on this button”. For a start, simple diagrams showing the location of the blocks will suffice.

Useful articles:

Design

Ideal would be the option if you have a familiar designer, with whom you agree for a small fee to issue a layout based on your wishes.
If you do not have friends of designers, but there is a desire and time to create your own design - I recommend the article "We use Adobe Illustrator to create a page layout"
When filling in the layout, I never use empty texts like Lorem impsum ... A design filled with real information and relevant pictures is an order of magnitude more pleasant and lively than an impersonal template.
Ideally, you will get a template for the desired screen expansion, with layers for each of the elements. If you can’t create a beautiful template and finances do not allow you to make a design to order, you can peek at pretty templates at templatemonster.com

Layout

You can talk endlessly about the perfect layout, I will write about what I most often come across:
Cross-browser compatibility
Usually I check how our site is displayed in the latest builds of Firefox, Opera, IE, Chrome (if you are targeting only the Russian audience, current statistics on browsers for the RuNet ). Then using multi IE , I check how the site looks in versions up to and including 6 (I eliminate only problems in version 6, because of which it’s impossible to read the site). After starting the project it is convenient to use the service http://browsershots.org/
I recommend using a marvelous layout, we put all styles into a separate css file. At the same time, the main content of the site should be located as close as possible to the beginning of the source code of the page. For example, if your page consists of two columns, one of which is the main content of the page (on the right) and the other is a list of frequently read articles (on the left), use floats or negative indents.
As a result, you should get a static html page + css + jpg / png images - a sample of the real page of your site.

Useful articles:

First version

Closed development environment
When developing a site on a local machine, first of all I worry about the source code leaking into the network ahead of time. Even if your site is accessible only on a local network (for example, at 192.168.1.100 ), close access from the outside. Also, before launching the site, I do not install counters and disable the “tracking” mode in the browser - for example, in Google Chrome .
Having a set of templates and content that we are going to place on the site, it's time to show our talents in web programming in your favorite language.
At this point, you should decide which database you will use, or store everything in files.
For my sites, I always use MySQL, which is more likely already installed on cheap hosting, it is desirable that you have already imagined what tables in the database you will have.
If you already have a chosen CMS or Framework, it’s easy to adapt the html template and start writing the necessary modules. If you make a website from scratch, and you don’t have any previous projects, we’ll make a choice, we will study CMS / Framework or write our bicycle, learning from our mistakes.
You should not prematurely optimize the code (of course, if you have the page code already generated 5+ seconds, you should think about it), better engage in image optimization .
It is important to determine the encoding, currently UTF-8 is becoming a de facto standard , so think before you choose windows-1251, so that later there will be no problems with the transition.

Useful articles:

Launch

Before directly uploading files, I check the site for broken links and close the necessary sections from indexing.
It is necessary to take care of the transfer of files and the structure of the MySQL database to the combat server and do not mess up. Before removing the stub, you must make sure that the loaded configuration works correctly.
Pay attention to the configuration that you use on the combat server. The output of errors and debug information can be costly, especially if the search robot indexes the error first.

Useful articles:

Support

The site works on its own domain, and at your disposal 2 identical versions of the site - on the battle server and on the local machine. This is enough to go to the next logical step.
For myself, I created three tools that create comfortable conditions for synchronization

server scripts (in my PHP case)
statics (javascript, css, images)
tables in the database (in my case, MySQL).

At any time there is an opportunity in one click to update the information on the site / add new features with a preliminary check of the functionality on the local server. Also, before downloading the new version, I advise you to use the tool to check such trivial things as - missing titles and images, broken links and pages with a recursive redirect.
In the future, we will have a lot of website development, ranging from optimizing download speeds, content replenishment, SEO optimization, but this topic goes beyond the scope of the article ...

Useful articles:

UPD: I am sure that most experienced habrowsers do not learn anything new, but beginner webmasters also read habr.

UPD (2): Updated some outdated links to materials.

Source: https://habr.com/ru/post/125561/

All Articles