Is there a short tree layout guide?

Question

css

If the features of html and css are studied, but there are gaps in the schematic knowledge and such hints are required, for example:
- when to use which type of positioning;
- when to apply the BEM methodology, and when to lay out the layout with simple divs or html5 elements;
- methods of block centering;
- etc.
You need something like this tree structure: https://coggle.it/diagram/Vfk3_SwDy7sQL1wk
The goal is when evaluating the layout, looking at such a "cheat sheet", quickly figure out which elements will be typed in what way, where to apply which technique and then work based on the knowledge gained and with reference books, which are full on the net, the same wc3 or htmlbook.

Answer 1

Your question is from the category "How to start drawing? Left to right or right to left?"
It all depends on the project and each specific case. I understand that you have read a lot and done little. Therefore, practice and think more. For this or that method is justified in this or that case. And there can be no manual where all cases will be described. Since in practice you are not faced with the problem of positioning the element inside the div, but take into account the fact that this div is part of the page where there are still a bunch of elements. There are always many ways and more often than not one of them is correct.

Answer 2

Sorry, but with such questions - you have never studied the features of html and css at all!
htmlbook.ru - for starters, to help.

Answer 3

Based on the question and answers, you really lack practice.
I could come to the form of builders and ask "guys, I need a flowchart of how to build any house. I have already tried to make a couple of huts and even participated in the construction of a house. All the courses that I watched show how to build one particular project of a house, but I need any!!! therefore now I want a step-by-step manual on which I can build any houses from private houses from cylindering to skyscrapers".
for you now the main thing is to fill more bumps and study different types of layout and, most importantly, study their side effects, and there will be no more such questions. and this is practice + reading thousands of separate small manuals on layout features.
"quickly figure out which elements will be typed in which way" - with experience, this cheat sheet will be in your head.
and now you need to study how those elements with which you often have to work are typeset.

Answer 4

You take a ready-made HTML template similar to the required implementation of the project on the latest responsive version of Bootstrap. You change the classes of the blocks until the required structure of the new blocks/pages is reached. CSS preferably editing directly on SASS. After testing for cross-browser compatibility (Chrome basis) of the Desktop version, you move on to the adaptive mobile view.
All the time following the rule - Did I cleanly execute the layout of this element, did I do too much due to lack of knowledge. Don't make extra blocks for decoration, use pseudo-elements and CSS 3.
If you need to create a new page (if you are also responsible for the design), then before layout it is advisable to make its dynamic prototype on Axure, approve this page with programmers, directors, and only then layout. Thus, the maximum will have to modify the finished page 1-2 times, and not 10-20 times. Hence saving time.
The designer must know how elements are laid out on the grid. The layout designer must know the design in order to be sure that the designer has designed a high-quality adaptive design. But the layout designer does not have to immediately become a frontend, that is, learn JS right away.
If there is no clear idea of ​​the design of the element, achieve this, otherwise even a high-quality layout will not be useful for the project and you may have wasted all the development of this element.
The more knowledge and experience a specialist has, the less time he needs to develop an element. However, one should not rush, it is necessary to follow a systematic approach, think over usability in advance and start with a prototype, which is built from the most effectively (functionally) implemented idea.
Tree-like layout guide) I recommend reading more about "templateization", I think you want to know about it.

Answer 5

If you do not know when to use which type of positioning, then

html and css features

not studied, block centering is done differently, you can margin, you can position, carefully read about positioning what is the difference between relative and absolute, when you understand the questions when what will not be used

Answer 6

Read books on OOP, then go back to layout again. Go from light to heavy and back again. You will immediately understand everything in layout, what and how.