Layout Path: From Zero to Senior

Hello, my name is Alexander Zelenin and I am a web developer.
Many times I heard the view that layout is the lot of beginner frontenders. Although in fact it is an essential part of any (almost) web project. This is what users see first. At the moment, high-quality layout (especially block design) in a large project requires a large number of different skills.

This article presents a layout layout

[big click]
Of course, this is not a comprehensive and only true scheme. There is still a mountain of related skills, relevant technologies and so on. Gradation is subjective.

I want to add right away that there will be no specific links to educational materials in the article. I will be glad to additions in the comments.

What do we expect?

First of all, it is necessary to understand what we expect from a person at each of the levels. Your expectations may vary.
Junior - knows the basic tags, can tweak content on a ready-made html site, knows how to correctly format text, insert an embedded element (YouTube video, Yandex map) without any problems, conducts work through a version control system only for itself (master, 1 contributor). He can make up something simple from scratch, and it won’t even go (personally with him). In general, it is not an independent unit and requires leadership from above.
Middle- more or less autonomous unit (or completely autonomous for small and medium-sized projects). It can make up a medium-sized site well, and it will correctly display in all current versions of browsers. Understands how template engines work and can use them (provided that the rest of the code is provided). Able to plan and document their work and evaluate the timing. Understands the importance of maintaining code style. Understands why there are grid systems and css frameworks. Able to take all the necessary information from the layouts from the designer. It can interact with a small team, create branches and pull requests.
Senior- can design a block system for a large project. He knows how to avoid repetitions and problematic places when using his code by other developers. Able to decompose complex tasks and correctly formulate tasks. Able to apply at least one development methodology (for example, BEM). Can make the project open as quickly as possible. He understands several popular template engines well. Able to write assemblers and automate the process associated with this. Can conduct code reviews and oversee other typesetters.
We now consider a little more specifically what each of the blocks at each level includes.

Junior

HTML - knowledge of the main tags, attributes. Understanding how to write it in principle.
Typography - the ability to format text. Text is the foundation of almost any project. Insert inextricable spaces where necessary, bold, italics, abbr and so on. You can use a printer or a similar service, but be able to understand the result.
Semantics - understanding that for certain tasks there are certain tags. Be able to select the desired tag.
Media - what types of media can be embedded in a page.
Iframe - embedding third-party widgets (video, audio, cards, etc.).
Audio Video- you can postpone the study, because partially solved using iframe. Understand what formats a browser can play, how to design a player, and so on.
Pictures - what graphic formats and in what form the browser perceives. Pros and cons of the use of certain formats.
Raster - jpg, png, gif. Understand the difference in formats and be able to apply what and where to.
SVG - you can postpone the study, because less commonly used than desired. Understand the pros, cons, limitations, etc.
Fonts - you can postpone the study. This is actually a rather complicated topic, and in general I would advise beginners to use system fonts. To be able to load fonts, optimize display, minimize lag rendering with custom fonts.
Tabular layout - optional. For those who want to make up quality emails in the future.
CSS 1 - fonts, colors, alignment, sizes.
CSS 2.1 - control the behavior of blocks, positioning, full-fledged design.
Selectors - simple selectors per tag, class, nested element. Simple pseudo selectors like: hover.
Naming - how to call classes so that it is not excruciatingly painful.
Block layout - break a picture into conscious blocks, translate blocks into HTML, format with CSS.
Browsers - you can postpone the study. What browsers exist, what is their difference.
Developer Tools- you can postpone the study. Use browser tools to understand display issues.
Text editors - which text editors for developers are there and why. SublimeText and Notepad ++ are given as examples, as well familiar to me. Be able to customize basic things in them, such as indentation, line breaks and so on.
Version control systems - I personally consider the ability to use them at least individually, personally for myself, very important. Understand why these systems are created and what are.
Git - Understand in general terms the purpose and principles of the most popular version control system.
Github / bitbucket - be able to use one of the popular platforms for git.
Checkout / commit / push / pull- basic operations for personal use.
Stash - to temporarily save unnecessary data at the moment.
10 works - do at least 10 works in a different design. You can test, it does not matter. It is important that you have full knowledge of current knowledge.

Middle

CSS 3 - gradations, shadows, smoothing, filters, transformations.
Advanced selectors are elements following the separated (+), determined by the account (nth-child), shadow-dom, before / after and so on.
Animations are optional. transition and animation. Smooth transitions, animations. Understand the limitations and cons.
Grids - why exist, how to build, what ready-made solutions are. For example, you can look at Flexbox grid or any other that you find.
Framework (CSS) - why are needed, how to apply. It is advisable to learn how to use at least one well. Very useful for prototyping. Significantly improves the quality of the project in the absence of a design budget (not unique, but usable).
CSS preprocessors- you can postpone the study. Optimization of work, more beautiful and readable code. Variables, mixins, etc. Work with one or more popular preprocessors such as SASS, LESS, Stylus.
Media queries - you can postpone the study. Display the desired styles depending on the conditions (device, screen size, pixel density, print version, etc.).
Code style - understand why there are style conventions, learn and start using any (I recommend from AirBNB).
DRY / KISS / SOLID - you can postpone the study. Understand the important principles of development, significantly simplifying the further support of the project.
Oocss- optionally. Understand what object-oriented css is and what it is for. In one form or another, it is used in many projects (albeit without understanding that it is he). Ideally, learn how to design. It may be great for large projects.
Documentation - understand what and how to document. Document. You can postpone, but in the future, be sure to study markdown markup.
Planning - learn how to evaluate the timing of the picture and determine the sequence of work.
Decomposition - you can postpone the study. Learn to break the task into subtasks. It's harder than it looks :-)
Setting targets- you can postpone the study. Learning to clearly describe tasks in text so that other developers, including those with less qualifications, clearly understand what needs to be done to complete them.
Flexbox - an understanding of the model, the ability to apply fully.
The layout of letters is optional. In general, the skill is not superfluous. Understand the features of mail systems, maintain a good appearance and do not fall into spam (if it is not spam).
Polyphiles - figure out how to use the most relevant development capabilities while maintaining backward compatibility. Understand the pros and cons of this approach.
Cross-platform layout - to understand what needs to be done so that the project looks good not only under Windows, Linux and Mac, but also under SmartTV or PS.
Cross-browser layout - understand the difference in the rendering of browsers and make them show the same way. The CanIUse site really helps with this.
Mobile layout - you can postpone the study. Understand the limitations of mobile platforms. Use limited space wisely.
Optimization - you can postpone the study. Understand the "price" of certain techniques. Understand the phases of the display of the site to the user.
Download - you can postpone the study. Optimizations related to size, cache, compression, pooling of resources, etc.
Rendering - you can postpone the study. Optimizations related to render speed after loading.
SEO- you can postpone the study. At least a basic understanding of how search engines work. The ability to "help" the search engine to figure out where to look and what is important.
Template engines - figure out how to reuse code, group elements, and arrange pages. It is highly advisable to study both server-side and client-side rendering. This also includes templates in a “pure” language (such as simple PHP inserts). The work “before” (dataflow) of the template engine does not interest us.
PHP - you can postpone the study. Understand the basic syntax and be able to make minor changes related to the design of the page.
CMS - you can postpone the study. Find out what CMS exists and why they were created. Learn to write templates for at least one (I recommend Wordpress).
Javascript- you can postpone the study. Learn the basic syntax, understand how to hang the simplest handlers, and do simple work with the DOM.
jQuery - you can postpone the study. Learn to save a lot of time for solving fairly typical tasks using plugins for the most popular js library (after vanilla.js, of course).
NodeJS - you can postpone the study. Understand how to start a simple server, distribute statics and render on the server side. You can use Express or any other framework.
Assembly - optional. Learn how to assemble a project from a bunch of CSS / HTML files into what you need. I recommend to get acquainted with at least grunt and gulp, as representatives of "different" camps.
IDE- optionally. Learn why IDEs are needed and how to use them. Switch to using any IDE to save time. Important: learning an IDE is comparable to a full-fledged learning of a programming language, and putting a lot of time into this may not be justified. Personally, I use text editors (and only for very large projects include the IDE).
Branching - learn how to manage branches in git.
Merge - learn how to merge branches with conflict resolution.
Fetch / Rebase - figure out why they are, when to use them, and start applying as needed.
Graphic editor- figure out what are, for what. How are vector different from raster. It is important to understand the editor at least at the level of "reading" the layout from the designer. Choose the correct font, size, color, etc. Not to the eye, but for sure. I recommend working with at least 1 raster (Photoshop) and 1 vector (Figma).
50 works - by the end of the stage you have about 50 different works demonstrating skills from the studied areas.

Senior

Although this group seems small in the diagram, in fact it is the largest. Because by this moment it is necessary to study everything that has been postponed.
Adaptive / Responsive layout - to understand the highest level and combine all the knowledge gained before this. The project should look good everywhere and on everything (within reason).
Gradual degradation / Progressive improvement - understand what it is and why. Use.
Gitflow - to be able to explain to other developers how to create branches, where to inject them, how to be able to conduct review code (layouts, of course, not code).
BEM- optionally. Understand the methodology that allows you to create unlimited large projects so that, with minimal synchronization, different teams can use each other's blocks. There are other methodologies that give not the worst result. At this point, you will somehow know about them and will be able to study if you wish.
100 works - to have a total of a hundred works demonstrating various acquired skills. In fact, this is all conditional. You can have one job (consisting of various parts) in the portfolio, which will already show that you are not afraid of anything.

Conclusion

In fact, many of these topics are small. However, keeping a bunch of different factors in mind is very difficult. For 15 years I talked with less than ten coders (and indeed programmers), who would be classified as Senior (coders, there were much more good coders).
Offhand - it is quite possible to spend a year on a full-fledged study and practice of only typesetting from scratch (and more, if you go into the design of components).

I hope that those who are at the beginning of the path, the scheme will tell you where you can still move, and that it is not necessary immediately (or you can not even move into it at all) to run into programming.

I also plan to create a full-fledged free course with a detailed examination of each of the topics-rectangles from the diagram. I will be glad to offer, feedback, suggestions and so on.
The course is likely to be in the format of video tutorials with full text and graphic duplication. If things go well, I will attach in the future links in the comments.

upd
There are many reports that a layout designer without knowledge of the framework is not needed. This is mainly written by developers in large projects. And, for them, this is quite so. But there are many more studios doing landings, various templates for WordPress and other CMS. This is quite a good market and an opportunity to earn. There are quite a few completely small projects, with much smaller requirements, which the layout designer is able to close perfectly.