Yandex reopens the set in the Interface Development School. Examples of lectures and homework from the previous set
We invite university students and novice specialists to the Yandex Interface Development School . Education is free, and this time it will be open at once in three cities: Moscow, St. Petersburg and Simferopol. Reception of applications is closed in August.
Who is the interface developer? This is the one who develops HTML, CSS, JavaScript and is responsible for implementing user interaction. In our School, we focus on practice, because we believe that a quality result can be achieved only through experience, and the theory is now easily accessible to all. For example, today we will share with Habr's readers all the records of our lectures from the previous set of the School.
With the advent and widespread adoption of Flexbox Layout and CSS Grid Layout standards, responsive design is no longer time consuming. Now you can implement it quickly, easily and without the involvement of third-party libraries. We will look at practical examples of adaptive layout using basic and advanced tools (relative measurement values, non-fixed dimensions, media queries, srcset, tag, and others).
')
We will talk about the features of the interface on devices with touch input. Consider the current standards for processing custom events Pointer Events and Touch Events, as well as new features that the Pointer Lock API and Force Touch API offer us.
When the development team grows, there are a lot of points of contact. Poor organization of teamwork leads to desynchronization of actions and ultimately to delaying the deadlines and problems with the addition of new functions. Therefore, it is important to learn not only languages ​​and technologies, but also tools to organize work. I will talk about the basics and features of Git, as well as how different teams use it with it.
I will talk about creating graphic effects and animations on the web using CSS, JS, SVG, Canvas and WebGL. We define what is more effective to use in different situations. Let's get acquainted with the Web Audio API for working with sound on the web. Consider the browser API for speech synthesis and recognition, as well as the ability to use this functionality using SpeechKit technology.
Let's talk about how to use video in a web browser (to display videos and design needs), current video formats and features of the HTML5 Video API. Also consider the scheme of adaptive streaming video streaming and how to protect content.
All lecture notes can be found on YouTube .
1. It is necessary to implement an adaptive design of the ribbon of Yandex.Den articles. A basic ribbon design for a 1024px wide screen with a 704px column width is provided. Changes in the size and layout of cards on other screen sizes must be devised and implemented independently.
2. It is necessary to implement custom gestures within the framework of the game “Dungeon of Doom”. The passage of the game consists of a consistent opening of the door and at the end of the opening of the chest. Each door is a mini-puzzle for which the player must make a gesture. Gestures can be both for one pointer, and for several.
3. Find problems with the speed of loading the site and suggest ways to solve them.
4. It is necessary to type the extend function using two TypeScript and Flow tools. The task is to write the most reliable (type safety) code.
5. You are invited to implement one of the most popular frontend architectural approaches in the world - Flux - in the format of a simple framework. Your framework should be able to handle user actions and provide an API to communicate with the backend.
1. Application form for joining the School
2. Records of all lectures of the previous set
3. Video with alumni reviews
Who is the interface developer? This is the one who develops HTML, CSS, JavaScript and is responsible for implementing user interaction. In our School, we focus on practice, because we believe that a quality result can be achieved only through experience, and the theory is now easily accessible to all. For example, today we will share with Habr's readers all the records of our lectures from the previous set of the School.
“Adaptive layout (updated version)” - Dmitry Dushkin
With the advent and widespread adoption of Flexbox Layout and CSS Grid Layout standards, responsive design is no longer time consuming. Now you can implement it quickly, easily and without the involvement of third-party libraries. We will look at practical examples of adaptive layout using basic and advanced tools (relative measurement values, non-fixed dimensions, media queries, srcset, tag, and others).
')
"Working with touch user input" - Vladimir Rybakov
We will talk about the features of the interface on devices with touch input. Consider the current standards for processing custom events Pointer Events and Touch Events, as well as new features that the Pointer Lock API and Force Touch API offer us.
“Git is a collaboration tool, from scratch to the rules of the team” - Sergey Sergeev
When the development team grows, there are a lot of points of contact. Poor organization of teamwork leads to desynchronization of actions and ultimately to delaying the deadlines and problems with the addition of new functions. Therefore, it is important to learn not only languages ​​and technologies, but also tools to organize work. I will talk about the basics and features of Git, as well as how different teams use it with it.
“Graphic effects. Work with audio, speech synthesis and recognition "- Alexander Zavyalov
I will talk about creating graphic effects and animations on the web using CSS, JS, SVG, Canvas and WebGL. We define what is more effective to use in different situations. Let's get acquainted with the Web Audio API for working with sound on the web. Consider the browser API for speech synthesis and recognition, as well as the ability to use this functionality using SpeechKit technology.
“Video on the Web” - Alexey Gusev
Let's talk about how to use video in a web browser (to display videos and design needs), current video formats and features of the HTML5 Video API. Also consider the scheme of adaptive streaming video streaming and how to protect content.
All lecture notes can be found on YouTube .
Homework examples
1. It is necessary to implement an adaptive design of the ribbon of Yandex.Den articles. A basic ribbon design for a 1024px wide screen with a 704px column width is provided. Changes in the size and layout of cards on other screen sizes must be devised and implemented independently.
2. It is necessary to implement custom gestures within the framework of the game “Dungeon of Doom”. The passage of the game consists of a consistent opening of the door and at the end of the opening of the chest. Each door is a mini-puzzle for which the player must make a gesture. Gestures can be both for one pointer, and for several.
3. Find problems with the speed of loading the site and suggest ways to solve them.
4. It is necessary to type the extend function using two TypeScript and Flow tools. The task is to write the most reliable (type safety) code.
5. You are invited to implement one of the most popular frontend architectural approaches in the world - Flux - in the format of a simple framework. Your framework should be able to handle user actions and provide an API to communicate with the backend.
useful links
1. Application form for joining the School
2. Records of all lectures of the previous set
3. Video with alumni reviews
Source: https://habr.com/ru/post/419045/
All Articles