{"id":1431,"date":"2020-09-03T11:16:47","date_gmt":"2020-09-03T11:16:47","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1431"},"modified":"2020-09-03T11:16:47","modified_gmt":"2020-09-03T11:16:47","slug":"frontend-%d1%81%d0%bf%d1%80%d0%b8%d0%bd%d1%82-100-%d0%b1%d1%8b%d1%81%d1%82%d1%80%d1%8b%d1%85-%d1%81%d0%be%d0%b2%d0%b5%d1%82%d0%be%d0%b2-%d0%bf%d0%be-html-css-%d0%b8-javascript","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1431","title":{"rendered":"Frontend-\u0441\u043f\u0440\u0438\u043d\u0442: 100 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043f\u043e HTML, CSS \u0438 JavaScript"},"content":{"rendered":"\n<p>100 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043f\u0440\u0438\u0435\u043c\u043e\u0432, \u043b\u0443\u0447\u0448\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043f\u043e HTML, CSS \u0438 JavaScript \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0449\u0438\u0445 frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2>\u0421\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c<\/h2>\n\n\n\n<p>1. \u0421\u0430\u043c\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 HTML-\u0442\u0435\u0433\u0438 \u2013&nbsp;<code>div<\/code>&nbsp;\u0438&nbsp;<code>span<\/code>. \u042d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0431\u0435\u0437 \u0432\u0441\u044f\u043a\u043e\u0433\u043e \u0441\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430.<\/p>\n\n\n\n<p>2.&nbsp;\u0420\u0430\u043d\u044c\u0448\u0435 \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0434\u043b\u044f \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u0438 \u0432\u0441\u044f, \u043d\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 HTML5 \u043f\u0440\u0438\u043d\u0435\u0441 \u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0442\u0435\u0433\u043e\u0432.<\/p>\n\n\n\n<p>3.&nbsp;\u0421\u0435\u0439\u0447\u0430\u0441 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u043a\u043e\u043b\u043e 110 \u0442\u0435\u0433\u043e\u0432 \u043d\u0430 \u0432\u044b\u0431\u043e\u0440. \u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439, \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0430.<\/p>\n\n\n\n<h3>\u0422\u0435\u043a\u0441\u0442<\/h3>\n\n\n\n<p>4.&nbsp;\u0412\u044b\u0431\u0438\u0440\u0430\u044f \u0441\u043f\u043e\u0441\u043e\u0431 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430, \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435, \u043a\u0430\u043a\u043e\u0439 \u0441\u043c\u044b\u0441\u043b \u0432\u044b \u0432 \u043d\u0435\u0433\u043e \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0435.<\/p>\n\n\n\n<p>5.&nbsp;\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u0433\u0438&nbsp;<code>b<\/code>&nbsp;\u0438&nbsp;<code>strong<\/code>&nbsp;\u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e (\u0436\u0438\u0440\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442), \u043d\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043d\u0435 \u043d\u0435\u0441\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u0435\u0442 \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>6.&nbsp;\u0422\u0430\u043a\u0430\u044f \u0436\u0435 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0441&nbsp;<code>i<\/code>&nbsp;\u0438&nbsp;<code>em<\/code>. \u0418 \u0442\u0430\u043c, \u0438 \u0442\u0430\u043c \u043a\u0443\u0440\u0441\u0438\u0432, \u043d\u043e&nbsp;<code>em<\/code>&nbsp;(emphasis) \u0434\u0435\u043b\u0430\u0435\u0442 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0430\u043a\u0446\u0435\u043d\u0442 \u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u0435, \u0430&nbsp;<code>i<\/code>&nbsp;\u2013 \u043d\u0435\u0442.<\/p>\n\n\n\n<p>7.&nbsp;\u0414\u043b\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435&nbsp;<code>h1<\/code>&#8211;<code>h6<\/code>.<\/p>\n\n\n\n<p>8.&nbsp;\u0415\u0441\u043b\u0438 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u0438, \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439&nbsp;<code>span<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0438.<\/p>\n\n\n\n<h3>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430<\/h3>\n\n\n\n<p>9.&nbsp;\u0421\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043d\u043e\u0432\u044b\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u0435\u0433\u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0435 \u0438 \u043f\u043e\u0434\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n\n\n\n<p>10.&nbsp;\u0414\u043b\u044f \u0432\u0435\u0440\u0445\u043d\u0438\u0445 \u0438 \u043d\u0438\u0436\u043d\u0438\u0445 \u043a\u043e\u043b\u043e\u043d\u0442\u0438\u0442\u0443\u043b\u043e\u0432 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0442\u0435\u0433\u0438&nbsp;<code>header<\/code>&nbsp;\u0438&nbsp;<code>footer<\/code>. \u041d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0433\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0434\u0432\u0430\u043b \u0441\u0430\u0439\u0442\u0430 \u0441 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u043f\u043e\u0434\u0432\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e\u0431 \u0430\u0432\u0442\u043e\u0440\u0435.<\/p>\n\n\n\n<p>11.&nbsp;\u0410 \u0432\u043e\u0442&nbsp;<code>main<\/code>&nbsp;\u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u2013 \u0432 \u043d\u0435\u0433\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f, \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041e\u0431\u044b\u0447\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body>\n  &lt;header>&lt;header>\n  &lt;main>&lt;\/main>\n  &lt;footer>&lt;\/footer>\n&lt;\/body><\/code><\/pre>\n\n\n\n<p>12.&nbsp;\u0414\u043b\u044f \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0442\u0435\u0433\u0438&nbsp;<code>article<\/code>&nbsp;\u0438 section. \u041b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u043f\u043e\u043c\u043e\u0436\u0435\u0442&nbsp;<a href=\"http:\/\/front-end.su\/2015\/11\/01\/div-or-section-or-article\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f<\/a>.<\/p>\n\n\n\n<p>13.&nbsp;\u0412 \u0434\u0432\u0443\u0445 \u0441\u043b\u043e\u0432\u0430\u0445&nbsp;<code>article<\/code>&nbsp;\u2013 \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u0440\u043e\u0434\u0435 \u0441\u0442\u0430\u0442\u044c\u0438, \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0438\u043b\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043a\u0443\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u044f\u0445.<\/p>\n\n\n\n<p>14.&nbsp;\u0410&nbsp;<code>section<\/code>&nbsp;\u2013 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0441 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c.<\/p>\n\n\n\n<p>15.&nbsp;\u0412\u043d\u0443\u0442\u0440\u0438&nbsp;<code>article<\/code>&nbsp;\u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0431\u043b\u043e\u043a&nbsp;<code>address<\/code>&nbsp;\u0441 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439.<\/p>\n\n\n\n<p>16.&nbsp;\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0442\u0435\u0433\u0430&nbsp;<code>nav<\/code>.<\/p>\n\n\n\n<p>17.&nbsp;\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0442\u0435\u0433 \u2013&nbsp;<code>noscript<\/code>. \u0415\u0433\u043e \u0440\u043e\u043b\u044c \u2013 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0432\u044f\u0437\u044c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c JavaScript.<\/p>\n\n\n\n<p>18.&nbsp;\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438&nbsp;<a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/HTML\/Element\" target=\"_blank\" rel=\"noreferrer noopener\">\u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n\n\n\n<p>19.&nbsp;\u041c\u043d\u043e\u0433\u0438\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0432\u0430\u0448\u0435\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u041d\u0435 \u0431\u043e\u0439\u0442\u0435\u0441\u044c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445 \u0432 \u0432\u0430\u0448\u0435\u043c CSS.<\/p>\n\n\n\n<p>20.&nbsp;\u0423\u0447\u0438\u0442\u044b\u0432\u0430\u0439\u0442\u0435 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0435\u0433\u0430 \u0435\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b. \u0423\u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0438\u043c\u0435\u043d\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0432 MDN-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n\n\n\n<p>21.&nbsp;\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u043d\u044c\u0448\u0435 \u0432\u043d\u0443\u0442\u0440\u044c \u0442\u0435\u0433\u0430&nbsp;<code>a<\/code>&nbsp;\u043d\u0435\u043b\u044c\u0437\u044f \u0431\u044b\u043b\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0431\u043b\u043e\u0447\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438. \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0438 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0440\u0445 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f.<\/p>\n\n\n\n<p>22.&nbsp;\u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0435 \u0442\u0435\u0433&nbsp;<code>a<\/code>&nbsp;\u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u0440\u043e\u043c\u0435 \u0441\u0441\u044b\u043b\u043e\u043a, \u0438 \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e.<\/p>\n\n\n\n<h3>ARIA-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/h3>\n\n\n\n<p>23.&nbsp;\u0423\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e&nbsp;<a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/Accessibility\/ARIA\" target=\"_blank\" rel=\"noreferrer noopener\">\u043d\u0430\u0431\u043e\u0440\u0430 ARIA-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432<\/a>.<\/p>\n\n\n\n<p>24.&nbsp;\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<code>role<\/code>&nbsp;\u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c&nbsp;<code>dialog<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div role=\"dialog\"><\/code><\/pre>\n\n\n\n<p>25.&nbsp;\u041e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0448\u0430\u043f\u043a\u0443 \u0438 \u043f\u043e\u0434\u0432\u0430\u043b \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;header role=\"banner\">\n&lt;footer role=\"contentinfo\"><\/code><\/pre>\n\n\n\n<p>26.&nbsp;\u0415\u0441\u043b\u0438 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0435\u0442 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u0438, \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430&nbsp;<a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/Accessibility\/ARIA\/ARIA_Techniques\/Using_the_aria-label_attribute\" target=\"_blank\" rel=\"noreferrer noopener\">aria-label<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg aria-label=\"Facebook\"><\/code><\/pre>\n\n\n\n<p>27.&nbsp;\u0422\u0430\u043a\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u0440\u044b\u0442\u044c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043a\u043e\u043d\u043a\u0438, \u043e\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg aria-hidden=\"true\"><\/code><\/pre>\n\n\n\n<p>28.&nbsp;ARIA-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 CSS, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u0440\u043e\u0434\u0435&nbsp;<a href=\"https:\/\/codesandbox.io\/s\/j2xvnl5ymv?module=%2Fsrc%2Fslider.scss\" target=\"_blank\" rel=\"noreferrer noopener\">\u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430<\/a>.<\/p>\n\n\n\n<p>29.&nbsp;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0435 \u043f\u043e\u0434\u0434\u0430\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0441\u043a\u0443\u0448\u0435\u043d\u0438\u044e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0441\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/p>\n\n\n\n<p>30.&nbsp;WAI-ARIA \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u0435\u0442 \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u0432 HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043c\u044b\u0441\u043b\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n\n\n\n<p>31.&nbsp;\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u0437\u043d\u0430\u043d\u043d\u044b\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0430\u0445 \u043e\u043d\u0430 \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0437\u0430\u043a\u043e\u043d\u043e\u0434\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u043e\u0441\u0442\u0430\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043e\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430, \u0438\u0437\u0443\u0447\u0438\u0442\u0435&nbsp;<a href=\"https:\/\/www.w3.org\/WAI\/EO\/Drafts\/ARIA\/faq\" target=\"_blank\" rel=\"noreferrer noopener\">\u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432<\/a>.<\/p>\n\n\n\n<h2>CSS<\/h2>\n\n\n\n<p>32.&nbsp;\u041c\u043d\u043e\u0433\u0438\u0435 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u0442\u0438\u043b\u0438, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,&nbsp;<code>display: block<\/code>&nbsp;\u0443&nbsp;<code>div<\/code>&nbsp;\u0438\u043b\u0438&nbsp;<code>display: inline<\/code>&nbsp;\u0443&nbsp;<code>span<\/code>. \u041d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u0432\u0430\u0448\u0435\u043c CSS-\u043a\u043e\u0434\u0435.<\/p>\n\n\n\n<p>33.&nbsp;\u041f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u0441\u044c CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f &#8220;\u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0447\u0438\u0441\u0435\u043b&#8221; \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0430\u0448 \u043a\u043e\u0434 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435 \u0438 \u043f\u0440\u043e\u0449\u0435 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043d\u0438\u044f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$space-xxs : .4rem;\n$space-xs : .8rem;\n$space-sm : 1.6 rem;\n$space : 2.4 rem;\n$space-md : 3.2 rem;\n$space-lg : 4.8 rem;<\/code><\/pre>\n\n\n\n<p>34.&nbsp;\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f&nbsp;<code>z-index<\/code>, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0438\u043d\u0430\u0447\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0437\u0434\u043e\u0440\u043e\u0432\u043e \u0437\u0430\u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$zindex-default : 1;\n$zindex-footer : 10;\n$zindex-header : 30;\n$zindex-overlay : 40;<\/code><\/pre>\n\n\n\n<h3>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/h3>\n\n\n\n<p>35.&nbsp;CSS \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u0435\u0442\u0441\u044f \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u043c\u044b\u0441\u043b\u043e\u0432\u044b\u043c\u0438 HTML-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u043d\u0430\u0447\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n\n\n\n<p>36.&nbsp;\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0430 (\u0430\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<code>lang<\/code>&nbsp;\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043b\u044e\u0431\u044b\u043c \u0442\u0435\u0433\u043e\u043c, \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441&nbsp;<code>html<\/code>).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.description&#91;lang=\"en\"] { color: red };\n.description&#91;lang=\"ru-ru\"] { color: blue };<\/code><\/pre>\n\n\n\n<p>37.&nbsp;\u0418\u043b\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;disabled] { cursor: not-allowed; }<\/code><\/pre>\n\n\n\n<p>38.&nbsp;\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435, \u0447\u0442\u043e \u043a\u043b\u0430\u0441\u0441 \u2013 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;class=\"active\"]<\/code><\/pre>\n\n\n\n<p>39.&nbsp;CSS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b (\u0438\u043b\u0438 \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b), \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>span&#91;class*=\"icon-\"]<\/code><\/pre>\n\n\n\n<p>40.&nbsp;\u0418\u043b\u0438 \u0434\u0430\u0436\u0435 \u043e\u0434\u043d\u0443 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0439, \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>span&#91;class~=\"icon arrow-right\"]<\/code><\/pre>\n\n\n\n<p>41.&nbsp;\u041c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043a\u043e\u043d\u043a\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>span&#91;class^=\"icon\"]<\/code><\/pre>\n\n\n\n<p>42.&nbsp;\u0418\u043b\u0438 &nbsp;\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;href^=\"https:\/\/\"]<\/code><\/pre>\n\n\n\n<p>43.&nbsp;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f ARIA-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438 CSS \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043f\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0449\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,&nbsp;<a href=\"https:\/\/www.felipefialho.com\/css-components\/#component-tooltip\" target=\"_blank\" rel=\"noreferrer noopener\">\u0432\u043e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/media.proglib.io\/wp-uploads\/2019\/01\/Screenshot_1.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3>\u041f\u0441\u0435\u0432\u0434\u043e\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b<\/h3>\n\n\n\n<p>44.&nbsp;\u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b CSS \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442&nbsp;<a href=\"http:\/\/css-live.ru\/articles-css\/impossible-pseudos.html\" target=\"_blank\" rel=\"noreferrer noopener\">\u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/a>&nbsp;\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>45.&nbsp;\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u044c \u043f\u0443\u0441\u0442\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div:empty { display: none; }<\/code><\/pre>\n\n\n\n<p>46.&nbsp;\u041e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u0431\u0440\u043e\u0441\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0443 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0433\u0440\u0443\u043f\u043f\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u043c\u043e\u043a \u0438\u043b\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432. \u0420\u0430\u043d\u044c\u0448\u0435 \u0442\u0430\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;li class=\"last\">&lt;\/li>\n\n&lt;style>\n  li { border: solid black 1px; }\n  .last { border: 0; }\n&lt;\/style><\/code><\/pre>\n\n\n\n<p>47.&nbsp;\u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0442 \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:last-child { \u00a0border: 0; }<\/code><\/pre>\n\n\n\n<p>48.&nbsp;\u0410 \u0435\u0441\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0435\u0449\u0435 \u043b\u0443\u0447\u0448\u0435!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>li:not(:last-child} { border: solid black 1px; }<\/code><\/pre>\n\n\n\n<p>49.&nbsp;\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430&nbsp;<code>:not<\/code>&nbsp;\u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438&nbsp;<a href=\"https:\/\/paulradzkov.com\/2014\/negation_css_selector\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n\n\n\n<p>50.&nbsp;\u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b \u0440\u0435\u0448\u0430\u044e\u0442 \u0438 \u0431\u043e\u043b\u0435\u0435 \u043d\u0435\u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438. \u041e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437\u044f\u0449\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043d\u043e \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.btn:last-child:not(:first-child)<\/code><\/pre>\n\n\n\n<p>51.&nbsp;\u041f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b&nbsp;<code>:before<\/code>&nbsp;\u0438&nbsp;<code>:after<\/code>&nbsp;\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0446\u0435\u043b\u044b\u0445 \u0442\u0440\u0438: \u043e\u0434\u0438\u043d \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0431\u043b\u043e\u043a \u0438 \u0434\u0432\u0430 \u0435\u0433\u043e \u043f\u0441\u0435\u0432\u0434\u043e\u043f\u043e\u0442\u043e\u043c\u043a\u0430. \u042d\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043c\u043e\u0440\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n\n\n\n<p>52.&nbsp;\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435, \u0447\u0442\u043e \u044d\u0442\u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0431\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430&nbsp;<code>content<\/code>, \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u0443\u0441\u0442\u043e\u0433\u043e.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:before { content: \"\u0423\u0436\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u043e\u0441\u044c?\"; }\n:after { content: \"\u0415\u0449\u0435 \u043d\u0435\u0442\"; }\n:after { content: ''; }<\/code><\/pre>\n\n\n\n<p>53.&nbsp;\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043b\u044e\u0431\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435&nbsp;<code>:before<\/code>&nbsp;\u0438&nbsp;<code>:after<\/code>&nbsp;\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u043b\u044f \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0438\u0445 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445.<\/p>\n\n\n\n<p>54.&nbsp;\u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d \u0431\u043b\u043e\u043a\u0430, \u0447\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u043c\u0435\u0434\u0438\u0430\u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438:https:\/\/codepen.io\/LFeh\/embed\/MBdrer?height=265&amp;theme-id=0&amp;default-tab=result&amp;user=LFeh&amp;slug-hash=MBdrer&amp;pen-title=Audio%20Element&amp;name=cp_embed_1<\/p>\n\n\n\n<h3>\u041a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432<\/h3>\n\n\n\n<p>55.&nbsp;\u0412 CSS \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0431\u0438\u0440\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u0445 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0435\u0434\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.btn.active + .btn { margin-left: 20px; }<\/code><\/pre>\n\n\n\n<p>56.&nbsp;\u0418\u043b\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.btn.active ~ .btn { margin-top: 20px; }<\/code><\/pre>\n\n\n\n<p>57.&nbsp;\u0421\u043c\u0435\u043b\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u0439\u0442\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>input&#91;type=\"checkbox\"]:checked ~ p { color: red; }<\/code><\/pre>\n\n\n\n<p>58.&nbsp;\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0441\u0443\u043c\u0430\u0441\u0448\u0435\u0434\u0448\u0438\u0435 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u044d\u0442\u0430 \u0432\u044b\u0431\u0435\u0440\u0435\u0442 \u0432\u0441\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c&nbsp;<code>.title<\/code>&nbsp;(\u043a\u0440\u043e\u043c\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f), \u043b\u0435\u0436\u0430\u0449\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430&nbsp;<code>.main<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0431\u043b\u043e\u043a\u0430&nbsp;<code>.header<\/code>, \u043d\u0435 \u0438\u043c\u0435\u044e\u0449\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 .<code>active<\/code>. \u0413\u043e\u043b\u043e\u0432\u043e\u043a\u0440\u0443\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.header:not(.active) + .main .title:not(h2)<\/code><\/pre>\n\n\n\n<p>59.&nbsp;\u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043e\u043a \u0438 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0438 \u0438\u0441\u0447\u0435\u0437\u0430\u0442\u044c \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p { display: none; }\ninput&#91;type=\"checkbox\"]:checked ~ p { display: block; }<\/code><\/pre>\n\n\n\n<h3>\u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f CSS<\/h3>\n\n\n\n<p>60.&nbsp;\u0422\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0432\u0430\u0448 \u043a\u043e\u0434 \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u0432\u0441\u0435\u0433\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e, \u0438 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n\n\n\n<p>61.&nbsp;\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c&nbsp;<a href=\"http:\/\/prgssr.ru\/development\/razrabotka-rasshiryaemyh-komponentov-html-i-css.html\" target=\"_blank\" rel=\"noreferrer noopener\">\u043b\u0443\u0447\u0448\u0438\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043c<\/a>&nbsp;frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n\n\n\n<p>62.&nbsp;\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435&nbsp;<a href=\"https:\/\/proglib.io\/p\/terrible-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a<\/a>&nbsp;\u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u043c\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n\n\n\n<p>63.&nbsp;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043e\u0431\u0449\u0435\u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0435 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f \u043e\u0431 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0411\u042d\u041c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0430\u0448 CSS \u0432 \u0447\u0438\u0441\u0442\u043e\u0442\u0435 \u0438 \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<\/p>\n\n\n\n<p>64.&nbsp;\u041d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0411\u042d\u041c&nbsp;\u2013 \u043d\u0435 \u043f\u0430\u043d\u0430\u0446\u0435\u044f, \u0438 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043b\u0443\u0447\u0448\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u043d\u0435\u0433\u043e.<\/p>\n\n\n\n<p>65.&nbsp;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 CSS Modules \u0438 CSS-in-JS \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u042d\u0442\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043c\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u0412\u043c\u0435\u0441\u0442\u043e&nbsp;<code>.header__title<\/code>&nbsp;\u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441 \u0447\u0438\u0441\u0442\u043e\u0439 \u0441\u043e\u0432\u0435\u0441\u0442\u044c\u044e \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e&nbsp;<code>.title<\/code>.<\/p>\n\n\n\n<p>66.&nbsp;\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u043c\u0438, \u0437\u0430\u0433\u043b\u044f\u043d\u0438\u0442\u0435&nbsp;<a href=\"https:\/\/glenmaddern.com\/articles\/css-modules\" target=\"_blank\" rel=\"noreferrer noopener\">\u0441\u044e\u0434\u0430<\/a>.<\/p>\n\n\n\n<p>67.&nbsp;\u041e\u0434\u043d\u0430\u043a\u043e \u0438 \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438, \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u2013 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0422\u0430\u043a \u0447\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0432\u0432\u043e\u0434\u0438\u0442\u044c CSS \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n\n\n\n<p>68.&nbsp;CSS-in-JS \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u0435\u043d, \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0442\u0430\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0435 JavaScript-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u0430\u043a React \u0438\u043b\u0438 Vue.<\/p>\n\n\n\n<p>69.&nbsp;\u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u0441\u0443\u0434\u0438\u0442\u0435 \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 (\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c\u0438, frontend- \u0438 backend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438) \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 CSS-\u043a\u043e\u0434\u0430 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u0443\u044e \u0431\u0430\u0437\u0443. \u0422\u0430\u043a \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0449\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438 \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0432\u0430\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b.<\/p>\n\n\n\n<h3>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f CSS<\/h3>\n\n\n\n<p>70.&nbsp;\u0420\u0430\u0437\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u0440\u0430\u0437\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u044f \u0432\u0430\u0448 \u043a\u043e\u0434.<\/p>\n\n\n\n<p>71.&nbsp;\u0421\u0430\u043c\u044b\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u0435 \u2013 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443 (<code>#header<\/code>). \u0414\u0430\u043b\u044c\u0448\u0435&nbsp;\u2013 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0443\u0431\u044b\u0432\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438:<\/p>\n\n\n\n<ul><li>\u043a\u043b\u0430\u0441\u0441\u044b \u2013&nbsp;<code>.header<\/code><\/li><li>\u0442\u0435\u0433\u0438 \u2013&nbsp;<code>header<\/code><\/li><li>\u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u2013&nbsp;<code>nav + header<\/code><\/li><li>\u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u2013&nbsp;<code>main &gt; h1<\/code><\/li><li>\u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u2013&nbsp;<code>main header<\/code><\/li><li>\u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u2013&nbsp;<code>*<\/code><\/li><li>\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u2013&nbsp;<code>[type=\"text\"]<\/code><\/li><li>\u043f\u0441\u0435\u0432\u0434\u043e\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u2013&nbsp;<code>.header:before<\/code>,&nbsp;<code>.header:after<\/code><\/li><\/ul>\n\n\n\n<p>72.&nbsp;\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body header ul li<\/code><\/pre>\n\n\n\n<p>73.&nbsp;\u041b\u0443\u0447\u0448\u0435 \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u0430, \u0447\u0435\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u043f\u043e\u0438\u0441\u043a\u0430.<\/p>\n\n\n\n<p>74.&nbsp;<a href=\"https:\/\/www.scorp13.com\/workflow\/skorost-css-selektorov-sushestvenna-li-raznica-v-ih-effektivnosti.html\" target=\"_blank\" rel=\"noreferrer noopener\">\u0424\u0430\u043a\u0442\u044b \u0438 \u043c\u0438\u0444\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 CSS<\/a>&nbsp;\u043f\u043b\u044e\u0441 \u0435\u0449\u0435&nbsp;<a href=\"https:\/\/proglib.io\/p\/8-css-tricks\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 CSS-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/a>.<\/p>\n\n\n\n<h3>\u0421\u0435\u0442\u043a\u0430<\/h3>\n\n\n\n<p>75.&nbsp;\u0421 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c Flexbox \u0438 CSS Grid \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c float \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u0432.<\/p>\n\n\n\n<p>76.&nbsp;CSS Grid \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u043c\u0435\u0440\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0441\u0435\u0442\u043e\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Bootstrap.<\/p>\n\n\n\n<p>77.&nbsp;\u041d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 CSS Grid \u0438 Flexbox, \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0438\u0445 \u0432\u043c\u0435\u0441\u0442\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0437\u0430\u0434\u0430\u0447.<\/p>\n\n\n\n<p>78.&nbsp;Flexbox \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u043e\u0434\u043d\u043e\u043c\u0435\u0440\u043d\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0441\u043b\u0435\u0432\u0430, \u0430 \u043c\u0435\u043d\u044e&nbsp;\u2013 \u0441\u043f\u0440\u0430\u0432\u0430 \u0432 \u0448\u0430\u043f\u043a\u0435 \u0441\u0430\u0439\u0442\u0430.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.header {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  height: 60px;\n}<\/code><\/pre>\n\n\n\n<p>79.&nbsp;CSS Grid \u2013 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043c\u043d\u043e\u0433\u043e\u043c\u0435\u0440\u043d\u044b\u0445 \u0441\u0435\u0442\u043e\u043a.<\/p>\n\n\n\n<h3>\u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f<\/h3>\n\n\n\n<p>80.&nbsp;\u041e\u0446\u0435\u043d\u0438\u0442\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0435\u0434\u0438\u043d\u0438\u0446 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0447\u043d\u0438\u0442\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0432\u0430\u0448\u0435\u0439 frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, rem \u0431\u0430\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0448\u0440\u0438\u0444\u0442\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0415\u0441\u043b\u0438 \u0443&nbsp;<code>html<\/code>&nbsp;\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<code>font-size: 10px<\/code>, \u0442\u043e&nbsp;<code>1rem<\/code>&nbsp;\u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u0435\u043d&nbsp;<code>10px<\/code>, \u0430&nbsp;<code>2rem<\/code>&nbsp;\u2013&nbsp;<code>20px<\/code>.<\/p>\n\n\n\n<p>81.&nbsp;\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (<code>html<\/code>) \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0440\u0430\u0432\u0435\u043d&nbsp;<code>16px<\/code>, \u0442\u043e \u0435\u0441\u0442\u044c&nbsp;<code>1rem = 16px<\/code>.<\/p>\n\n\n\n<p>82.&nbsp;<code>rem<\/code>&nbsp;\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b. \u0427\u0442\u043e\u0431\u044b \u0432\u043d\u0435\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0438\u043b\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435&nbsp;<code>font-size<\/code>&nbsp;\u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>media (max-width: 600px) {\n  html {\n    font-size: 10px;\n  }\n}<\/code><\/pre>\n\n\n\n<p>83.&nbsp;\u041f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0441 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u043c\u0438 \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439&nbsp;<code>calc<\/code>, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html {\n  font-size: calc(#{$minimum-size}px + (#{$maximum-size} \u2014 #{$minimum-size}) * ((100vw \u2014 #{$minimum-viewport}px) \/ (#{$maximum-viewport} \u2014 #{$minimum-viewport})));\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/codepen.io\/LFeh\/embed\/wRYoPN?height=265&#038;theme-id=0&#038;default-tab=result&#038;user=LFeh&#038;slug-hash=wRYoPN&#038;pen-title=Audio%20Element&#038;name=cp_embed_2\n<\/div><\/figure>\n\n\n\n<h3>\u041c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/h3>\n\n\n\n<p>84.&nbsp;\u0410\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u044f \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0432\u043e frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u043e\u0434\u0445\u043e\u0434 mobile first: \u043d\u0430\u0447\u0438\u043d\u0430\u0439\u0442\u0435 \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0441 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0439\u0442\u0435 \u0435\u0433\u043e.<\/p>\n\n\n\n<p>85.&nbsp;\u0412\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u0432\u0441\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0435\u0441\u044f \u043a \u043d\u0435\u043c\u0443 \u0441\u0442\u0438\u043b\u0438.<\/p>\n\n\n\n<p>86.&nbsp;\u041c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432&nbsp;<a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\" target=\"_blank\" rel=\"noreferrer noopener\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n\n\n\n<h2>JavaScript<\/h2>\n\n\n\n<p>87.&nbsp;\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0435\u0441\u0442\u044c \u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0432\u043e\u0439\u043d\u043e\u0433\u043e \u043e\u0442\u0440\u0438\u0446\u0430\u043d\u0438\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const xis = 'x'\nconst hasXis = !!xis\nconsole.log(hasXis) \/\/ true<\/code><\/pre>\n\n\n\n<p>88.&nbsp;\u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0442\u0440\u043e\u0433\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0442\u0438\u043f\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log(1 === '1') \/\/ false<\/code><\/pre>\n\n\n\n<p>89.&nbsp;\u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043d\u0435\u0441\u0442\u0440\u043e\u0433\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 JavaScript \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log(1 == '1') \/\/ true<\/code><\/pre>\n\n\n\n<p>90.&nbsp;\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e&nbsp;<code>const<\/code>, \u043d\u0435 \u0442\u0430\u043a\u0438\u0435 \u0443\u0436 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u0435. \u0412\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0430\u043c\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043d\u043e \u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u2013 \u043b\u0435\u0433\u043a\u043e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const animals = &#91;'cat', 'dog']\nanimals.push('mouse')\nconsole.log(animals) \/\/ &#91;'cat', 'dog', 'mouse']<\/code><\/pre>\n\n\n\n<p>91.&nbsp;\u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c&nbsp;<code>const<\/code>-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0439, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u0441\u044c \u043c\u0435\u0442\u043e\u0434\u043e\u043c&nbsp;<code>Object.freeze<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const d2k = Object.freeze(&#91;'javascript', 'ninja', 'react])\nd2k.push('jquery') \/\/ Uncaught TypeError: Cannot add property 3, object is not extensible<\/code><\/pre>\n\n\n\n<p>92.&nbsp;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0430\u0446\u0438\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const f = (s = '\u2764\ufe0f') => `I ${s} frontend`\nconsole.log(f())\n\/\/ I \u2764\ufe0f frontend<\/code><\/pre>\n\n\n\n<p>93.&nbsp;Spread-\u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432\u044b:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const skills1 = &#91; 'css', 'html' ]\nconst skills2 = &#91; 'js', 'ts' ]\nconst newSkills = &#91; \u2026skills1, \u2026skills2, 'ux' ]\nconsole.log(newSkills) \/\/ &#91; 'css', 'html', 'js', 'ts', 'ux' ]<\/code><\/pre>\n\n\n\n<p>94.&nbsp;\u0418 \u043e\u0431\u044a\u0435\u043a\u0442\u044b:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const obj1 = { a: 1, x: 'Hello' }\nconst obj2 = { b: 2, y: 'world' }\nconst mergedObj = { ...obj1, ...obj2 }\nconsole.log(mergedObj) \/\/ { a: 1, b: 2, x: 'Hello', y: 'world' }<\/code><\/pre>\n\n\n\n<p>95.&nbsp;\u0418 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const s = 'HTML'\nconst c = &#91; \u2026s ]\nconsole.log(c) \/\/ &#91; 'H', 'T', 'M', 'L' ]<\/code><\/pre>\n\n\n\n<p>96.&nbsp;\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const person = { name: 'Felipe', lastName: 'Fialho', age: 28 }\nconst { name, age } = person\nconsole.log(name, age) \/\/ Felipe 28<\/code><\/pre>\n\n\n\n<p>97.&nbsp;\u041e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0442\u0435\u0440\u044f\u044e\u0442\u0441\u044f, \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0432 \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f rest-\u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const person = { name: 'Felipe', lastName: 'Fialho', age: 28 }\nconst { name, \u2026restOfPerson } = person\nconsole.log(restOfPerson) \/\/ { lastName: \"Fialho\", age: 28 }<\/code><\/pre>\n\n\n\n<h2>\u0420\u0435\u0441\u0443\u0440\u0441\u044b<\/h2>\n\n\n\n<p>\u041f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u0441\u044c \u043e\u0442\u0431\u043e\u0440\u043d\u044b\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438 frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430:<\/p>\n\n\n\n<p>98.&nbsp;<a href=\"https:\/\/developer.mozilla.org\/ru\/\" target=\"_blank\" rel=\"noreferrer noopener\">MDN Web Docs<\/a>&nbsp;\u2013 \u043b\u0443\u0447\u0448\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e \u0432\u0435\u0431\u0443.<\/p>\n\n\n\n<p>99.&nbsp;<a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">CanIUse<\/a>&nbsp;\u2013 \u043d\u0430\u0434\u0435\u0436\u043d\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0444\u0438\u0447 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438.<\/p>\n\n\n\n<p>100.&nbsp;<a href=\"https:\/\/www.w3.org\/standards\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b W3C<\/a>&nbsp;\u2013 frontend-\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u0440\u0443\u043a.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>100 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043f\u0440\u0438\u0435\u043c\u043e\u0432, \u043b\u0443\u0447\u0448\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043f\u043e HTML, CSS \u0438 JavaScript \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0449\u0438\u0445 frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[115],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1431"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1431"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1431\/revisions"}],"predecessor-version":[{"id":1432,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1431\/revisions\/1432"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}