Welcome to the world of web development! Website development is a laborious process, but a talented developer can easily cope with this task. But every webmaster should try to make a website in his early IT career.
Absolutely any site, no matter how simple or complex it may be, can be divided into two parts: technical and user. The technical part is also called the back-end, that is, what makes the site work, but is not visible to the user. The server side consists of files written in various programming languages. Their common function is to work with user data. They can also be used to generate dynamic site pages.
The simplest example is an online shop web page, where the description, image, and price of the product are displayed from the database. By the way, the back-end also works with the site’s database in other cases. It stores not only products but also various data about users, site settings, and much more.
The essence of the “invisible to the user” technical part is to ensure the operation of the site. The average user does not see this and can only observe the results of the back-end. The second half of the site is called the front-end. It includes absolutely all the elements that we see on the screen when opening the site, that is, what the user directly interacts with.
Its main functions are setting the location of all page elements, specifying their type (heading, paragraph, list), and placing links to link the pages of the site. CSS styles are created to change the style and size of elements and generally make them “beautiful”. They indicate the parameters of each element contained on the page.
The site user sees the text, headers, and other page elements exactly as they are written in the CSS table. Knowledge of HTML and CSS is enough to create a relatively simple front-end, but if you look at modern sites, you will notice a lot of moving elements: smoothly drop-down menus, images in a photo gallery replacing each other, and more.
They need to test it thoroughly and take into account a lot of little things to make the site look as it was intended in any browser on any device. These are just the most basic technologies used in web development. In fact, there are a lot of them, and they are very diverse, which creates additional problems for front-end developers.
They need to test it thoroughly and take into account a lot of little things to make the site look as it was intended in any browser on any device. Conventionally, the process of creating a site (web-project) can be divided into 3 stages: planning, design, and development itself.
When a developer plans a site, he goes through three stages, namely: first, he creates an idea, then develops the structure of the site and works out the layout. When creating an idea for a site, it is very important to determine the topic of the project (site, service). Further, in accordance with the chosen topic, it is necessary to collect the appropriate materials: text, graphic.
When you have decided on the topic of the project and picked up the necessary material, the next step is to develop the project structure. The structure of the project implies the sections of the site, in accordance with which the navigation menu will be formed and the project design will be built.
At this stage, you can classify the material by topic and section. After that, you need to make a layout of the project (schematically). To draw a sketch, you can use paper and pen, Photoshop, Adobe Spark or Dreamweaver, or any other graphics editor (e.g. Adobe Fireworks).
It is important to note that this stage is not a drawing of a finished design layout. It is just a schematic sketch made to understand the information flow between different design elements located on the site. Often, the main elements of the page are the containing block (wrapper, container), logo, navigation, content, footer, free space (in fact, free space is not a design element, but a concept, keeping in mind when drawing up a page layout, our project will not look like a pile of blocks).
Work on design layout starts after the project layout is completed. At this stage, it is worth starting by defining the color scheme of the project. You should choose colors that will make up the visual perception of your project and make the user feel good.
To work with the selected color and drawing up the color palette of your site, you can use the following tools: Color Scheme Designer 3, Adobe Color CC, COLORlovers. Achieving the right contrast between colors is a prerequisite for a good interactive design.
Let’s imagine that you have already completed the first two stages and proceed to the technical part, namely development. What will you work with?
- Call to Action elements. The concept of a call to action refers to the interactive elements of the site: buttons, banners, etc. These elements are designed in such a way that the user should certainly want to click on them. This concept fits well with the AIDA (Attraction Interest Desire Action) principle.
- It should also be noted that when developing a web page, you can use frameworks. Using these libraries can significantly save time during project development (design, layout), although at the same time it can make your site look like others if you use the design elements of the frameworks as they are.
- Before you start writing HTML, CSS, and JS right away, it’s worth talking a little about code editors and project structure. Three of the most popular code editors today can be highlighted: Sublime Text, Atom, Brackets. There are also more advanced IDEs (studios) such as Web Storm, PHP Storm, etc., but a code editor is quite suitable for coding a project, and not an entire studio (IDE).
- It is worth noting that page layout is done during some stages: first, the HTML structure (HTML code) is written, then styles are added, and then, if necessary, scripts (JS) are written, the necessary plugins and libraries are added. Now, when writing HTML code, you can safely use tags and markup elements that appeared along with the HTML5.
It is worth noting that it may be easier to write the structure if you have a prototype drawn up at the first stage, or if we ourselves, looking at the design layout, sketched all the blocks of the page on paper. When writing markup, you can also immediately assign classes and identifiers to elements.
Everything should be in order in your project: from the project structure to class names, markup, and coding. Classes should give an abstract concept of the block to which they belong so that the code is easier to read and then to write styles.
- When the HTML structure of the project is written and the classes are defined, you can move on to writing CSS styles and slicing the layout