{"id":2677,"date":"2024-01-27T14:09:58","date_gmt":"2024-01-27T19:09:58","guid":{"rendered":"https:\/\/learntechwell.com\/?p=2677"},"modified":"2025-11-24T15:29:48","modified_gmt":"2025-11-24T20:29:48","slug":"design-to-code-frontend-checklist","status":"publish","type":"post","link":"https:\/\/learntechwell.com\/ru\/design-to-code-frontend-checklist\/","title":{"rendered":"\u041e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043a \u043a\u043e\u0434\u0443: \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430"},"content":{"rendered":"<p>\u0414\u0438\u0437\u0430\u0439\u043d. \u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0436\u0438\u0432\u0438\u043c \u0435\u0435 \u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043c \u0432 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n\n\n\n<p>\u0421 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c? \u0412\u044b \u0437\u043d\u0430\u0435\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e HTML \u0438 CSS. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0438 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u0430 \u043a\u0443\u0440\u0441\u0430\u0445. \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043b\u044e\u0434\u0438 \u0441\u043c\u043e\u0433\u0443\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435.<\/p>\n\n\n\n<p>\u0412 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043d\u0435\u043b\u0435\u0433\u043a\u043e. \u0411\u044b\u043b\u043e \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u043e \u043c\u043d\u043e\u0439 \u0448\u0438\u0440\u043e\u043a\u0430\u044f, \u0431\u044b\u0441\u0442\u0440\u0430\u044f \u0440\u0435\u043a\u0430, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u044f \u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u043c \u0431\u0430\u0441\u0441\u0435\u0439\u043d\u0435. \u0427\u0435\u0433\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u043b\u044f \u0441\u0435\u0431\u044f! \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0430 \u0447\u0435\u043a\u043b\u0438\u0441\u0442, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u043c \u0431\u044b\u043b\u043e \u043b\u0435\u0433\u0447\u0435 \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0442\u043e\u0442 \u0431\u0435\u0440\u0435\u0433.<\/p>\n\n\n\n<p>\u042d\u0442\u043e\u0442 \u0447\u0435\u043a\u043b\u0438\u0441\u0442 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0432\u0441\u0435\u0445, \u043a\u0430\u043a \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445, \u0442\u0430\u043a \u0438 \u0443\u0436\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u0445. \u0414\u043b\u044f \u0431\u044b\u0432\u0430\u043b\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0442\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c <a href=\"https:\/\/github.com\/Divensky\/design-to-code-frontend-checklist\" rel=\"nofollow noopener\" target=\"_blank\">\u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f<\/a>. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0435\u043a\u043b\u0438\u0441\u0442 \u0432\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442!<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading2677_a64d15-c4, .wp-block-kadence-advancedheading.kt-adv-heading2677_a64d15-c4[data-kb-block=\"kb-adv-heading2677_a64d15-c4\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading2677_a64d15-c4 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading2677_a64d15-c4[data-kb-block=\"kb-adv-heading2677_a64d15-c4\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<h2 class=\"kt-adv-heading2677_a64d15-c4 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading2677_a64d15-c4\">\u0427\u0430\u0441\u0442\u044c I. \u0421\u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u0439 \u0432\u0434\u043e\u0445<\/h2>\n\n\n\n<p><strong>0. \u041d\u0435 \u043f\u0430\u043d\u0438\u043a\u0443\u0439\u0442\u0435 \u0438 \u043d\u0435 \u0431\u0435\u0433\u0438\u0442\u0435 \u043f\u0440\u043e\u0447\u044c.<\/strong> \u041d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u043c, \u043e\u0448\u0435\u043b\u043e\u043c\u043b\u044f\u044e\u0449\u0438\u043c, \u043e\u043d \u0441\u0442\u0430\u0432\u0438\u0442 \u043f\u0435\u0440\u0435\u0434 \u0432\u0430\u043c\u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0441\u0440\u0430\u0437\u0443. \u041d\u0435 \u043f\u043e\u0434\u0434\u0430\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0441\u043a\u0443\u0448\u0435\u043d\u0438\u044e \u0441\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441 \u043f\u0443\u0442\u0438 \u0438\u043b\u0438 \u0437\u0430\u0440\u044b\u0442\u044c\u0441\u044f \u0432 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b. \u042d\u0442\u043e\u0442 \u0447\u0435\u043a\u043b\u0438\u0441\u0442 \u0432\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442. \u041f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u044c\u0442\u0435\u0441\u044c \u043d\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0437\u0430 \u0440\u0430\u0437, \u0438 \u0432\u0441\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n\n\n\n<p><strong>1. \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/strong> \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0449\u0435 \u043d\u0435\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0435\u0433\u043e, \u0438 \u0432\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u0435 \u0441\u0435\u0431\u0435 \u043f\u0443\u0442\u044c \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0427\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 <a href=\"https:\/\/code.visualstudio.com\/\" rel=\"nofollow noopener\" target=\"_blank\">VS Code<\/a>, \u0445\u043e\u0442\u044f \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439. \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u0441\u044c \u043e\u043d\u043b\u0430\u0439\u043d-\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u043f\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430, \u043d\u0435 \u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u041a\u0430\u043a \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 Prettier: \u043e\u043d\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u0434.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0427\u0430\u0441\u0442\u044c II. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430<\/h2>\n\n\n<p class=\"MsoNormal\"><span lang=\"EN-US\"><strong>2. \u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0439 \u043f\u0430\u043f\u043a\u0438\/\u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/strong>. <\/span><\/p>\n\n\n<p><strong>3. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043e\u043a<\/strong>. \u0412\u043d\u0443\u0442\u0440\u0438 \u043f\u0430\u043f\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0430\u043f\u043a\u0443 \u0434\u043b\u044f CSS-\u0444\u0430\u0439\u043b\u043e\u0432, \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u043f\u0430\u043f\u043a\u0443 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0438 \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0434\u043b\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0430\u0433\u0438 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u0435: \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u043d\u0438\u0445.<\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>\u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u043f\u044b\u0442\u043d\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439.<\/summary>\n<ul class=\"wp-block-list\">\n<li>Open the project folder in your terminal.<\/li>\n\n\n\n<li>Create your project. For example, if creating in <a href=\"https:\/\/vitejs.dev\/guide\" rel=\"nofollow noopener\" target=\"_blank\">Vite<\/a>: <code>npm create vite@latest<\/code>.<\/li>\n\n\n\n<li>Install relevant dependencies: <code>npm install<\/code>.<\/li>\n\n\n\n<li>Install any additional dependencies you know you\u2019ll need. Maybe linters to check your code for errors, or SASS: <code>npm install -D sass<\/code>.<\/li>\n\n\n\n<li>Create\/modify the folder structure: include <code>src<\/code>  and\/or  <code>assets<\/code> folder, <code>public<\/code>  \u0438\u043b\u0438  <code>dist<\/code>  folder, etc. based on your preferred setup.<\/li>\n\n\n\n<li>Create\/copy a <code>.gitignore<\/code> file and specify what should be ignored by Git.<\/li>\n\n\n\n<li>Set up version control: <code>git init<\/code>, <code>git add .<\/code>  and then  <code>git commit -m \"initial commit\"<\/code>.<\/li>\n\n\n\n<li>Create a new branch and switch to it to help with future collaboration.<\/li>\n\n\n\n<li>Assign your upstream repository with <code>git push -u origin &lt;your branch name&gt;<\/code>. <\/li>\n\n\n\n<li>Set up any needed editor configurations and preferences.<\/li>\n<\/ul>\n<\/details>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>4. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b index.html<\/strong> \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<strong> \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b style.css <\/strong>\u0432 \u043f\u043e\u0434\u043f\u0430\u043f\u043a\u0435 CSS. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u0443 \u0432\u0430\u0441 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b CSS, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435: \u043f\u043e \u043c\u0435\u0440\u0435 \u0440\u043e\u0441\u0442\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0443 \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n\n\n\n<p><strong>5. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0444\u0430\u0439\u043b index.html <\/strong>\u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430. <strong>\u0421\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0439\u0442\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0439 \u043a\u043e\u0434<\/strong> \u0434\u043b\u044f HTML-\u0444\u0430\u0439\u043b\u0430 (<code>&lt;!DOCTYPE html&gt;<\/code>\u0438 \u0442.\u0434.). \u0412 VS Code \u0438 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u0445 \u043a\u043e\u0434\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0431\u0440\u0430\u0442\u044c \u0432\u043e\u0441\u043a\u043b\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u043d\u0430\u043a, \u0430 \u0437\u0430\u0442\u0435\u043c \u0442\u0430\u0431\u0443\u043b\u044f\u0446\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <a href=\"https:\/\/docs.emmet.io\/\" rel=\"nofollow noopener\" target=\"_blank\">Emmet<\/a>.<\/p>\n\n\n\n<p><strong>6. \u0417\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0442\u0435\u043a\u0441\u0442 \u0432 \u0442\u0435\u0433\u0435<code> &lt;title&gt; <\/code>\u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. <\/strong>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u0430\u043c \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u0435\u0442\u0430\u0442\u0435\u0433\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code><\/code>.<\/p>\n\n\n\n<p><strong>7. \u0412 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <code>&lt;head&gt;<\/code> \u0432\u0430\u0448\u0435\u0433\u043e HTML-\u0444\u0430\u0439\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0442\u0435\u0433 <code>&lt;link&gt;<\/code> \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0444\u0430\u0439\u043b\u0430 style.css.<\/strong> \u0417\u0430\u0434\u0430\u0439\u0442\u0435 \u043f\u0443\u0442\u044c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043f\u0430\u043f\u043e\u043a. \u041f\u0440\u0438\u043c\u0435\u0440: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"css\/style.css\"&gt;.<\/code><\/pre>\n\n\n\n<p><strong>8. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e:<\/strong> \u0432\u043f\u0438\u0448\u0438\u0442\u0435 \u0432 CSS-\u0444\u0430\u0439\u043b \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n  background-color: green;\n}<\/code><\/pre>\n\n\n\n<p>\u0417\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 HTML-\u0444\u0430\u0439\u043b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0449\u0435\u043b\u043a\u043d\u0438\u0442\u0435 \u043d\u0430 \u043d\u0435\u043c \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0435\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435). \u0412\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0442\u0435\u043c \u0441\u0442\u0438\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0437\u0430\u0434\u0430\u043b\u0438. \u0415\u0441\u043b\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043b\u0438 \u0432\u044b \u0433\u0434\u0435-\u0442\u043e \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0443, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432 \u043f\u0443\u0442\u0438 \u043a \u0444\u0430\u0439\u043b\u0443 CSS \u0438\u043b\u0438 \u0432 \u0438\u043c\u0435\u043d\u0438 \u0444\u0430\u0439\u043b\u0430. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0441\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, <strong>\u043f\u043e\u0437\u0434\u0440\u0430\u0432\u044c\u0442\u0435 \u0441\u0435\u0431\u044f: \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0436\u0438\u043b!<\/strong><\/p>\n\n\n\n<p><strong>9. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0439 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/strong> \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c HTML-\u0444\u0430\u0439\u043b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e: \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0432\u043d\u043e\u0441\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 - \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ritwickdey.LiveServer\" rel=\"nofollow noopener\" target=\"_blank\">Live Server<\/a> \u0432 VS Code, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u0438 \u0432\u043d\u0435\u0441\u0435\u043d\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u0420\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442\u0441\u044f <a href=\"https:\/\/www.youtube.com\/watch?v=h24noHYsuGc&amp;t=0s\" rel=\"nofollow noopener\" target=\"_blank\">\u0432 \u0432\u0438\u0434\u0435\u043e\u0440\u043e\u043b\u0438\u043a\u0435 \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443<\/a>.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u043e\u0444\u0438-\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430: <\/strong>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0442\u0438\u043f\u0430 Vite \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u0432 \u0441\u0435\u0431\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>watch<\/code> , \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438.&nbsp;<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading2677_d9c4d1-42, .wp-block-kadence-advancedheading.kt-adv-heading2677_d9c4d1-42[data-kb-block=\"kb-adv-heading2677_d9c4d1-42\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading2677_d9c4d1-42 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading2677_d9c4d1-42[data-kb-block=\"kb-adv-heading2677_d9c4d1-42\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<h2 class=\"kt-adv-heading2677_d9c4d1-42 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading2677_d9c4d1-42\">\u0427\u0430\u0441\u0442\u044c III. \u0410\u043d\u0430\u043b\u0438\u0437<\/h2>\n\n\n\n<p><strong>10. \u0418\u0437\u0443\u0447\u0438\u0442\u0435 \u0434\u0438\u0437\u0430\u0439\u043d \u0438 \u0432\u044b\u044f\u0432\u0438\u0442\u0435 <a href=\"https:\/\/web.dev\/learn\/design\/macro-layouts\/\" rel=\"nofollow noopener\" target=\"_blank\">\u043c\u0430\u043a\u0440\u043e-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438<\/a> ,<\/strong> \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0445\u0435\u0434\u0435\u0440, \u0441\u0435\u043a\u0446\u0438\u0438, aside, \u0444\u0443\u0442\u0435\u0440 \u0438 \u0442. \u0434. \u0418\u0449\u0438\u0442\u0435 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b. \u041f\u043e\u043b\u0435\u0437\u043d\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u043c\u0430\u043a\u0440\u043e-\u043c\u0430\u043a\u0435\u0442, \u043d\u0430\u0431\u0440\u043e\u0441\u0430\u0432 \u0435\u0433\u043e \u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 HTML, \u0438 \u043b\u044e\u0431\u044b\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0431\u043b\u043e\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e.<\/p>\n\n\n\n<p><strong>11. \u0412\u044b\u044f\u0432\u0438\u0442\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. <\/strong>\u0412\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430 \u044d\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442. \u041f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0432\u044b\u044f\u0441\u043d\u0438\u0442\u0435, \u0431\u0443\u0434\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e\u0442 \u0441\u0430\u0439\u0442 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0438\u043b\u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445: \u044d\u0442\u043e \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u0442 \u0432\u0430\u043c, \u043a\u0430\u043a \u0435\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0442 \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0430\u043a\u0446\u0435\u043d\u0442\u0430 \u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0438 \u0442. \u0434. \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430\u0434 \u043a\u043e\u0434\u043e\u043c, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0451 \u044d\u0442\u043e \u0437\u043d\u0430\u0442\u044c.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading2677_2f539a-02, .wp-block-kadence-advancedheading.kt-adv-heading2677_2f539a-02[data-kb-block=\"kb-adv-heading2677_2f539a-02\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading2677_2f539a-02 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading2677_2f539a-02[data-kb-block=\"kb-adv-heading2677_2f539a-02\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<h2 class=\"kt-adv-heading2677_2f539a-02 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading2677_2f539a-02\">\u0427\u0430\u0441\u0442\u044c IV. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 HTML<\/h2>\n\n\n\n<p><strong>12. Implement the macro-layout in your HTML file <\/strong>by putting necessary tags for the header, main, sections, aside, footer, etc. Use tag names that are descriptive of their content: for example, use <code>&lt;section&gt;<\/code> \u0438\u043b\u0438 <code>&lt;figure&gt;<\/code> rather than a <code>&lt;div&gt;<\/code>. Consider including &#8220;container&#8221; divs where you know you\u2019ll need them. If you have both desktop and mobile versions, write your HTML desktop-first, following the desktop layout. When you proceed to CSS later, you will determine if you want to write it mobile-first.<\/p>\n\n\n\n<p><strong>13. Copy and paste the text from the design file into your HTML.<\/strong> This is often done piece by piece using Ctrl+C (copy) and Ctrl+V (paste). If your design is in Figma, follow these steps: right-click, choose &#8220;select layer,&#8221; navigate to the text layer marked by the letter T, and then copy. Working in the view-only mode makes copying easier.<\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>More details on how to copy from a Figma file<\/summary>\n<h3 class=\"wp-block-heading\">Two modes in Figma<\/h3>\n\n\n\n<p>Figma design may be available to you in two modes: <strong>view-only<\/strong> \u0438\u043b\u0438 <strong>full editing access<\/strong>. View-only mode is sufficient for most tasks you&#8217;ll need to accomplish. If you need full editing access, you can save the Figma file into your Drafts, allowing you to edit it without the fear of messing up the design. The location of commands in Figma may vary depending on the mode used. File editing commands are not available in view-only mode.<\/p>\n\n\n\n<p>You can choose to install Figma on your local machine or use it online. &nbsp;In my experience, a local copy of Figma might occasionally experience indefinite lag when opening a file, requiring a restart. On the other hand, the online version may take some time to load the design but will not hang indefinitely.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Figma Developer Handoff<\/h3>\n\n\n\n<p>More resources on writing HTML and CSS code based on a Figma file are available by searching for<em>&#8220;Figma developer handoff&#8221;<\/em>: that\u2019s how Figma calls this process. A draft title for this checklist was \u201cFigma developer handoff simplified for first-time users\u201d. While this checklist does simplify Figma developer handoff, it is now broader than that. <\/p>\n<\/details>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>\u041f\u0440\u043e\u0444\u0438-\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430: <\/strong>Don\u2019t spend much time learning your design program (Figma, Photoshop etc.) the way a designer would; you only need to know a few simple actions that you can rapidly get accustomed to. Sure you can learn it in detail, but don&#8217;t veer off from your coding task to learn Figma, like I did at first <strong>\ud83d\ude0a<\/strong><\/p>\n\n\n\n<p><strong>\u041f\u0440\u043e\u0444\u0438-\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430: <\/strong>If you have a lot of text in the design file, you might use a plugin to export it, but more often than not, it&#8217;s simple enough to cut and paste. The section on Fonts below includes instructions on installing a Figma plugin. <\/p>\n\n\n\n<p><strong>14. Focus on your macro-layout. <\/strong>If the design includes many small details, for example in a <code>&lt;table&gt;<\/code> or a <code>&lt;form&gt;<\/code>, you might want to skip them for the moment and come back to them after you\u2019ve got your macro-layout working in both HTML and CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0427\u0430\u0441\u0442\u044c V. \u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c CSS-\u043a\u043e\u0434<\/h2>\n\n\n\n<p><strong>15. Position the preview of your file alongside the design file on your screen<\/strong> so you can see both simultaneously and check your output as you go.<\/p>\n\n\n\n<p><strong>16. Select the CSS naming methodology you\u2019re going to use. <\/strong>Some programmers use one called BEM (<a href=\"http:\/\/getbem.com\/introduction\/\" rel=\"nofollow noopener\" target=\"_blank\">Block, Element, Modifier<\/a>). You can learn more about BEM <a href=\"https:\/\/youtu.be\/SLjHSVwXYq4\" rel=\"nofollow noopener\" target=\"_blank\">in the video referenced here<\/a>. <\/p>\n\n\n\n<p>Whatever system you use, ensure that the <strong>class names are clear to a human (including your future self) who would read your code<\/strong>. For example, class name <code>.h<\/code> is not very descriptive, while class name <code>.hero<\/code> is. As part of your system, use mainly class names, rather than tag names or IDs, for your selectors. And don\u2019t increase specificity unless you have to: for example, don\u2019t use a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_selectors\/Selector_structure#complex_selector\" rel=\"nofollow noopener\" target=\"_blank\">complex selector<\/a> like <code>.main-form .top .name-input<\/code>, use just <code>.name-input<\/code> \u0438\u043b\u0438 <code>.form__name-input<\/code>.<\/p>\n\n\n\n<p><strong>17. Write any needed CSS styles that apply to the entire document.<\/strong> The common points to consider at this stage are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set the <code>body<\/code> margin to 0, as the browser adds an automatic margin of 8px.<\/li>\n\n\n\n<li>Create a <code>.container<\/code> style to define the max-width of your project and to center it.<\/li>\n\n\n\n<li>Perhaps use <em>CSS reset<\/em> \u0438\u043b\u0438 <em>normalize<\/em> browser default styles if this is preferred by your team, but be aware that <a href=\"https:\/\/www.smashingmagazine.com\/2018\/06\/bem-for-beginners\/#we-don-t-use-css-reset\" rel=\"nofollow noopener\" target=\"_blank\">there are different perspectives on using CSS resets<\/a>.<\/li>\n\n\n\n<li>If relevant, set max width for images: <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>img {\n  max-width: 100%;  \n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If relevant, <a href=\"https:\/\/css-tricks.com\/inheriting-box-sizing-probably-slightly-better-best-practice\" rel=\"nofollow noopener\" target=\"_blank\">set box-sizing<\/a> for the entire document. Example: <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>html {\n  box-sizing: border-box;  \n}\n\n*, *:before, *:after {\n  box-sizing: inherit;\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create any needed <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties\" rel=\"nofollow noopener\" target=\"_blank\">custom properties<\/a> in the root, for example:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n  --theme-color: #314f9b;\n}<\/code><\/pre>\n\n\n\n<p>If you&#8217;re unfamiliar with custom properties, you can <a href=\"https:\/\/youtu.be\/PHO6TBq_auI\" rel=\"nofollow noopener\" target=\"_blank\">watch a video<\/a> or skip them for now.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0427\u0430\u0441\u0442\u044c VI. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0448\u0440\u0438\u0444\u0442\u044b<\/h2>\n\n\n\n<p><strong>18. Identify which fonts the designer used <\/strong>by looking through your design file. <\/p>\n\n\n\n<p><strong>\u041f\u0440\u043e\u0444\u0438-\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430:<\/strong> If the Figma design seems to have too many fonts, you can use a Figma extension like <a href=\"https:\/\/www.figma.com\/community\/plugin\/746097413727734148\/Font-Fascia\" rel=\"nofollow noopener\" target=\"_blank\">Font Fascia<\/a>.<\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Steps to run Font Fascia or another Figma plugin<\/summary>\n<ol class=\"wp-block-list\">\n<li>If you have the file in a View Only mode, press a down arrow at the top center (after the file name) and select \u201cDuplicate to your drafts.\u201d The word \u201cDrafts\u201d should appear before the file name. &nbsp;&nbsp;<\/li>\n\n\n\n<li>Open Figma and navigate to the file where you want to use the Font Fascia plugin. As above, it must be an editable copy of your file, not a View-Only version.<\/li>\n\n\n\n<li>Click on the &#8220;Plugins&#8221; tab in the main menu. The browser version of the Figma app might work faster than the desktop app.<\/li>\n\n\n\n<li>In the Plugins panel, click on the &#8220;Browse all plugins&#8221; button. This will open the Figma Community page where you can search for plugins.<\/li>\n\n\n\n<li>In the search bar on the Figma Community page, type &#8220;Font Fascia&#8221; and press Enter.<\/li>\n\n\n\n<li>Look for the &#8220;Font Fascia&#8221; plugin in the search results and click on it to open its page.<\/li>\n\n\n\n<li>On the plugin page, click on the &#8220;Install&#8221; button to add the Font Fascia plugin to your Figma account.<\/li>\n\n\n\n<li>Once the plugin is installed, you can access it by going back to the Figma app and clicking on the &#8220;Plugins&#8221; tab in the top menu bar.<\/li>\n\n\n\n<li>In the Plugins panel, you should now see the Font Fascia plugin listed. Click on it to open the plugin.<\/li>\n\n\n\n<li>The Font Fascia plugin will provide you with a list of font sizes used within the Figma file. You can select different text elements in your design to see the corresponding font sizes.<\/li>\n<\/ol>\n<\/details>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>19. Connect the fonts. <\/strong>There are two main approaches: (1) Use Google Fonts or a similar font hosting service, or (2) download the fonts into your project and connect them from there. Detailed tutorials are available for both approaches. The first option is easier, while the second option provides better load performance.<\/p>\n\n\n\n<p>If using Google Fonts, include the <code>&lt;link&gt;<\/code> element(s) under <code>&lt;head&gt;<\/code> in your HTML, above the link to your <code>style.css<\/code> file. The specific code to use is usually suggested by your font hosting service. In your CSS file, write something like: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n&nbsp; font-family: Roboto, sans-serif; \n}<\/code><\/pre>\n\n\n\n<p>If hosting the fonts from your project, you can use <a href=\"https:\/\/gwfh.mranftl.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Google Fonts Helper<\/a>. Select the &#8220;Modern Browser&#8221; option. Copy the <code>@font-face<\/code> CSS rule(s) into your CSS file, download the zip file with fonts and extract them into the Fonts folder. Make sure that the path to this folder inside the <code>@font-face<\/code> rule(s) is correct. After your <code>@font-face<\/code> rule(s) assign the <code>font-familiy<\/code> exactly the same as above. <\/p>\n\n\n\n<p>A generic font (\u201csans-serif\u201d in the above example) after the font name in your font-family property is required as a fallback.<\/p>\n\n\n\n<p>Now check to see the new font in your preview!<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading2677_39c68d-54, .wp-block-kadence-advancedheading.kt-adv-heading2677_39c68d-54[data-kb-block=\"kb-adv-heading2677_39c68d-54\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading2677_39c68d-54 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading2677_39c68d-54[data-kb-block=\"kb-adv-heading2677_39c68d-54\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<h2 class=\"kt-adv-heading2677_39c68d-54 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading2677_39c68d-54\">Part VII. Export images from the design<\/h2>\n\n\n\n<p>Note: I found it best to deal with images section by section. <\/p>\n\n\n\n<p><strong>20. Conditional: if an image has rounded corners, or has overlying elements, or has opacity or such effects applied, remove these effects before download.<\/strong> You want to implement these effects in your CSS. For example, if you downloaded an image with the corners rounded at <code>50px<\/code> and later your customer says that the corners should be rounded at <code>20px<\/code> \u0438\u043b\u0438 <code>80px<\/code>, you would have to newly download the image with all of its versions; but if you\u2019ve downloaded the image as itself, with square corners, you can easily adjust CSS<code> border-radius <\/code>property at any time.<\/p>\n\n\n\n<p>To download from Figma an image without corner-rounding applied, go to the editable Figma file and in the top part of it find the \u201ccorner radius\u201d value. Then manually change it to 0 (perhaps in all 4 corners). This only works if you have edit access to the file. Then download the image without rounded corners.<\/p>\n\n\n\n<p>Similarly, extract the images without opacity, overlays, or other effects. Refer to the instructions of Figma or Photoshop for details on how to do this.<\/p>\n\n\n\n<p><strong>21. Export any images from your design file.<\/strong> \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438: &nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Modify the images before export if needed (see below for details).<\/li>\n\n\n\n<li>Export icons and simple drawings as SVG files. Export the other pictures as JPG or, where the images have transparency, PNG.<\/li>\n\n\n\n<li>Export non-SVG images in at least 2 versions: 1X for the regular display and 2X for the Retina display. Some people also use 3X. If you have a mobile design then add the mobile versions of these images.<\/li>\n\n\n\n<li>Optimize your images to improve page performance. There are lots of tools for this purpose; I have used <a href=\"https:\/\/squoosh.app\/\" rel=\"nofollow noopener\" target=\"_blank\">Squoosh<\/a> for JPG\/PNG images and <a href=\"https:\/\/jakearchibald.github.io\/svgomg\/\" rel=\"nofollow noopener\" target=\"_blank\">SvgOmg<\/a> for SVG images. Simply drop your image on the browser page and then download an optimized version of it. Also, create WEBP or AVIF versions of non-SVG images. Squoosh can do it for you. (In my experience, small-size images don\u2019t benefit from format conversion as much as larger-size images do.)&nbsp; <\/li>\n\n\n\n<li>Give each set of images a meaningful name and place it in your Images folder.<\/li>\n\n\n\n<li>Ensure you get the favicon image among others.<\/li>\n<\/ul>\n\n\n\n<p><strong>Figma tip: <\/strong>The location of the Image Export section differs depending on your level of access to the file and the mode you\u2019re using. Refer to the export instructions by Figma: <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360040028114-Export-from-Figma\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/help.figma.com\/hc\/en-us\/articles\/360040028114-Export-from-Figma<\/a>.<\/p>\n\n\n\n<p><\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading2677_93816e-5c, .wp-block-kadence-advancedheading.kt-adv-heading2677_93816e-5c[data-kb-block=\"kb-adv-heading2677_93816e-5c\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading2677_93816e-5c mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading2677_93816e-5c[data-kb-block=\"kb-adv-heading2677_93816e-5c\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<h2 class=\"kt-adv-heading2677_93816e-5c wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading2677_93816e-5c\">Part VIII. Implement images in your HTML and CSS<\/h2>\n\n\n\n<p><strong>28. \u0420\u0435\u0448\u0438\u0442\u0435, \u0433\u0434\u0435 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443: \u0432 HTML \u0438\u043b\u0438 CSS.<\/strong> If an image is purely presentational, such as a background, most commonly it is implemented through CSS. If the image is meaningful, like a logo, it is implemented through HTML. Ask yourself: <em>\u201cIf I remove the picture, will the content still make sense?\u201d<\/em><strong> <\/strong>If yes, then the image serves a decorative purpose and normally belongs in CSS. &nbsp;<\/p>\n\n\n\n<p><strong>23. When implementing an image in HTML,<\/strong> use the following guidelines:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set the \u201cwidth\u201d and \u201cheight\u201d of the image so that the browser allocates enough space for it. Example:<code> &lt;img src=&quot;logo.svg&quot; width=&quot;400&quot; height=&quot;300&quot; alt=&quot;Logo&quot;&gt;<\/code>. The size of the image is available in the &#8220;properties&#8221; of the file.<\/li>\n\n\n\n<li>Always use the<code> alt <\/code>attribute with descriptive text for screen readers and search engines. If the image is purely decorative or its meaning is rendered by the text surrounding it, use an empty<code> alt <\/code>attribute. In any case, do not omit it. When there is no<code> alt <\/code>attribute, screen readers will read the file name and\/or file path instead; this might confuse the end user. An empty<code> alt <\/code>attribute tells screen readers and other assistive technologies that the user can understand the content without being aware that the image exists.<\/li>\n\n\n\n<li>If you have different versions of the image, use<code> &lt;picture&gt; <\/code>element with the<code> srcset <\/code>\u0438<code> sizes <\/code>attributes as covered here: <a href=\"https:\/\/web.dev\/learn\/design\/picture-element\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/web.dev\/learn\/design\/picture-element\/<\/a>.<\/li>\n\n\n\n<li>For below-the-fold images add<code> loading=\"lazy\" <\/code>attribute to improve page performance.<\/li>\n\n\n\n<li>Use the<code> &lt;figure&gt; <\/code>\u0438<code> &lt;figcaption&gt; <\/code>elements for better semantics, especially if the image has a caption.<\/li>\n\n\n\n<li>Include a favicon image in the&nbsp;<code>&lt;head&gt;<\/code>&nbsp;section. Example:&nbsp;<code>&lt;link rel=\"icon\" href=\"images\/favicon.ico\" type=\"image\/x-icon\"\/&gt;<\/code>.<\/li>\n<\/ul>\n\n\n\n<p><strong>24. When implementing a background image through CSS,<\/strong> consider using<code> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/image\/image-set\" rel=\"nofollow noopener\" target=\"_blank\">image-set()<\/a> <\/code>to specify different versions of a large image. The example below includes providing fallbacks for browsers that do not support WEBP images:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>background-image: image-set(\n      url('\/images\/hero@1x.jpg') 1x,\n      url('\/images\/hero@2x.jpg') 2x,\n      url('\/images\/hero@3x.jpg') 3x,\n      url('\/images\/hero@1x.webp') 1x,\n      url('\/images\/hero@2x.webp') 2x,\n      url('\/images\/hero@3x.webp') 3x\n    );<\/code><\/pre>\n\n\n\n<p><strong>25. Set <a href=\"https:\/\/web.dev\/learn\/design\/responsive-images\" rel=\"nofollow noopener\" target=\"_blank\">responsive image<\/a> properties in your CSS<\/strong> for all images. This may include<code> max-width: 100%<\/code>;<code> background-size: cover<\/code>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/object-fit\" rel=\"nofollow noopener\" target=\"_blank\">object-fit<\/a>, etc. <\/p>\n\n\n\n<p><\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading2677_9bbb40-08, .wp-block-kadence-advancedheading.kt-adv-heading2677_9bbb40-08[data-kb-block=\"kb-adv-heading2677_9bbb40-08\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading2677_9bbb40-08 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading2677_9bbb40-08[data-kb-block=\"kb-adv-heading2677_9bbb40-08\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<h2 class=\"kt-adv-heading2677_9bbb40-08 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading2677_9bbb40-08\">Part IX. Complete the section at hand<\/h2>\n\n\n\n<p><strong>26. Start with a large page block. <\/strong>\u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438, \u0447\u0442\u043e \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445, \u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u0432 CSS \u043f\u043e\u0434\u0445\u043e\u0434\u0443 mobile-first, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0432\u0438\u0434 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0434 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e, \u0430 \u0437\u0430\u0442\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044f \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432.<\/p>\n\n\n\n<p><strong>27. Get the sizes, colors, etc. from your design file <\/strong>as you go along. Use <code>max-width<\/code> where you don&#8217;t want the text to become too wide on large screens.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u043e\u0444\u0438-\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430: <\/strong>When you copy CSS properties from Figma or Photoshop file, disregard the positioning or display properties such as <code>position: absolute<\/code> \u0438\u043b\u0438 <code>display: flex<\/code> \u0438\u043b\u0438 <code>flex-shrink: 0<\/code>. Use your own judgment to set these properties; a design file would not know which position or display property would work best in CSS.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u043e\u0444\u0438-\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430:<\/strong> the margin\/padding sizes usually cannot be copied from the design file and need to be measured by hand.<\/p>\n\n\n\n<p><strong>28. Convert fixed sizes that you see in the design to relative sizes <\/strong>where applicable. Your knowledge of <a href=\"https:\/\/learntechwell.com\/ru\/responsive-design-the-missing-ingredient\/\">responsive design<\/a> principles should guide you. You may use percentages or viewport width\/height values, media queries, fluid font sizes (with relevant <code>em\/rem<\/code> values for paddings and margins), etc.<\/p>\n\n\n\n<p>If you are not familiar with this area as yet, be guided by the requirements of your project to see whether you can skip this step. Also, check out my article that covers <a href=\"https:\/\/learntechwell.com\/ru\/responsive-design-the-missing-ingredient\/\">the best resources to learn responsive design<\/a>!<\/p>\n\n\n\n<p><strong>29. Compare your page output to the design as you go along. <\/strong>Check various screen widths using <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Common_questions\/Tools_and_setup\/What_are_browser_developer_tools\" rel=\"nofollow noopener\" target=\"_blank\">browser dev tools<\/a>. Also, zoom in and out to see how your page behaves. Zooming in on my project sometimes surprises me \ud83d\ude03<\/p>\n\n\n\n<p><strong>30. Proceed to <a href=\"https:\/\/web.dev\/learn\/design\/micro-layouts\/\" rel=\"nofollow noopener\" target=\"_blank\">micro-layout<\/a> once satisfied with a macro-layout<\/strong> of your page or section. Before coding each micro-layout, analyze it as you did with macro-layouts. Implement a micro-layout in HTML and CSS. Choose HTML tags that best represent the content, use responsive design and the other principles given in this checklist. Preview your micro-layout in different browsers.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u043e\u0444\u0438-\u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430:<\/strong> Pay particular attention to a <code>&lt;form&gt;<\/code> in different browsers.<\/p>\n\n\n\n<p><strong>31. Take care of any buttons or links.<\/strong> Style the <code>:hover<\/code>,<code> :focus<\/code>,<code> :focus-visible<\/code>,  and<code> :active <\/code>states for these elements. For example, you might change the<code> opacity <\/code>\u0438\u043b\u0438<code> text-decoration<\/code>. Include an&nbsp;<code>outline-color<\/code>&nbsp;for the&nbsp;<code>:focus-visible<\/code>&nbsp;state.&nbsp;Ensure that the styles provide good contrast in the preview. Further, <strong>ensure that the buttons are large enough to be pressed easily<\/strong>; add padding where needed. The <a href=\"https:\/\/uxmovement.com\/mobile\/optimal-size-and-spacing-for-mobile-buttons\" rel=\"nofollow noopener\" target=\"_blank\">minimum recommended touch target size is 42px<\/a>.<\/p>\n\n\n\n<p><\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading2677_0d46df-91, .wp-block-kadence-advancedheading.kt-adv-heading2677_0d46df-91[data-kb-block=\"kb-adv-heading2677_0d46df-91\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading2677_0d46df-91 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading2677_0d46df-91[data-kb-block=\"kb-adv-heading2677_0d46df-91\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}<\/style>\n<h2 class=\"kt-adv-heading2677_0d46df-91 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading2677_0d46df-91\">\u0427\u0430\u0441\u0442\u044c X. \u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0442\u0435\u0441\u0442<\/h2>\n\n\n\n<p><strong>32. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043b\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 <\/strong>\u043f\u0440\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0415\u0441\u043b\u0438 \u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435 \u0442\u0430\u043a, \u043a\u0430\u043a \u0432\u044b \u043e\u0436\u0438\u0434\u0430\u043b\u0438, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u0441\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 Dev Tools \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u043f\u0440\u0438\u0447\u0438\u043d\u0443. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044c \u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Common_questions\/Tools_and_setup\/What_are_browser_developer_tools\" rel=\"nofollow noopener\" target=\"_blank\">\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430\u043c<\/a>, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043a \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0443 \u043f\u043e <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\" rel=\"nofollow noopener\" target=\"_blank\">Chrome Dev Tools.<\/a>. \u0412\u0441\u043a\u043e\u0440\u0435 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0442\u0430\u043a, \u043a\u0430\u043a \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043c\u043d\u043e\u0433\u043e, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u043e\u0441\u0432\u043e\u0438\u0442\u0435\u0441\u044c, \u0432\u0441\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e. \u041f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c, \u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0432\u043e\u0437\u043d\u0430\u0433\u0440\u0430\u0436\u0434\u0435\u043d\u044b \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0439, \u0436\u0438\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0438\u0437 \u043d\u0438\u0447\u0435\u0433\u043e! &nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u0447\u0435\u043a\u043b\u0438\u0441\u0442\u0435. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u043d\u043e, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0447\u0442\u043e\u0431\u044b \u044f \u0437\u043d\u0430\u043b, \u0447\u0442\u043e \u043c\u043e\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043d\u0430\u0448\u043b\u0430 \u0441\u0432\u043e\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439! \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u0441 \u043f\u0435\u0440\u0432\u044b\u043c\u0438 \u0448\u0430\u0433\u0430\u043c\u0438 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a\u043e \u043c\u043d\u0435 \u0441 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c\u0438.<\/p>","protected":false},"excerpt":{"rendered":"<p>\u0414\u0438\u0437\u0430\u0439\u043d. \u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0434\u043e\u0445\u043d\u0435\u043c \u0432 \u043d\u0435\u0435 \u0436\u0438\u0437\u043d\u044c \u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043c \u0432 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. <\/p>\n<p>Where do you start? And how do you go from there? <\/p>\n<p>When I found myself in this position for the first time, it was not easy. Since then, I\u2019ve crafted a checklist to guide you step-by-step. It includes project setup, HTML markup, CSS coding, font integration, and image implementation. Use this checklist to start from scratch and don&#8217;t miss any detail on your way to a high-quality webpage.<\/p>","protected":false},"author":1,"featured_media":2721,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cos_headline_score":0,"cos_seo_score":0,"cos_headline_text":"Design to Code Frontend Checklist: A Step-by-Step Guide","cos_headline_has_been_analyzed":false,"cos_last_analyzed_headline":[],"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[4],"tags":[43,44,45,39,42,46],"class_list":["post-2677","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","tag-css","tag-design-to-code","tag-frontend-best-practices","tag-frontend-development","tag-html","tag-responsive-design"],"jetpack_featured_media_url":"https:\/\/learntechwell.com\/wp-content\/uploads\/2024\/01\/cz9ajmgkifi.jpg","_links":{"self":[{"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/posts\/2677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/comments?post=2677"}],"version-history":[{"count":38,"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/posts\/2677\/revisions"}],"predecessor-version":[{"id":2774,"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/posts\/2677\/revisions\/2774"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/media\/2721"}],"wp:attachment":[{"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/media?parent=2677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/categories?post=2677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/tags?post=2677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}