Interface development school: analysis of tasks for Minsk and a new set in Moscow

    Today a new set has opened in the Yandex School of Interface Development in Moscow. From September 7 to October 25, the first stage of training will take place. Students from other cities will be able to participate in it remotely or in person - the company will pay for the road and accommodation in the hostel. Second, it’s the final stage will last until December 3, it can only be completed in person.

    My name is Julia Seredich, we wrote this post together with Sergey Kazakov. We are both interface developers in the Minsk office of Yandex and graduates of SRI of past years. On the occasion of the opening of registration in Moscow, we publish an analysis of the entrance tasks to the previous School - here in Minsk. If we trace the history of SRI tasks, then from year to year we tested three important skills for a programmer:

    • Layout. Every developer should be able to typeset. It doesn’t happen that you have Uncle Seryozha who typeset for the whole team, and you only write scripts. Therefore, each student must show how he knows how to typeset.
    • Javascript If the matter was limited to typesetting, then we would not have an interface development school, but a layout school. The beautiful folded-up interface needs to be revived. Therefore, there is always a task on JS, but sometimes it is also a task on algorithms - we love them so much.
    • Problem solving is perhaps the main skill of the developer. Everything is changing very quickly in creating interfaces. It’s like Lewis Carroll’s: “You have to run as fast just to stay in the same place, but to get to another place you need to run twice as fast.” Every day we are faced with new technologies - it is necessary to reckon with them and be able to understand them. Therefore, in the third task, we proposed to understand technologies with which a novice developer is usually not familiar.

    In the analysis of each task, we will tell not only about the correct procedure, but also about common mistakes.

    Task 1: Portfolio

    The first task was worked by the designer of Yandex.Collections Alexei Cherenkevich, who knows how to typeset, and his colleague in the service, interface designer Sergey Samsonov.


    Create a portfolio site: tell us about yourself, your work and expectations from the School. The site should match the proposed layout as much as possible (links to layouts: 1000px , 600px , 320px , specification ). We are only interested in layout, so please do not use JavaScript.

    When checking, we will take into account:

    • padding sizes, color accuracy, font style, size of the size;
    • semantic layout;
    • the presence of various states of elements: display of buttons and links when you hover, highlight active input fields, etc .;
    • cross-browser compatibility (checked in the latest versions of popular browsers).

    The plus will be:

    • use of modern CSS-solutions: flexbox, grid, etc .;
    • Adaptive layout;
    • use of pre- and (or) postprocessors, assembly, minification, optimization of the output code;
    • HTML form validation, stylized file upload button.

    The task is quite voluminous, so you can skip what will not work. This will slightly lower the score, but you can still demonstrate your knowledge. Upon completion, send us two links - to the portfolio and source code on GitHub.

    The layouts proposed in the assignment were not just with screens for mobile devices, tablets and desktops, but also with a true specification.

    To add as much objectivity as possible to the result of the test of the first task, there were a lot of criteria for this test.


    Completed site . This seems obvious, but some guys missed some blocks entirely - either they wanted to save time, or they could not make them. The layout can be conditionally divided into four main screens: the main screen with an avatar, a block with a list of expectations from SRI, a block with a portfolio and a block with contact information. They could be made in sections or simply using a div, the main thing is that all four blocks are available.

    Matching layout layout . The designer made a separate specification (including colors, typography, button states, etc.) to make it easier for candidates. Below was a tip on the indentation and features of the first screen. Very pleased with the guys who took into account all the wishes of the designer: for example, the first screen should have turned out not less than the height of the viewport.

    Adaptive layout - this is when the interface is not just made up so that at three resolutions everything was pixel by pixel according to the layout. In intermediate states, layout also should not fall apart. Someone forgot to limit the maximum width of the container and pulled everything to 1920 pixels, someone messed up with the backgrounds, but overall the candidates did this job well.

    Semantic layout . “How many times have told the world” that the link should be framed as , the button - as

    Also popular now: