{"id":24313,"date":"2024-01-14T00:29:31","date_gmt":"2024-01-13T11:29:31","guid":{"rendered":"https:\/\/goit.global\/?post_type=articles&#038;p=24313"},"modified":"2026-04-30T14:03:41","modified_gmt":"2026-04-30T11:03:41","slug":"html-i-css-shcho-tse-komu-ta-dlia-choho-potribno","status":"publish","type":"articles","link":"https:\/\/goit.global\/ua\/articles\/html-i-css-shcho-tse-komu-ta-dlia-choho-potribno\/","title":{"rendered":"HTML \u0456 CSS: \u0449\u043e \u0446\u0435, \u043a\u043e\u043c\u0443 \u0442\u0430 \u0434\u043b\u044f \u0447\u043e\u0433\u043e \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e"},"content":{"rendered":"<p>&#1052;&#1072;&#1081;&#1078;&#1077; &#1074;&#1089;&#1077;, &#1097;&#1086; &#1090;&#1080; &#1073;&#1072;&#1095;&#1080;&#1096; &#1086;&#1085;&#1083;&#1072;&#1081;&#1085; &ndash; &#1074;&#1110;&#1076; &#1073;&#1083;&#1086;&#1075;&#1110;&#1074; &#1110; &#1110;&#1085;&#1090;&#1077;&#1088;&#1085;&#1077;&#1090;-&#1084;&#1072;&#1075;&#1072;&#1079;&#1080;&#1085;&#1110;&#1074; &#1076;&#1086; &#1089;&#1086;&#1094;&#1110;&#1072;&#1083;&#1100;&#1085;&#1080;&#1093; &#1084;&#1077;&#1088;&#1077;&#1078; &#1090;&#1072; &#1110;&#1085;&#1092;&#1086;&#1088;&#1084;&#1072;&#1094;&#1110;&#1081;&#1085;&#1080;&#1093; &#1087;&#1086;&#1088;&#1090;&#1072;&#1083;&#1110;&#1074;, &ndash; &#1089;&#1090;&#1074;&#1086;&#1088;&#1077;&#1085;&#1086; &#1079; &#1074;&#1080;&#1082;&#1086;&#1088;&#1080;&#1089;&#1090;&#1072;&#1085;&#1085;&#1103;&#1084; HTML &#1110; CSS. HTML &#1079;&#1072;&#1076;&#1072;&#1108; &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1091; &#1110; &#1079;&#1084;&#1110;&#1089;&#1090; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1086;&#1082;, &#1072; CSS &#1074;&#1110;&#1076;&#1087;&#1086;&#1074;&#1110;&#1076;&#1072;&#1108; &#1079;&#1072; &#1111;&#1093;&#1085;&#1110;&#1081; &#1082;&#1086;&#1083;&#1110;&#1088;, &#1089;&#1090;&#1080;&#1083;&#1100; &#1090;&#1072; &#1086;&#1092;&#1086;&#1088;&#1084;&#1083;&#1077;&#1085;&#1085;&#1103;. HTML &#1110; CSS &#1087;&#1086;&#1090;&#1088;&#1110;&#1073;&#1085;&#1086; &#1079;&#1085;&#1072;&#1090;&#1080; &#1085;&#1072;&#1081;&#1088;&#1110;&#1079;&#1085;&#1086;&#1084;&#1072;&#1085;&#1110;&#1090;&#1085;&#1110;&#1096;&#1080;&#1084; IT-&#1092;&#1072;&#1093;&#1110;&#1074;&#1094;&#1103;&#1084;: <a href=\"https:\/\/goit.global\/ua\/articles\/khto-takyy-frontend-developer-v-it-rol-obov-iazky-perspektyvy\/\">Frontend-&#1088;&#1086;&#1079;&#1088;&#1086;&#1073;&#1085;&#1080;&#1082;&#1072;&#1084;<\/a>, <a href=\"https:\/\/goit.global\/ua\/articles\/khto-takyy-fullstack-rozrobnyk-i-chym-vin-zaymaietsia\/\">Fullstack-&#1087;&#1088;&#1086;&#1075;&#1088;&#1072;&#1084;&#1110;&#1089;&#1090;&#1072;&#1084;<\/a>, <a href=\"https:\/\/goit.global\/ua\/articles\/testuvannia-pz-shcho-tse-take-i-dlia-choho-potribno\/\">&#1090;&#1077;&#1089;&#1090;&#1091;&#1074;&#1072;&#1083;&#1100;&#1085;&#1080;&#1082;&#1072;&#1084; &#1055;&#1047;<\/a>, <a href=\"https:\/\/goit.global\/ua\/articles\/ui-ta-ux-dyzayn-v-chomu-riznytsia-i-iak-vony-pov-iazani\/\">UI\/UX-&#1076;&#1080;&#1079;&#1072;&#1081;&#1085;&#1077;&#1088;&#1072;&#1084;<\/a> &#1090;&#1086;&#1097;&#1086;. &#1057;&#1100;&#1086;&#1075;&#1086;&#1076;&#1085;&#1110; &#1088;&#1086;&#1079;&#1073;&#1077;&#1088;&#1077;&#1084;&#1086;&#1089;&#1103;, &#1097;&#1086; &#1090;&#1072;&#1082;&#1077; HTML &#1110; CSS &#1090;&#1072; &#1095;&#1086;&#1084;&#1091; &#1111;&#1093; &#1074;&#1080;&#1074;&#1095;&#1077;&#1085;&#1085;&#1103; &ndash; &#1095;&#1091;&#1076;&#1086;&#1074;&#1072; &#1110;&#1076;&#1077;&#1103; &#1076;&#1083;&#1103; &#1087;&#1086;&#1095;&#1072;&#1090;&#1082;&#1091; &#1090;&#1074;&#1086;&#1075;&#1086; &#1096;&#1083;&#1103;&#1093;&#1091; &#1074; IT. &#1055;&#1086;&#1111;&#1093;&#1072;&#1083;&#1080;!<\/p>\n<p><a href=\"https:\/\/m.goit.global\/ua\/new\/?amp%3Butm_medium=articles&#038;amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Butm_campaign=24313\"><\/a>\n<\/p>\n<h2>&#1065;&#1086; &#1090;&#1072;&#1082;&#1077; HTML &#1110; &#1076;&#1083;&#1103; &#1095;&#1086;&#1075;&#1086; &#1074;&#1110;&#1085; &#1087;&#1086;&#1090;&#1088;&#1110;&#1073;&#1077;&#1085;<\/h2>\n<p>\nHTML &ndash; &#1094;&#1077; &#1084;&#1086;&#1074;&#1072; &#1075;&#1110;&#1087;&#1077;&#1088;&#1090;&#1077;&#1082;&#1089;&#1090;&#1086;&#1074;&#1086;&#1111; &#1088;&#1086;&#1079;&#1084;&#1110;&#1090;&#1082;&#1080; &#1076;&#1086;&#1082;&#1091;&#1084;&#1077;&#1085;&#1090;&#1110;&#1074;, &#1103;&#1082;&#1072; &#1087;&#1088;&#1072;&#1094;&#1102;&#1108; &#1095;&#1077;&#1088;&#1077;&#1079; &#1089;&#1080;&#1089;&#1090;&#1077;&#1084;&#1091; &#1090;&#1077;&#1075;&#1110;&#1074; &#1110; &#1076;&#1086;&#1087;&#1086;&#1084;&#1072;&#1075;&#1072;&#1108; &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1091;&#1074;&#1072;&#1090;&#1080; &#1090;&#1072; &#1082;&#1086;&#1084;&#1087;&#1086;&#1085;&#1091;&#1074;&#1072;&#1090;&#1080; &#1077;&#1083;&#1077;&#1084;&#1077;&#1085;&#1090;&#1080; &#1074;&#1077;&#1073;&#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1086;&#1082;. <strong>&#1071;&#1082;&#1097;&#1086; &#1091;&#1103;&#1074;&#1080;&#1090;&#1080; &#1089;&#1072;&#1081;&#1090; &#1091; &#1074;&#1080;&#1075;&#1083;&#1103;&#1076;&#1110; &#1073;&#1091;&#1076;&#1080;&#1085;&#1082;&#1091;, &#1090;&#1086; HTML &#1079;&#1072;&#1076;&#1072;&#1108; &#1088;&#1086;&#1079;&#1090;&#1072;&#1096;&#1091;&#1074;&#1072;&#1085;&#1085;&#1103; &#1081; &#1086;&#1073;&#1083;&#1072;&#1096;&#1090;&#1091;&#1074;&#1072;&#1085;&#1085;&#1103; &#1082;&#1110;&#1084;&#1085;&#1072;&#1090;, &#1072;&#1083;&#1077; &#1085;&#1077; &#1079;&#1072;&#1081;&#1084;&#1072;&#1108;&#1090;&#1100;&#1089;&#1103; &#1086;&#1092;&#1086;&#1088;&#1084;&#1083;&#1077;&#1085;&#1085;&#1103;&#1084;. <\/strong><a href=\"https:\/\/goit.global\/ua\/glossary\/\">HTML<\/a> &#1075;&#1086;&#1074;&#1086;&#1088;&#1080;&#1090;&#1100; &#1073;&#1088;&#1072;&#1091;&#1079;&#1077;&#1088;&#1091;, &#1076;&#1077; &#1084;&#1072;&#1108; &#1073;&#1091;&#1090;&#1080; &#1079;&#1072;&#1075;&#1086;&#1083;&#1086;&#1074;&#1086;&#1082;, &#1090;&#1077;&#1082;&#1089;&#1090;, &#1082;&#1072;&#1088;&#1090;&#1080;&#1085;&#1082;&#1072;, &#1087;&#1086;&#1089;&#1080;&#1083;&#1072;&#1085;&#1085;&#1103; &#1090;&#1086;&#1097;&#1086;. &#1062;&#1077; &#1082;&#1072;&#1088;&#1082;&#1072;&#1089;, &#1085;&#1072; &#1086;&#1089;&#1085;&#1086;&#1074;&#1110; &#1103;&#1082;&#1086;&#1075;&#1086; &#1073;&#1091;&#1076;&#1091;&#1102;&#1090;&#1100;&#1089;&#1103; &#1074;&#1089;&#1110; &#1089;&#1072;&#1081;&#1090;&#1080;.<\/p>\n<p>HTML &#1087;&#1086;&#1090;&#1088;&#1110;&#1073;&#1077;&#1085; &#1076;&#1083;&#1103; &#1090;&#1086;&#1075;&#1086;, &#1097;&#1086;&#1073; &#1073;&#1088;&#1072;&#1091;&#1079;&#1077;&#1088; &#1087;&#1088;&#1072;&#1074;&#1080;&#1083;&#1100;&#1085;&#1086; &#1074;&#1110;&#1076;&#1086;&#1073;&#1088;&#1072;&#1078;&#1072;&#1074; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1082;&#1080;. &#1041;&#1077;&#1079; &#1085;&#1100;&#1086;&#1075;&#1086; &#1090;&#1080; &#1073; &#1073;&#1072;&#1095;&#1080;&#1074; &#1087;&#1088;&#1086;&#1089;&#1090;&#1086; &#1082;&#1091;&#1087;&#1091; &#1093;&#1072;&#1086;&#1090;&#1080;&#1095;&#1085;&#1086;&#1075;&#1086; &#1090;&#1077;&#1082;&#1089;&#1090;&#1091;, &#1087;&#1077;&#1088;&#1077;&#1084;&#1110;&#1096;&#1072;&#1085;&#1086;&#1075;&#1086; &#1079; &#1079;&#1086;&#1073;&#1088;&#1072;&#1078;&#1077;&#1085;&#1085;&#1103;&#1084;&#1080;. &#1057;&#1072;&#1084;&#1077; HTML &#1076;&#1086;&#1087;&#1086;&#1084;&#1072;&#1075;&#1072;&#1108; &#1089;&#1072;&#1081;&#1090;&#1072;&#1084; &#1073;&#1091;&#1090;&#1080; &#1079;&#1088;&#1086;&#1079;&#1091;&#1084;&#1110;&#1083;&#1080;&#1084;&#1080; &#1090;&#1072; &#1079;&#1088;&#1091;&#1095;&#1085;&#1080;&#1084;&#1080; &#1076;&#1083;&#1103; &#1082;&#1086;&#1088;&#1080;&#1089;&#1090;&#1091;&#1074;&#1072;&#1095;&#1110;&#1074;. &#1058;&#1086;&#1084;&#1091; &#1079;&#1085;&#1072;&#1085;&#1085;&#1103; HTML &ndash; &#1094;&#1077; &#1073;&#1072;&#1079;&#1072; &#1076;&#1083;&#1103; &#1074;&#1089;&#1110;&#1093;, &#1093;&#1090;&#1086; &#1093;&#1086;&#1095;&#1077; &#1087;&#1077;&#1088;&#1077;&#1081;&#1090;&#1080; &#1091; <a href=\"https:\/\/goit.global\/ua\/articles\/yak-staty-frontend-rozrobnykom-pokrokovyy-plan-diy\/\">&#1092;&#1088;&#1086;&#1085;&#1090;&#1077;&#1085;&#1076;<\/a> &#1095;&#1080; <a href=\"https:\/\/goit.global\/ua\/articles\/yak-staty-fullstack-rozrobnykom-z-nulia-i-znayty-pershu-robotu\/\">Fullstack-&#1088;&#1086;&#1079;&#1088;&#1086;&#1073;&#1082;&#1091;<\/a>. &#1056;&#1086;&#1079;&#1091;&#1084;&#1110;&#1108;&#1096;, &#1085;&#1072;&#1089;&#1082;&#1110;&#1083;&#1100;&#1082;&#1080; HTML &#1074;&#1072;&#1078;&#1083;&#1080;&#1074;&#1080;&#1081;?\n<\/p>\n<h3>&#1044;&#1083;&#1103; &#1095;&#1086;&#1075;&#1086; &#1087;&#1088;&#1080;&#1079;&#1085;&#1072;&#1095;&#1077;&#1085;&#1072; &#1084;&#1086;&#1074;&#1072; HTML<\/h3>\n<p>\n&#1058;&#1077;&#1087;&#1077;&#1088;, &#1082;&#1086;&#1083;&#1080; &#1090;&#1080; &#1079;&#1085;&#1072;&#1108;&#1096;, &#1097;&#1086; &#1090;&#1072;&#1082;&#1077; HTML &#1110; &#1103;&#1082;&#1091; &#1088;&#1086;&#1083;&#1100; &#1074;&#1110;&#1085; &#1074;&#1110;&#1076;&#1110;&#1075;&#1088;&#1072;&#1108; &#1091; &#1089;&#1090;&#1074;&#1086;&#1088;&#1077;&#1085;&#1085;&#1110; &#1089;&#1072;&#1081;&#1090;&#1110;&#1074;, &#1076;&#1072;&#1074;&#1072;&#1081; &#1088;&#1086;&#1079;&#1073;&#1077;&#1088;&#1077;&#1084;&#1086;&#1089;&#1103; &#1079; &#1081;&#1086;&#1075;&#1086; &#1082;&#1083;&#1102;&#1095;&#1086;&#1074;&#1080;&#1084;&#1080; &#1079;&#1072;&#1074;&#1076;&#1072;&#1085;&#1085;&#1103;&#1084;&#1080;. HTML &#1085;&#1077; &#1087;&#1088;&#1086;&#1089;&#1090;&#1086; &#1089;&#1090;&#1074;&#1086;&#1088;&#1102;&#1108; &laquo;&#1089;&#1082;&#1077;&#1083;&#1077;&#1090;&raquo; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1082;&#1080;, <strong>&#1074;&#1110;&#1085; &#1076;&#1072;&#1108; &#1090;&#1086;&#1073;&#1110; &#1110;&#1085;&#1089;&#1090;&#1088;&#1091;&#1084;&#1077;&#1085;&#1090;&#1080; &#1076;&#1083;&#1103;:<\/strong>\n<\/p>\n<ul>\n<li><strong>&#1057;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1091;&#1074;&#1072;&#1085;&#1085;&#1103; &#1090;&#1072; HTML-&#1088;&#1086;&#1079;&#1084;&#1110;&#1090;&#1082;&#1080;.<\/strong> &#1065;&#1086;&#1073; &#1074;&#1080;&#1079;&#1085;&#1072;&#1095;&#1080;&#1090;&#1080;, &#1103;&#1082; &#1073;&#1091;&#1076;&#1091;&#1090;&#1100; &#1088;&#1086;&#1079;&#1090;&#1072;&#1096;&#1086;&#1074;&#1072;&#1085;&#1110; &#1079;&#1072;&#1075;&#1086;&#1083;&#1086;&#1074;&#1082;&#1080;, &#1089;&#1087;&#1080;&#1089;&#1082;&#1080;, &#1072;&#1073;&#1079;&#1072;&#1094;&#1080;, &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1110; &#1090;&#1072; &#1079;&#1086;&#1073;&#1088;&#1072;&#1078;&#1077;&#1085;&#1085;&#1103;. &#1062;&#1077; &#1103;&#1082; &#1087;&#1077;&#1088;&#1077;&#1089;&#1091;&#1074;&#1072;&#1090;&#1080; &#1084;&#1077;&#1073;&#1083;&#1110; &#1074; &#1082;&#1110;&#1084;&#1085;&#1072;&#1090;&#1110; &ndash; &#1090;&#1080; &#1074;&#1080;&#1088;&#1110;&#1096;&#1091;&#1108;&#1096;, &#1097;&#1086; &#1076;&#1077; &#1089;&#1090;&#1086;&#1111;&#1090;&#1100;.<\/li>\n<li><strong>&#1044;&#1086;&#1076;&#1072;&#1074;&#1072;&#1085;&#1085;&#1103; &#1075;&#1110;&#1087;&#1077;&#1088;&#1087;&#1086;&#1089;&#1080;&#1083;&#1072;&#1085;&#1100;.<\/strong> &#1054;&#1076;&#1085;&#1072; &#1079; &#1075;&#1086;&#1083;&#1086;&#1074;&#1085;&#1080;&#1093; &#1086;&#1089;&#1086;&#1073;&#1083;&#1080;&#1074;&#1086;&#1089;&#1090;&#1077;&#1081; &#1074;&#1077;&#1073;&#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1086;&#1082; &ndash; &#1074;&#1079;&#1072;&#1108;&#1084;&#1086;&#1079;&#1074;&#8217;&#1103;&#1079;&#1086;&#1082; &#1095;&#1077;&#1088;&#1077;&#1079; &#1075;&#1110;&#1087;&#1077;&#1088;&#1087;&#1086;&#1089;&#1080;&#1083;&#1072;&#1085;&#1085;&#1103;. &#1052;&#1080; &#1095;&#1072;&#1089;&#1090;&#1086; &#1074;&#1089;&#1090;&#1072;&#1074;&#1083;&#1103;&#1108;&#1084;&#1086; &#1091; &#1089;&#1074;&#1086;&#1111; &#1089;&#1090;&#1072;&#1090;&#1090;&#1110; &#1087;&#1086;&#1089;&#1080;&#1083;&#1072;&#1085;&#1085;&#1103; &#1085;&#1072; &#1110;&#1085;&#1096;&#1110; &#1084;&#1072;&#1090;&#1077;&#1088;&#1110;&#1072;&#1083;&#1080;. &#1062;&#1077; &#1079;&#1088;&#1091;&#1095;&#1085;&#1086;.<\/li>\n<li><strong>&#1042;&#1073;&#1091;&#1076;&#1086;&#1074;&#1091;&#1074;&#1072;&#1085;&#1085;&#1103; &#1084;&#1091;&#1083;&#1100;&#1090;&#1080;&#1084;&#1077;&#1076;&#1110;&#1072;.<\/strong> &#1061;&#1086;&#1095;&#1077;&#1096; &#1076;&#1086;&#1076;&#1072;&#1090;&#1080; &#1074;&#1110;&#1076;&#1077;&#1086; &#1072;&#1073;&#1086; &#1079;&#1074;&#1091;&#1082;&#1086;&#1074;&#1080;&#1081; &#1092;&#1072;&#1081;&#1083; &#1085;&#1072; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1082;&#1091;? &#1047; HTML &#1094;&#1077; &#1087;&#1088;&#1086;&#1089;&#1090;&#1086;. &#1042;&#1110;&#1085; &#1076;&#1086;&#1079;&#1074;&#1086;&#1083;&#1103;&#1108; &#1110;&#1085;&#1090;&#1077;&#1075;&#1088;&#1091;&#1074;&#1072;&#1090;&#1080; &#1084;&#1091;&#1083;&#1100;&#1090;&#1080;&#1084;&#1077;&#1076;&#1110;&#1081;&#1085;&#1110; &#1077;&#1083;&#1077;&#1084;&#1077;&#1085;&#1090;&#1080; &#1073;&#1077;&#1079;&#1087;&#1086;&#1089;&#1077;&#1088;&#1077;&#1076;&#1085;&#1100;&#1086; &#1091; &#1090;&#1074;&#1110;&#1081; &#1082;&#1086;&#1085;&#1090;&#1077;&#1085;&#1090;, &#1088;&#1086;&#1073;&#1083;&#1103;&#1095;&#1080; &#1089;&#1072;&#1081;&#1090;&#1080; &#1073;&#1110;&#1083;&#1100;&#1096; &#1110;&#1085;&#1090;&#1077;&#1088;&#1072;&#1082;&#1090;&#1080;&#1074;&#1085;&#1080;&#1084;&#1080; &#1090;&#1072; &#1087;&#1088;&#1080;&#1074;&#1072;&#1073;&#1083;&#1080;&#1074;&#1080;&#1084;&#1080;.<\/li>\n<li><strong>&#1057;&#1090;&#1074;&#1086;&#1088;&#1077;&#1085;&#1085;&#1103; &#1092;&#1086;&#1088;&#1084;.<\/strong> HTML &#1076;&#1072;&#1108; &#1084;&#1086;&#1078;&#1083;&#1080;&#1074;&#1110;&#1089;&#1090;&#1100; &#1074;&#1080;&#1082;&#1086;&#1088;&#1080;&#1089;&#1090;&#1086;&#1074;&#1091;&#1074;&#1072;&#1090;&#1080; &#1088;&#1110;&#1079;&#1085;&#1110; &#1092;&#1086;&#1088;&#1084;&#1080; &#1076;&#1083;&#1103; &#1079;&#1073;&#1086;&#1088;&#1091; &#1110;&#1085;&#1092;&#1086;&#1088;&#1084;&#1072;&#1094;&#1110;&#1111; (&#1079;&#1074;&#1086;&#1088;&#1086;&#1090;&#1085;&#1080;&#1081; &#1079;&#1074;&#8217;&#1103;&#1079;&#1086;&#1082;, &#1088;&#1077;&#1108;&#1089;&#1090;&#1088;&#1072;&#1094;&#1110;&#1103;, &#1087;&#1086;&#1096;&#1091;&#1082; &#1087;&#1086; &#1089;&#1072;&#1081;&#1090;&#1091; &#1110; &#1090;. &#1076;.).<\/li>\n<\/ul>\n<p>\n&#1042; HTML &#1108; &#1073;&#1072;&#1079;&#1086;&#1074;&#1110; &#1092;&#1091;&#1085;&#1082;&#1094;&#1110;&#1111; &#1076;&#1083;&#1103; &#1092;&#1086;&#1088;&#1084;&#1072;&#1090;&#1091;&#1074;&#1072;&#1085;&#1085;&#1103; &#1090;&#1077;&#1082;&#1089;&#1090;&#1091;, &#1072;&#1083;&#1077; &#1079;&#1072;&#1079;&#1074;&#1080;&#1095;&#1072;&#1081; &#1081;&#1086;&#1075;&#1086; &#1085;&#1077; &#1079;&#1072;&#1089;&#1090;&#1086;&#1089;&#1086;&#1074;&#1091;&#1102;&#1090;&#1100; &#1076;&#1083;&#1103; &#1094;&#1100;&#1086;&#1075;&#1086;, &#1097;&#1086;&#1073; &#1091;&#1085;&#1080;&#1082;&#1085;&#1091;&#1090;&#1080; &#1087;&#1086;&#1084;&#1080;&#1083;&#1086;&#1082; &#1110; &#1085;&#1077; &#1079;&#1072;&#1093;&#1072;&#1088;&#1072;&#1097;&#1091;&#1074;&#1072;&#1090;&#1080; &#1074;&#1080;&#1093;&#1110;&#1076;&#1085;&#1080;&#1081; &#1082;&#1086;&#1076;. &#1058;&#1086;&#1084;&#1091; &#1079;&#1072; &#1082;&#1088;&#1072;&#1089;&#1091; &#1090;&#1072; &#1110;&#1085;&#1090;&#1077;&#1088;&#1072;&#1082;&#1090;&#1080;&#1074;&#1085;&#1110;&#1089;&#1090;&#1100; &#1096;&#1072;&#1073;&#1083;&#1086;&#1085;&#1091; HTML &#1074;&#1110;&#1076;&#1087;&#1086;&#1074;&#1110;&#1076;&#1072;&#1102;&#1090;&#1100; <a href=\"https:\/\/goit.global\/ua\/articles\/u-chomu-riznytsia-mizh-java-i-javascript\/\">JavaScript<\/a> &#1110; CSS. &#1056;&#1072;&#1079;&#1086;&#1084; &#1111;&#1093; &#1084;&#1086;&#1078;&#1085;&#1072; &#1085;&#1072;&#1079;&#1074;&#1072;&#1090;&#1080; &#1090;&#1088;&#1100;&#1086;&#1084;&#1072; &#1082;&#1080;&#1090;&#1072;&#1084;&#1080; <a href=\"https:\/\/goit.global\/ua\/articles\/frontend-backend-i-fullstack-shcho-tse-take-ta-v-chomu-vidminnosti\/\">Frontend-&#1088;&#1086;&#1079;&#1088;&#1086;&#1073;&#1082;&#1080;<\/a>.<\/p>\n<p><a href=\"https:\/\/m.goit.global\/ua\/new\/?amp%3Butm_medium=articles&#038;amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Butm_campaign=24313\"><\/a>\n<\/p>\n<h3>&#1065;&#1086; &#1090;&#1072;&#1082;&#1077; &#1090;&#1077;&#1075;&#1080; HTML<\/h3>\n<p>\nHTML &#1087;&#1088;&#1072;&#1094;&#1102;&#1108; &#1079;&#1072; &#1076;&#1086;&#1087;&#1086;&#1084;&#1086;&#1075;&#1086;&#1102; &#1090;&#1077;&#1075;&#1110;&#1074;, &#1103;&#1082;&#1110; &#1084;&#1086;&#1078;&#1085;&#1072; &#1087;&#1086;&#1088;&#1110;&#1074;&#1085;&#1103;&#1090;&#1080; &#1079; &#1094;&#1077;&#1075;&#1083;&#1080;&#1085;&#1082;&#1072;&#1084;&#1080; &#1076;&#1083;&#1103; &#1073;&#1091;&#1076;&#1110;&#1074;&#1085;&#1080;&#1094;&#1090;&#1074;&#1072; &#1074;&#1077;&#1073;&#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1086;&#1082;. &#1050;&#1086;&#1078;&#1077;&#1085; &#1090;&#1077;&#1075; &#1074;&#1080;&#1082;&#1086;&#1085;&#1091;&#1108; &#1089;&#1074;&#1086;&#1102; &#1091;&#1085;&#1110;&#1082;&#1072;&#1083;&#1100;&#1085;&#1091; &#1092;&#1091;&#1085;&#1082;&#1094;&#1110;&#1102;. &#1059;&#1103;&#1074;&#1080;, &#1097;&#1086; &#1087;&#1080;&#1096;&#1077;&#1096; &#1110;&#1085;&#1089;&#1090;&#1088;&#1091;&#1082;&#1094;&#1110;&#1102; &#1076;&#1083;&#1103; &#1073;&#1088;&#1072;&#1091;&#1079;&#1077;&#1088;&#1072;, &#1076;&#1077; &#1090;&#1077;&#1075; &ndash; &#1094;&#1077; &#1086;&#1082;&#1088;&#1077;&#1084;&#1072; &#1082;&#1086;&#1084;&#1072;&#1085;&#1076;&#1072;.<\/p>\n<p>&#1058;&#1077;&#1075;&#1080; &#1079;&#1072;&#1079;&#1074;&#1080;&#1095;&#1072;&#1081; &#1081;&#1076;&#1091;&#1090;&#1100; &#1087;&#1072;&#1088;&#1072;&#1084;&#1080;: &#1108; &#1090;&#1077;&#1075;, &#1097;&#1086; &#1074;&#1110;&#1076;&#1082;&#1088;&#1080;&#1074;&#1072;&#1108; &#1110; &#1079;&#1072;&#1082;&#1088;&#1080;&#1074;&#1072;&#1108; HTML-&#1077;&#1083;&#1077;&#1084;&#1077;&#1085;&#1090; (&#1085;&#1072;&#1087;&#1088;&#1080;&#1082;&#1083;&#1072;&#1076;, &lt;p&gt; &#1110; &lt;\/p&gt;). &#1062;&#1077; &#1103;&#1082; &#1087;&#1086;&#1095;&#1072;&#1090;&#1080; &#1081; &#1079;&#1072;&#1082;&#1110;&#1085;&#1095;&#1080;&#1090;&#1080; &#1076;&#1091;&#1084;&#1082;&#1091;. &#1052;&#1110;&#1078; &#1085;&#1080;&#1084;&#1080; &#1079;&#1085;&#1072;&#1093;&#1086;&#1076;&#1080;&#1090;&#1100;&#1089;&#1103; &#1074;&#1084;&#1110;&#1089;&#1090; &ndash; &#1090;&#1077;&#1082;&#1089;&#1090;, &#1079;&#1086;&#1073;&#1088;&#1072;&#1078;&#1077;&#1085;&#1085;&#1103;, &#1087;&#1086;&#1089;&#1080;&#1083;&#1072;&#1085;&#1085;&#1103; &#1090;&#1086;&#1097;&#1086;.<\/p>\n<p><strong>&#1056;&#1086;&#1079;&#1075;&#1083;&#1103;&#1085;&#1077;&#1084;&#1086; &#1076;&#1077;&#1082;&#1110;&#1083;&#1100;&#1082;&#1072; &#1086;&#1089;&#1085;&#1086;&#1074;&#1085;&#1080;&#1093; &#1090;&#1077;&#1075;&#1110;&#1074; HTML:<\/strong>\n<\/p>\n<ul>\n<li>&#1058;&#1077;&#1075;&#1080; &#1074;&#1110;&#1076; <a href=\"https:\/\/goit.global\/ua\/glossary\/tag-headers\/\">&lt;h1&gt; &#1076;&#1086; &lt;h6&gt;<\/a> &#1074;&#1080;&#1082;&#1086;&#1088;&#1080;&#1089;&#1090;&#1086;&#1074;&#1091;&#1102;&#1090;&#1100;&#1089;&#1103; &#1076;&#1083;&#1103; &#1079;&#1072;&#1075;&#1086;&#1083;&#1086;&#1074;&#1082;&#1110;&#1074; (&#1074;&#1110;&#1076; &#1085;&#1072;&#1081;&#1074;&#1072;&#1078;&#1083;&#1080;&#1074;&#1110;&#1096;&#1086;&#1075;&#1086; &#1076;&#1086; &#1085;&#1072;&#1081;&#1084;&#1077;&#1085;&#1096; &#1079;&#1085;&#1072;&#1095;&#1091;&#1097;&#1086;&#1075;&#1086;).<\/li>\n<li>&#1058;&#1077;&#1075; <a href=\"https:\/\/goit.global\/ua\/glossary\/tag-paragraph\/\">&lt;p&gt;<\/a> &#1085;&#1077;&#1086;&#1073;&#1093;&#1110;&#1076;&#1085;&#1080;&#1081; &#1076;&#1083;&#1103; &#1072;&#1073;&#1079;&#1072;&#1094;&#1110;&#1074;.<\/li>\n<li>HTML-&#1090;&#1077;&#1075; <a href=\"https:\/\/goit.global\/ua\/glossary\/tag-posylania\/\">&lt;a&gt;<\/a> &#1074;&#1080;&#1079;&#1085;&#1072;&#1095;&#1072;&#1108; &#1075;&#1110;&#1087;&#1077;&#1088;&#1087;&#1086;&#1089;&#1080;&#1083;&#1072;&#1085;&#1085;&#1103;.<\/li>\n<li>&#1058;&#1077;&#1075; <a href=\"https:\/\/goit.global\/ua\/glossary\/tag-image\/\">&lt;img&gt;<\/a> &#1076;&#1086;&#1076;&#1072;&#1108; &#1082;&#1072;&#1088;&#1090;&#1080;&#1085;&#1082;&#1080;, &#1072; &lt;table&gt; &ndash; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1110;.<\/li>\n<\/ul>\n<p>\n&#1053;&#1077; &#1074;&#1089;&#1110; &#1090;&#1077;&#1075;&#1080; &#1087;&#1086;&#1090;&#1088;&#1110;&#1073;&#1085;&#1086; &#1079;&#1072;&#1082;&#1088;&#1080;&#1074;&#1072;&#1090;&#1080; (&lt;br&gt;, &lt;hr&gt;, &lt;input&gt;, &lt;meta&gt; &#1090;&#1086;&#1097;&#1086;). &#1058;&#1072;&#1082;&#1086;&#1078; &#1074;&#1089;&#1077;&#1088;&#1077;&#1076;&#1080;&#1085;&#1110; &#1090;&#1077;&#1075;&#1110;&#1074; &#1084;&#1086;&#1078;&#1085;&#1072; &#1087;&#1088;&#1086;&#1087;&#1080;&#1089;&#1072;&#1090;&#1080; &#1072;&#1090;&#1088;&#1080;&#1073;&#1091;&#1090;&#1080; HTML. &#1062;&#1077; &#1097;&#1086;&#1089;&#1100; &#1085;&#1072; &#1082;&#1096;&#1090;&#1072;&#1083;&#1090; &#1076;&#1086;&#1076;&#1072;&#1090;&#1082;&#1086;&#1074;&#1080;&#1093; &#1085;&#1072;&#1083;&#1072;&#1096;&#1090;&#1091;&#1074;&#1072;&#1085;&#1100; &#1076;&#1083;&#1103; &#1088;&#1086;&#1079;&#1096;&#1080;&#1088;&#1077;&#1085;&#1085;&#1103; &#1084;&#1086;&#1078;&#1083;&#1080;&#1074;&#1086;&#1089;&#1090;&#1077;&#1081;. <strong>&#1056;&#1086;&#1079;&#1073;&#1077;&#1088;&#1110;&#1084;&#1086; &#1092;&#1088;&#1072;&#1075;&#1084;&#1077;&#1085;&#1090; HTML-&#1082;&#1086;&#1076;&#1091; &lt;a href=&#8221;https:\/\/www.google.com&#8221;&gt; Google&lt;\/a&gt;. &#1054;&#1089;&#1100; &#1103;&#1082; &#1074;&#1110;&#1085; &#1087;&#1088;&#1072;&#1094;&#1102;&#1108;:<\/strong>\n<\/p>\n<ul>\n<li>&lt;a&gt; &ndash; &#1074;&#1110;&#1076;&#1082;&#1088;&#1080;&#1074;&#1072;&#1102;&#1095;&#1080;&#1081; &#1090;&#1077;&#1075; &#1076;&#1083;&#1103; &#1089;&#1090;&#1074;&#1086;&#1088;&#1077;&#1085;&#1085;&#1103; &#1075;&#1110;&#1087;&#1077;&#1088;&#1087;&#1086;&#1089;&#1080;&#1083;&#1072;&#1085;&#1085;&#1103;.<\/li>\n<li>href=&#8221;https:\/\/www.google.com&#8221; &ndash; &#1072;&#1090;&#1088;&#1080;&#1073;&#1091;&#1090; &#1079; &#1072;&#1076;&#1088;&#1077;&#1089;&#1086;&#1102;, &#1085;&#1072; &#1103;&#1082;&#1091; &#1074;&#1086;&#1085;&#1086; &#1074;&#1077;&#1076;&#1077; (&#1091; &#1085;&#1072;&#1089; &#1094;&#1077; &#1075;&#1086;&#1083;&#1086;&#1074;&#1085;&#1072; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1082;&#1072; Google).<\/li>\n<li>Google &ndash; &#1090;&#1077;&#1082;&#1089;&#1090;, &#1097;&#1086; &#1073;&#1091;&#1076;&#1077; &#1074;&#1080;&#1076;&#1085;&#1086; &#1082;&#1086;&#1088;&#1080;&#1089;&#1090;&#1091;&#1074;&#1072;&#1095;&#1072;&#1084;.<\/li>\n<li>&lt;\/a&gt; &ndash; &#1079;&#1072;&#1082;&#1088;&#1080;&#1074;&#1072;&#1102;&#1095;&#1080;&#1081; &#1090;&#1077;&#1075;, &#1097;&#1086; &#1087;&#1086;&#1079;&#1085;&#1072;&#1095;&#1072;&#1108; &#1082;&#1110;&#1085;&#1077;&#1094;&#1100; &#1087;&#1086;&#1089;&#1080;&#1083;&#1072;&#1085;&#1085;&#1103;.<\/li>\n<\/ul>\n<p>\n&#1042;&#1110;&#1076;&#1074;&#1110;&#1076;&#1091;&#1074;&#1072;&#1095;&#1110; &#1089;&#1072;&#1081;&#1090;&#1091; &#1087;&#1086;&#1073;&#1072;&#1095;&#1072;&#1090;&#1100; &#1089;&#1083;&#1086;&#1074;&#1086; &laquo;Google&raquo; &#1110; &#1079;&#1084;&#1086;&#1078;&#1091;&#1090;&#1100; &#1085;&#1072; &#1085;&#1100;&#1086;&#1075;&#1086; &#1082;&#1083;&#1110;&#1082;&#1085;&#1091;&#1090;&#1080; &#1076;&#1083;&#1103; &#1087;&#1077;&#1088;&#1077;&#1093;&#1086;&#1076;&#1091; &#1079;&#1072; &#1074;&#1082;&#1072;&#1079;&#1072;&#1085;&#1080;&#1084; URL. &#1057;&#1087;&#1086;&#1076;&#1110;&#1074;&#1072;&#1108;&#1084;&#1086;&#1089;&#1103;, &#1090;&#1086;&#1073;&#1110; &#1089;&#1090;&#1072;&#1083;&#1086; &#1090;&#1088;&#1086;&#1093;&#1080; &#1079;&#1088;&#1086;&#1079;&#1091;&#1084;&#1110;&#1083;&#1110;&#1096;&#1077;, &#1103;&#1082; &#1087;&#1088;&#1072;&#1094;&#1102;&#1108; HTML. &#1044;&#1110;&#1079;&#1085;&#1072;&#1090;&#1080;&#1089;&#1103; &#1087;&#1088;&#1086; &#1085;&#1100;&#1086;&#1075;&#1086; &#1073;&#1110;&#1083;&#1100;&#1096;&#1077; &#1090;&#1080; &#1079;&#1084;&#1086;&#1078;&#1077;&#1096; &#1085;&#1072; &#1085;&#1072;&#1096;&#1086;&#1084;&#1091; <a href=\"https:\/\/m.goit.global\/ua\/new\/\">&#1073;&#1077;&#1079;&#1087;&#1083;&#1072;&#1090;&#1085;&#1086;&#1084;&#1091; &#1086;&#1085;&#1083;&#1072;&#1081;&#1085;-&#1084;&#1072;&#1088;&#1072;&#1092;&#1086;&#1085;&#1110;<\/a>.\n<\/p>\n<h3>&#1055;&#1083;&#1102;&#1089;&#1080; &#1090;&#1072; &#1084;&#1110;&#1085;&#1091;&#1089;&#1080; HTML<\/h3>\n<p>\n&#1053;&#1077; &#1073;&#1091;&#1076;&#1077;&#1084;&#1086; &#1074;&#1076;&#1072;&#1074;&#1072;&#1090;&#1080;, &#1097;&#1086; &#1084;&#1086;&#1074;&#1072; HTML &#1110;&#1076;&#1077;&#1072;&#1083;&#1100;&#1085;&#1072;. &#1042;&#1086;&#1085;&#1072; &#1084;&#1072;&#1108; &#1089;&#1074;&#1086;&#1111; &#1087;&#1077;&#1088;&#1077;&#1074;&#1072;&#1075;&#1080; &#1090;&#1072; &#1085;&#1077;&#1076;&#1086;&#1083;&#1110;&#1082;&#1080;. <strong>&#1057;&#1077;&#1088;&#1077;&#1076; &#1087;&#1083;&#1102;&#1089;&#1110;&#1074; &#1084;&#1086;&#1078;&#1085;&#1072; &#1074;&#1080;&#1076;&#1110;&#1083;&#1080;&#1090;&#1080;:&nbsp;<\/strong>\n<\/p>\n<ul>\n<li>&#1047;&#1088;&#1086;&#1079;&#1091;&#1084;&#1110;&#1083;&#1080;&#1081; &#1089;&#1080;&#1085;&#1090;&#1072;&#1082;&#1089;&#1080;&#1089;, &#1103;&#1082;&#1080;&#1081; &#1083;&#1077;&#1075;&#1082;&#1086; &#1074;&#1080;&#1074;&#1095;&#1072;&#1090;&#1080; &#1081; &#1074;&#1080;&#1082;&#1086;&#1088;&#1080;&#1089;&#1090;&#1086;&#1074;&#1091;&#1074;&#1072;&#1090;&#1080;.<\/li>\n<li>&#1043;&#1085;&#1091;&#1095;&#1082;&#1110;&#1089;&#1090;&#1100; &#1090;&#1072; &#1091;&#1085;&#1110;&#1074;&#1077;&#1088;&#1089;&#1072;&#1083;&#1100;&#1085;&#1110;&#1089;&#1090;&#1100;. HTML &#1076;&#1086;&#1079;&#1074;&#1086;&#1083;&#1103;&#1108; &#1089;&#1090;&#1074;&#1086;&#1088;&#1102;&#1074;&#1072;&#1090;&#1080; &#1085;&#1072;&#1081;&#1088;&#1110;&#1079;&#1085;&#1086;&#1084;&#1072;&#1085;&#1110;&#1090;&#1085;&#1110;&#1096;&#1110; &#1089;&#1072;&#1081;&#1090;&#1080; &#1110; &#1087;&#1088;&#1072;&#1094;&#1102;&#1074;&#1072;&#1090;&#1080; &#1074; &#1087;&#1072;&#1088;&#1110; &#1079; &#1110;&#1085;&#1096;&#1080;&#1084;&#1080; &#1090;&#1077;&#1093;&#1085;&#1086;&#1083;&#1086;&#1075;&#1110;&#1103;&#1084;&#1080; <a href=\"https:\/\/goit.global\/ua\/courses\/frontend\/?amp%3Butm_medium=articles&#038;amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Butm_campaign=24313\">Frontend-&#1088;&#1086;&#1079;&#1088;&#1086;&#1073;&#1082;&#1080;<\/a>.<\/li>\n<li>&#1052;&#1086;&#1074;&#1072; HTML &#1076;&#1086;&#1073;&#1088;&#1077; &#1087;&#1110;&#1076;&#1090;&#1088;&#1080;&#1084;&#1091;&#1108;&#1090;&#1100;&#1089;&#1103; &#1074;&#1089;&#1110;&#1084;&#1072; &#1089;&#1091;&#1095;&#1072;&#1089;&#1085;&#1080;&#1084;&#1080; &#1073;&#1088;&#1072;&#1091;&#1079;&#1077;&#1088;&#1072;&#1084;&#1080;, &#1097;&#1086; &#1079;&#1072;&#1073;&#1077;&#1079;&#1087;&#1077;&#1095;&#1091;&#1108; &#1096;&#1080;&#1088;&#1086;&#1082;&#1091; &#1076;&#1086;&#1089;&#1090;&#1091;&#1087;&#1085;&#1110;&#1089;&#1090;&#1100; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1086;&#1082; &#1110; &#1111;&#1093; &#1087;&#1088;&#1072;&#1074;&#1080;&#1083;&#1100;&#1085;&#1077; &#1074;&#1110;&#1076;&#1086;&#1073;&#1088;&#1072;&#1078;&#1077;&#1085;&#1085;&#1103; &#1085;&#1072; &#1073;&#1091;&#1076;&#1100;-&#1103;&#1082;&#1086;&#1084;&#1091; &#1087;&#1088;&#1080;&#1089;&#1090;&#1088;&#1086;&#1111;.<\/li>\n<\/ul>\n<p><strong>&#1054;&#1089;&#1100; &#1084;&#1110;&#1085;&#1091;&#1089;&#1080;:<\/strong><\/p>\n<ul>\n<li>&#1054;&#1073;&#1084;&#1077;&#1078;&#1077;&#1085;&#1110; &#1084;&#1086;&#1078;&#1083;&#1080;&#1074;&#1086;&#1089;&#1090;&#1110;. &#1057;&#1072;&#1084; &#1087;&#1086; &#1089;&#1086;&#1073;&#1110; HTML &#1085;&#1077; &#1089;&#1090;&#1080;&#1083;&#1110;&#1079;&#1091;&#1108; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1082;&#1080; &#1087;&#1086;&#1074;&#1085;&#1086;&#1094;&#1110;&#1085;&#1085;&#1086; &#1110; &#1085;&#1077; &#1076;&#1086;&#1076;&#1072;&#1108; &#1111;&#1084; &#1110;&#1085;&#1090;&#1077;&#1088;&#1072;&#1082;&#1090;&#1080;&#1074;&#1085;&#1086;&#1089;&#1090;&#1110;.&nbsp; &#1044;&#1083;&#1103; &#1094;&#1100;&#1086;&#1075;&#1086; &#1079;&#1085;&#1072;&#1076;&#1086;&#1073;&#1083;&#1103;&#1090;&#1100;&#1089;&#1103; CSS &#1110; JavaScript.<\/li>\n<li>&#1057;&#1090;&#1072;&#1088;&#1110; &#1073;&#1088;&#1072;&#1091;&#1079;&#1077;&#1088;&#1080; &#1085;&#1077; &#1079;&#1072;&#1074;&#1078;&#1076;&#1080; &#1087;&#1077;&#1088;&#1077;&#1076;&#1073;&#1072;&#1095;&#1091;&#1074;&#1072;&#1085;&#1086; &#1088;&#1077;&#1072;&#1075;&#1091;&#1102;&#1090;&#1100; &#1085;&#1072; &#1085;&#1086;&#1074;&#1110; HTML-&#1090;&#1077;&#1075;&#1080;.<\/li>\n<\/ul>\n<p>\n&#1053;&#1072; &#1094;&#1100;&#1086;&#1084;&#1091; &#1079;&#1072;&#1082;&#1110;&#1085;&#1095;&#1080;&#1084;&#1086; &#1088;&#1086;&#1079;&#1087;&#1086;&#1074;&#1110;&#1076;&#1072;&#1090;&#1080; &#1087;&#1088;&#1086; HTML &#1110; &#1087;&#1077;&#1088;&#1077;&#1081;&#1076;&#1077;&#1084;&#1086; &#1076;&#1086; CSS. &#1041;&#1091;&#1076;&#1077; &#1094;&#1110;&#1082;&#1072;&#1074;&#1086;!<\/p>\n<figure id=\"attachment_24305\" aria-describedby=\"caption-attachment-24305\" style=\"width: 744px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-24305\" src=\"https:\/\/web-dev-goit.s3.eu-north-1.amazonaws.com\/app\/uploads\/2024\/01\/14001017\/osnovy-html-i-css--300x179.webp\" alt=\"html &#1110; css\" width=\"744\" height=\"443\" srcset=\"https:\/\/web-dev-goit.s3.eu-north-1.amazonaws.com\/app\/uploads\/2024\/01\/14001017\/osnovy-html-i-css--300x179.webp 300w, https:\/\/web-dev-goit.s3.eu-north-1.amazonaws.com\/app\/uploads\/2024\/01\/14001017\/osnovy-html-i-css--768x457.webp 768w, https:\/\/web-dev-goit.s3.eu-north-1.amazonaws.com\/app\/uploads\/2024\/01\/14001017\/osnovy-html-i-css-.webp 991w\" sizes=\"auto, (max-width: 744px) 100vw, 744px\" \/><figcaption id=\"caption-attachment-24305\" class=\"wp-caption-text\"><span style=\"color: #808080\"><em>&#1065;&#1086;&#1073; &#1087;&#1086;&#1095;&#1072;&#1090;&#1080; &#1074;&#1095;&#1080;&#1090;&#1080; HTML &#1110; CSS, &#1079;&#1072;&#1087;&#1080;&#1096;&#1080;&#1089;&#1100; &#1085;&#1072; <a href=\"https:\/\/m.goit.global\/ua\/new\/?amp%3Butm_medium=articles&#038;amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Butm_campaign=24313\">&#1073;&#1077;&#1079;&#1087;&#1083;&#1072;&#1090;&#1085;&#1080;&#1081; &#1086;&#1085;&#1083;&#1072;&#1081;&#1085;-&#1084;&#1072;&#1088;&#1072;&#1092;&#1086;&#1085;<\/a> &#1074;&#1110;&#1076; GoIT.<\/em><\/span><\/figcaption><\/figure>\n<h2>&#1065;&#1086; &#1090;&#1072;&#1082;&#1077; CSS &#1110; &#1103;&#1082; &#1074;&#1110;&#1085; &#1074;&#1080;&#1082;&#1086;&#1088;&#1080;&#1089;&#1090;&#1086;&#1074;&#1091;&#1108;&#1090;&#1100;&#1089;&#1103;<\/h2>\n<p>\nCSS (&#1082;&#1072;&#1089;&#1082;&#1072;&#1076;&#1085;&#1110; &#1090;&#1072;&#1073;&#1083;&#1080;&#1094;&#1110; &#1089;&#1090;&#1080;&#1083;&#1110;&#1074;) &#1074;&#1110;&#1076;&#1087;&#1086;&#1074;&#1110;&#1076;&#1072;&#1108; &#1079;&#1072; &#1079;&#1086;&#1074;&#1085;&#1110;&#1096;&#1085;&#1110;&#1081; &#1074;&#1080;&#1075;&#1083;&#1103;&#1076; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1082;&#1080;. &#1071;&#1082;&#1097;&#1086; &#1091;&#1103;&#1074;&#1080;&#1090;&#1080; HTML &#1091; &#1088;&#1086;&#1083;&#1110; &#1084;&#1072;&#1085;&#1077;&#1082;&#1077;&#1085;&#1072;, &#1090;&#1086; CSS &ndash; &#1094;&#1077; &#1086;&#1076;&#1103;&#1075;, &#1103;&#1082;&#1080;&#1081; &#1088;&#1086;&#1073;&#1080;&#1090;&#1100; &#1081;&#1086;&#1075;&#1086; &#1082;&#1088;&#1072;&#1089;&#1080;&#1074;&#1080;&#1084; &#1110; &#1089;&#1090;&#1080;&#1083;&#1100;&#1085;&#1080;&#1084;.<\/p>\n<p>CSS &#1076;&#1077;&#1082;&#1086;&#1088;&#1091;&#1108; &#1077;&#1083;&#1077;&#1084;&#1077;&#1085;&#1090;&#1080;, &#1089;&#1090;&#1074;&#1086;&#1088;&#1077;&#1085;&#1110; &#1079;&#1072; &#1076;&#1086;&#1087;&#1086;&#1084;&#1086;&#1075;&#1086;&#1102; HTML. &#1053;&#1072;&#1087;&#1088;&#1080;&#1082;&#1083;&#1072;&#1076;, &#1079;&#1084;&#1110;&#1085;&#1102;&#1108; &#1082;&#1086;&#1083;&#1110;&#1088; &#1090;&#1077;&#1082;&#1089;&#1090;&#1091;, &#1088;&#1086;&#1079;&#1084;&#1110;&#1088; &#1096;&#1088;&#1080;&#1092;&#1090;&#1091;, &#1074;&#1110;&#1076;&#1089;&#1090;&#1072;&#1085;&#1100; &#1084;&#1110;&#1078; &#1072;&#1073;&#1079;&#1072;&#1094;&#1072;&#1084;&#1080;, &#1076;&#1086;&#1076;&#1072;&#1108; &#1072;&#1085;&#1110;&#1084;&#1072;&#1094;&#1110;&#1102; &#1090;&#1072; &#1073;&#1072;&#1075;&#1072;&#1090;&#1086; &#1110;&#1085;&#1096;&#1086;&#1075;&#1086;. CSS &#1074;&#1079;&#1072;&#1108;&#1084;&#1086;&#1076;&#1110;&#1108; &#1079; HTML, &#1074;&#1080;&#1082;&#1086;&#1088;&#1080;&#1089;&#1090;&#1086;&#1074;&#1091;&#1102;&#1095;&#1080; &#1089;&#1077;&#1083;&#1077;&#1082;&#1090;&#1086;&#1088;&#1080; &ndash; &#1086;&#1089;&#1086;&#1073;&#1083;&#1080;&#1074;&#1110; &#1087;&#1088;&#1072;&#1074;&#1080;&#1083;&#1072;, &#1103;&#1082;&#1110; &#1074;&#1080;&#1079;&#1085;&#1072;&#1095;&#1072;&#1102;&#1090;&#1100;, &#1076;&#1086; &#1103;&#1082;&#1080;&#1093; &#1082;&#1086;&#1084;&#1087;&#1086;&#1085;&#1077;&#1085;&#1090;&#1110;&#1074; &#1110; &#1103;&#1082; &#1087;&#1088;&#1080;&#1082;&#1088;&#1091;&#1095;&#1091;&#1074;&#1072;&#1090;&#1080; &#1089;&#1090;&#1080;&#1083;&#1110;.<\/p>\n<p><strong>&#1057;&#1082;&#1072;&#1078;&#1110;&#1084;&#1086;, &#1091; &#1085;&#1072;&#1089; &#1108; HTML-&#1077;&#1083;&#1077;&#1084;&#1077;&#1085;&#1090; &lt;p&gt; (&#1072;&#1073;&#1079;&#1072;&#1094;). &#1047;&#1072; &#1076;&#1086;&#1087;&#1086;&#1084;&#1086;&#1075;&#1086;&#1102; CSS &#1084;&#1080; &#1084;&#1086;&#1078;&#1077;&#1084;&#1086; &#1079;&#1088;&#1086;&#1073;&#1080;&#1090;&#1080; &#1090;&#1077;&#1082;&#1089;&#1090; &#1091; &#1085;&#1100;&#1086;&#1084;&#1091; &#1095;&#1077;&#1088;&#1074;&#1086;&#1085;&#1080;&#1084; &#1110; &#1079;&#1073;&#1110;&#1083;&#1100;&#1096;&#1080;&#1090;&#1080; &#1096;&#1088;&#1080;&#1092;&#1090;, &#1076;&#1086;&#1076;&#1072;&#1074;&#1096;&#1080; &#1090;&#1072;&#1082;&#1080;&#1081; CSS-&#1089;&#1077;&#1083;&#1077;&#1082;&#1090;&#1086;&#1088;:<\/strong><\/p>\n<p><strong>p {<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;color: red;<\/strong><\/p>\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;font-size: 16px;<\/strong><\/p>\n<p><strong>}<\/strong><\/p>\n<p>&#1057;&#1072;&#1081;&#1090;&#1080; &#1073;&#1077;&#1079; CSS &#1084;&#1072;&#1083;&#1080; &#1073; &#1078;&#1072;&#1093;&#1083;&#1080;&#1074;&#1086; &#1086;&#1076;&#1085;&#1086;&#1084;&#1072;&#1085;&#1110;&#1090;&#1085;&#1080;&#1081; &#1074;&#1080;&#1075;&#1083;&#1103;&#1076;. &#1052;&#1086;&#1074;&#1072; CSS &#1085;&#1072;&#1076;&#1072;&#1108; &#1111;&#1084; &#1110;&#1085;&#1076;&#1080;&#1074;&#1110;&#1076;&#1091;&#1072;&#1083;&#1100;&#1085;&#1086;&#1089;&#1090;&#1110; &#1090;&#1072; &#1087;&#1086;&#1082;&#1088;&#1072;&#1097;&#1091;&#1108; &#1082;&#1086;&#1088;&#1080;&#1089;&#1090;&#1091;&#1074;&#1072;&#1094;&#1100;&#1082;&#1080;&#1081; &#1076;&#1086;&#1089;&#1074;&#1110;&#1076; (&#1074;&#1072;&#1078;&#1083;&#1080;&#1074;&#1086; &#1076;&#1083;&#1103; <a href=\"https:\/\/goit.global\/ua\/articles\/ui-ux-dyzayner-shcho-maie-vmity-i-iak-nym-staty\/\">UI\/UX-&#1076;&#1080;&#1079;&#1072;&#1081;&#1085;&#1077;&#1088;&#1110;&#1074;<\/a>). &#1058;&#1072;&#1082;&#1086;&#1078; &#1074;&#1086;&#1085;&#1072; &#1076;&#1086;&#1087;&#1086;&#1084;&#1072;&#1075;&#1072;&#1108; &#1079;&#1088;&#1086;&#1073;&#1080;&#1090;&#1080; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1082;&#1080; &#1076;&#1086;&#1089;&#1090;&#1091;&#1087;&#1085;&#1110;&#1096;&#1080;&#1084;&#1080; &#1090;&#1072; &#1079;&#1088;&#1091;&#1095;&#1085;&#1110;&#1096;&#1080;&#1084;&#1080; &#1076;&#1083;&#1103; &#1088;&#1110;&#1079;&#1085;&#1080;&#1093; &#1087;&#1088;&#1080;&#1089;&#1090;&#1088;&#1086;&#1111;&#1074;, &#1074;&#1110;&#1076; &#1082;&#1086;&#1084;&#1087;&#8217;&#1102;&#1090;&#1077;&#1088;&#1110;&#1074; &#1076;&#1086; &#1089;&#1084;&#1072;&#1088;&#1090;&#1092;&#1086;&#1085;&#1110;&#1074;.<\/p>\n<p>&#1071;&#1082;&#1097;&#1086; &#1090;&#1080; &#1074;&#1078;&#1077; &#1079;&#1085;&#1072;&#1081;&#1086;&#1084;&#1080;&#1081; &#1079; &#1086;&#1089;&#1085;&#1086;&#1074;&#1072;&#1084;&#1080; HTML &#1110; CSS, &#1079;&#1072;&#1087;&#1080;&#1096;&#1080;&#1089;&#1100; &#1085;&#1072; &#1085;&#1072;&#1096; <a href=\"https:\/\/lms-mc-lp-css-ua.goit.global\/?amp%3Butm_medium=articles&#038;amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Butm_campaign=24313\">&#1084;&#1110;&#1085;&#1110;&#1082;&#1091;&#1088;&#1089; CSS Grid<\/a>, &#1097;&#1086;&#1073; &#1087;&#1088;&#1086;&#1082;&#1072;&#1095;&#1072;&#1090;&#1080; &#1085;&#1072;&#1074;&#1080;&#1095;&#1082;&#1080; &#1074;&#1077;&#1088;&#1089;&#1090;&#1082;&#1080; &#1089;&#1082;&#1083;&#1072;&#1076;&#1085;&#1080;&#1093; &#1084;&#1072;&#1082;&#1077;&#1090;&#1110;&#1074; &#1110; &#1076;&#1086;&#1076;&#1072;&#1090;&#1080; &#1074; &#1087;&#1086;&#1088;&#1090;&#1092;&#1086;&#1083;&#1110;&#1086; &#1089;&#1072;&#1081;&#1090; &#1079; &#1072;&#1076;&#1072;&#1087;&#1090;&#1080;&#1074;&#1085;&#1080;&#1084; &#1083;&#1077;&#1081;&#1072;&#1091;&#1090;&#1086;&#1084;.<\/p>\n<p><a href=\"https:\/\/uxdesign-m-lp-ua.goit.global\/?amp%3Butm_medium=articles&#038;amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Butm_campaign=24313\"><\/a>\n<\/p>\n<h3>&#1071;&#1082;&#1110; &#1079;&#1072;&#1074;&#1076;&#1072;&#1085;&#1085;&#1103; &#1084;&#1086;&#1078;&#1085;&#1072; &#1074;&#1080;&#1082;&#1086;&#1085;&#1091;&#1074;&#1072;&#1090;&#1080; &#1079;&#1072; &#1076;&#1086;&#1087;&#1086;&#1084;&#1086;&#1075;&#1086;&#1102; CSS<\/h3>\n<p>\n&#1058;&#1077;&#1087;&#1077;&#1088; &#1090;&#1080; &#1088;&#1086;&#1079;&#1091;&#1084;&#1110;&#1108;&#1096;, &#1097;&#1086; &#1090;&#1072;&#1082;&#1077; CSS &#1110; &#1103;&#1082; &#1074;&#1110;&#1085; &#1076;&#1086;&#1087;&#1086;&#1074;&#1085;&#1102;&#1108; HTML. <strong>&#1047; &#1094;&#1080;&#1084; &#1110;&#1085;&#1089;&#1090;&#1088;&#1091;&#1084;&#1077;&#1085;&#1090;&#1086;&#1084; &#1090;&#1080; &#1079;&#1084;&#1086;&#1078;&#1077;&#1096;:&nbsp;<\/strong>\n<\/p>\n<ul>\n<li>&#1047;&#1084;&#1110;&#1085;&#1102;&#1074;&#1072;&#1090;&#1080; &#1079;&#1086;&#1074;&#1085;&#1110;&#1096;&#1085;&#1110;&#1081; &#1074;&#1080;&#1075;&#1083;&#1103;&#1076; &#1090;&#1077;&#1082;&#1089;&#1090;&#1091; (&#1082;&#1086;&#1083;&#1110;&#1088;, &#1096;&#1088;&#1080;&#1092;&#1090;, &#1084;&#1110;&#1078;&#1088;&#1103;&#1076;&#1082;&#1086;&#1074;&#1080;&#1081; &#1110;&#1085;&#1090;&#1077;&#1088;&#1074;&#1072;&#1083;, &#1074;&#1080;&#1088;&#1110;&#1074;&#1085;&#1102;&#1074;&#1072;&#1085;&#1085;&#1103; &#1090;&#1086;&#1097;&#1086;).<\/li>\n<li>&#1050;&#1077;&#1088;&#1091;&#1074;&#1072;&#1090;&#1080; &#1092;&#1086;&#1085;&#1086;&#1084; HTML-&#1077;&#1083;&#1077;&#1084;&#1077;&#1085;&#1090;&#1110;&#1074;.<\/li>\n<li>&#1057;&#1090;&#1074;&#1086;&#1088;&#1102;&#1074;&#1072;&#1090;&#1080; &#1072;&#1076;&#1072;&#1087;&#1090;&#1080;&#1074;&#1085;&#1080;&#1081; &#1076;&#1080;&#1079;&#1072;&#1081;&#1085;.<\/li>\n<li>&#1056;&#1086;&#1079;&#1088;&#1086;&#1073;&#1083;&#1103;&#1090;&#1080; &#1079;&#1072;&#1075;&#1072;&#1083;&#1100;&#1085;&#1080;&#1081; &#1084;&#1072;&#1082;&#1077;&#1090; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1082;&#1080; &#1076;&#1083;&#1103; &#1095;&#1110;&#1090;&#1082;&#1086;&#1111; &#1090;&#1072; &#1086;&#1088;&#1075;&#1072;&#1085;&#1110;&#1079;&#1086;&#1074;&#1072;&#1085;&#1086;&#1111; &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1080; &#1082;&#1086;&#1085;&#1090;&#1077;&#1085;&#1090;&#1091; (&#1074;&#1082;&#1083;&#1102;&#1095;&#1085;&#1086; &#1079;&#1110; &#1089;&#1090;&#1086;&#1074;&#1087;&#1095;&#1080;&#1082;&#1072;&#1084;&#1080;, &#1074;&#1110;&#1076;&#1089;&#1090;&#1091;&#1087;&#1072;&#1084;&#1080; &#1090;&#1072; &#1084;&#1077;&#1078;&#1072;&#1084;&#1080;).<\/li>\n<li>&#1044;&#1086;&#1076;&#1072;&#1074;&#1072;&#1090;&#1080; &#1072;&#1085;&#1110;&#1084;&#1072;&#1094;&#1110;&#1102;, &#1087;&#1077;&#1088;&#1077;&#1093;&#1086;&#1076;&#1080; &#1090;&#1072; &#1077;&#1092;&#1077;&#1082;&#1090;&#1080;.<\/li>\n<li>&#1058;&#1086;&#1095;&#1085;&#1086; &#1088;&#1086;&#1079;&#1084;&#1110;&#1097;&#1091;&#1074;&#1072;&#1090;&#1080; &#1077;&#1083;&#1077;&#1084;&#1077;&#1085;&#1090;&#1080; &#1085;&#1072; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1094;&#1110;, &#1074;&#1080;&#1079;&#1085;&#1072;&#1095;&#1072;&#1102;&#1095;&#1080; &#1111;&#1093;&#1085;&#1110; &#1088;&#1086;&#1079;&#1084;&#1110;&#1088;&#1080; &#1090;&#1072; &#1087;&#1088;&#1086;&#1087;&#1086;&#1088;&#1094;&#1110;&#1111;.<\/li>\n<\/ul>\n<p>\n&#1047;&#1072; &#1076;&#1086;&#1087;&#1086;&#1084;&#1086;&#1075;&#1086;&#1102; &#1084;&#1086;&#1074;&#1080; CSS &#1090;&#1086;&#1073;&#1110; &#1074;&#1076;&#1072;&#1089;&#1090;&#1100;&#1089;&#1103; &#1089;&#1090;&#1074;&#1086;&#1088;&#1102;&#1074;&#1072;&#1090;&#1080; &#1076;&#1086;&#1074;&#1086;&#1083;&#1110; &#1089;&#1082;&#1083;&#1072;&#1076;&#1085;&#1110; &#1090;&#1072; &#1087;&#1088;&#1080;&#1074;&#1072;&#1073;&#1083;&#1080;&#1074;&#1110; &#1089;&#1072;&#1081;&#1090;&#1080;. &#1050;&#1086;&#1088;&#1080;&#1089;&#1085;&#1072; &#1096;&#1090;&#1091;&#1082;&#1072;! &#1052;&#1086;&#1078;&#1083;&#1080;&#1074;&#1086;, &#1091; &#1085;&#1072;&#1089;&#1090;&#1091;&#1087;&#1085;&#1080;&#1093; &#1089;&#1090;&#1072;&#1090;&#1090;&#1103;&#1093; &#1084;&#1080; &#1076;&#1086;&#1082;&#1083;&#1072;&#1076;&#1085;&#1110;&#1096;&#1077; &#1088;&#1086;&#1079;&#1087;&#1086;&#1074;&#1110;&#1084;&#1086; &#1087;&#1088;&#1086; &#1090;&#1077;, &#1103;&#1082; &#1087;&#1088;&#1072;&#1094;&#1102;&#1074;&#1072;&#1090;&#1080; &#1079; CSS. &#1071;&#1082;&#1097;&#1086; &#1093;&#1086;&#1095;&#1077;&#1096; &#1076;&#1110;&#1079;&#1085;&#1072;&#1090;&#1080;&#1089;&#1103; &#1073;&#1110;&#1083;&#1100;&#1096;&#1077; &#1074;&#1078;&#1077; &#1079;&#1072;&#1088;&#1072;&#1079;, &#1079;&#1072;&#1087;&#1088;&#1086;&#1096;&#1091;&#1108;&#1084;&#1086; &#1085;&#1072; &#1085;&#1072;&#1096; &#1073;&#1077;&#1079;&#1087;&#1083;&#1072;&#1090;&#1085;&#1080;&#1081; &#1084;&#1072;&#1088;&#1072;&#1092;&#1086;&#1085;.<\/p>\n<p><a href=\"https:\/\/m.goit.global\/ua\/new\/?amp%3Butm_medium=articles&#038;amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Butm_campaign=24313\"><\/a>\n<\/p>\n<h3>&#1055;&#1077;&#1088;&#1077;&#1074;&#1072;&#1075;&#1080; &#1090;&#1072; &#1085;&#1077;&#1076;&#1086;&#1083;&#1110;&#1082;&#1080; CSS<\/h3>\n<p>\n&#1071;&#1082; &#1110; &#1073;&#1091;&#1076;&#1100;-&#1103;&#1082;&#1080;&#1081; &#1110;&#1085;&#1089;&#1090;&#1088;&#1091;&#1084;&#1077;&#1085;&#1090;, CSS &#1084;&#1072;&#1108; &#1089;&#1074;&#1086;&#1111; &#1087;&#1083;&#1102;&#1089;&#1080; &#1110; &#1084;&#1110;&#1085;&#1091;&#1089;&#1080;. &#1047; &#1085;&#1080;&#1084; &#1090;&#1080; &#1079;&#1084;&#1086;&#1078;&#1077;&#1096; &#1079;&#1084;&#1110;&#1085;&#1102;&#1074;&#1072;&#1090;&#1080; &#1089;&#1090;&#1080;&#1083;&#1100; &#1077;&#1083;&#1077;&#1084;&#1077;&#1085;&#1090;&#1110;&#1074; &#1085;&#1072; &#1074;&#1089;&#1110;&#1081; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1094;&#1110;, &#1087;&#1077;&#1088;&#1077;&#1087;&#1080;&#1089;&#1091;&#1102;&#1095;&#1080; &#1090;&#1110;&#1083;&#1100;&#1082;&#1080; &#1086;&#1076;&#1085;&#1077; &#1087;&#1088;&#1072;&#1074;&#1080;&#1083;&#1086; &#1074; CSS-&#1092;&#1072;&#1081;&#1083;&#1110;, &#1097;&#1086; &#1077;&#1082;&#1086;&#1085;&#1086;&#1084;&#1080;&#1090;&#1100; &#1095;&#1072;&#1089; &#1110; &#1079;&#1091;&#1089;&#1080;&#1083;&#1083;&#1103;. &#1056;&#1086;&#1079;&#1088;&#1086;&#1073;&#1083;&#1103;&#1090;&#1080; &#1076;&#1080;&#1079;&#1072;&#1081;&#1085;&#1080;, &#1103;&#1082;&#1110; &#1087;&#1110;&#1076;&#1083;&#1072;&#1096;&#1090;&#1086;&#1074;&#1091;&#1102;&#1090;&#1100;&#1089;&#1103; &#1087;&#1110;&#1076; &#1088;&#1086;&#1079;&#1084;&#1110;&#1088;&#1080; &#1077;&#1082;&#1088;&#1072;&#1085;&#1110;&#1074; &#1090;&#1072; &#1087;&#1088;&#1080;&#1089;&#1090;&#1088;&#1086;&#1111;&#1074;. &#1056;&#1086;&#1073;&#1080;&#1090;&#1080; &#1089;&#1090;&#1086;&#1088;&#1110;&#1085;&#1082;&#1080; &#1089;&#1090;&#1088;&#1091;&#1082;&#1090;&#1091;&#1088;&#1086;&#1074;&#1072;&#1085;&#1080;&#1084;&#1080;, &#1072;&#1082;&#1091;&#1088;&#1072;&#1090;&#1085;&#1080;&#1084;&#1080; &#1090;&#1072; &#1079;&#1088;&#1091;&#1095;&#1085;&#1080;&#1084;&#1080;. &#1045;&#1082;&#1089;&#1087;&#1077;&#1088;&#1080;&#1084;&#1077;&#1085;&#1090;&#1091;&#1074;&#1072;&#1090;&#1080; &#1110; &#1087;&#1086;&#1089;&#1090;&#1110;&#1081;&#1085;&#1086; &#1087;&#1086;&#1082;&#1088;&#1072;&#1097;&#1091;&#1074;&#1072;&#1090;&#1080; &#1082;&#1086;&#1088;&#1080;&#1089;&#1090;&#1091;&#1074;&#1072;&#1094;&#1100;&#1082;&#1080;&#1081; &#1076;&#1086;&#1089;&#1074;&#1110;&#1076;. &#1062;&#1077; &#1081;&#1086;&#1075;&#1086; &#1087;&#1077;&#1088;&#1077;&#1074;&#1072;&#1075;&#1080;.<\/p>\n<p>&#1044;&#1086; &#1085;&#1077;&#1076;&#1086;&#1083;&#1110;&#1082;&#1110;&#1074; &#1084;&#1086;&#1078;&#1085;&#1072; &#1074;&#1110;&#1076;&#1085;&#1077;&#1089;&#1090;&#1080; &#1090;&#1077;, &#1097;&#1086; &#1073;&#1088;&#1072;&#1091;&#1079;&#1077;&#1088;&#1080; &#1087;&#1086;-&#1088;&#1110;&#1079;&#1085;&#1086;&#1084;&#1091; &#1110;&#1085;&#1090;&#1077;&#1088;&#1087;&#1088;&#1077;&#1090;&#1091;&#1102;&#1090;&#1100; CSS-&#1082;&#1086;&#1076; (&#1110;&#1085;&#1086;&#1076;&#1110; &#1087;&#1086;&#1090;&#1088;&#1110;&#1073;&#1085;&#1110; &#1076;&#1086;&#1076;&#1072;&#1090;&#1082;&#1086;&#1074;&#1110; &#1079;&#1091;&#1089;&#1080;&#1083;&#1083;&#1103; &#1076;&#1083;&#1103; &#1079;&#1072;&#1073;&#1077;&#1079;&#1087;&#1077;&#1095;&#1077;&#1085;&#1085;&#1103; &#1089;&#1091;&#1084;&#1110;&#1089;&#1085;&#1086;&#1089;&#1090;&#1110;). &#1040; &#1097;&#1077; &#1074;&#1077;&#1083;&#1080;&#1082;&#1110; CSS-&#1092;&#1072;&#1081;&#1083;&#1080; &#1089;&#1082;&#1083;&#1072;&#1076;&#1085;&#1110; &#1074; &#1087;&#1110;&#1076;&#1090;&#1088;&#1080;&#1084;&#1094;&#1110;, &#1086;&#1089;&#1086;&#1073;&#1083;&#1080;&#1074;&#1086; &#1091; &#1084;&#1072;&#1089;&#1096;&#1090;&#1072;&#1073;&#1085;&#1080;&#1093; &#1087;&#1088;&#1086;&#1108;&#1082;&#1090;&#1072;&#1093;. &#1055;&#1110;&#1089;&#1083;&#1103; &#1087;&#1086;&#1095;&#1072;&#1090;&#1082;&#1091; &#1088;&#1086;&#1073;&#1086;&#1090;&#1080; &#1079; CSS &#1090;&#1080; &#1089;&#1092;&#1086;&#1088;&#1084;&#1091;&#1108;&#1096; &#1074;&#1083;&#1072;&#1089;&#1085;&#1091; &#1076;&#1091;&#1084;&#1082;&#1091; &#1087;&#1088;&#1086; &#1081;&#1086;&#1075;&#1086; &#1089;&#1080;&#1083;&#1100;&#1085;&#1110; &#1090;&#1072; &#1089;&#1083;&#1072;&#1073;&#1082;&#1110; &#1089;&#1090;&#1086;&#1088;&#1086;&#1085;&#1080;.\n<\/p>\n<h2>&#1050;&#1086;&#1084;&#1091; &#1110; &#1076;&#1083;&#1103; &#1095;&#1086;&#1075;&#1086; &#1087;&#1086;&#1090;&#1088;&#1110;&#1073;&#1085;&#1086; &#1074;&#1095;&#1080;&#1090;&#1080; HTML &#1110; CSS<\/h2>\n<p>\n&#1055;&#1110;&#1076;&#1073;&#1080;&#1074;&#1072;&#1102;&#1095;&#1080; &#1087;&#1110;&#1076;&#1089;&#1091;&#1084;&#1086;&#1082;, &#1089;&#1090;&#1072;&#1108; &#1079;&#1088;&#1086;&#1079;&#1091;&#1084;&#1110;&#1083;&#1086;, &#1097;&#1086; HTML &#1110; CSS &ndash; &#1094;&#1077; &#1092;&#1091;&#1085;&#1076;&#1072;&#1084;&#1077;&#1085;&#1090;&#1072;&#1083;&#1100;&#1085;&#1110; &#1085;&#1072;&#1074;&#1080;&#1095;&#1082;&#1080;, &#1103;&#1082;&#1110; &#1073;&#1091;&#1076;&#1091;&#1090;&#1100; &#1082;&#1086;&#1088;&#1080;&#1089;&#1085;&#1080;&#1084;&#1080; &#1085;&#1077; &#1090;&#1110;&#1083;&#1100;&#1082;&#1080; Frontend-&#1088;&#1086;&#1079;&#1088;&#1086;&#1073;&#1085;&#1080;&#1082;&#1072;&#1084; &#1095;&#1080; Fullstack-&#1087;&#1088;&#1086;&#1075;&#1088;&#1072;&#1084;&#1110;&#1089;&#1090;&#1072;&#1084;, &#1072; &#1081; &#1096;&#1080;&#1088;&#1086;&#1082;&#1086;&#1084;&#1091; &#1082;&#1086;&#1083;&#1091; IT-&#1092;&#1072;&#1093;&#1110;&#1074;&#1094;&#1110;&#1074;, &#1074;&#1082;&#1083;&#1102;&#1095;&#1085;&#1086; &#1079; <a href=\"https:\/\/qa-m-lp-ua.goit.global\/?amp%3Butm_medium=articles&#038;amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Butm_campaign=24313\">&#1090;&#1077;&#1089;&#1090;&#1091;&#1074;&#1072;&#1083;&#1100;&#1085;&#1080;&#1082;&#1072;&#1084;&#1080;<\/a>, UI\/UX-&#1076;&#1080;&#1079;&#1072;&#1081;&#1085;&#1077;&#1088;&#1072;&#1084;&#1080; &#1090;&#1072; &#1085;&#1072;&#1074;&#1110;&#1090;&#1100; &#1084;&#1072;&#1088;&#1082;&#1077;&#1090;&#1086;&#1083;&#1086;&#1075;&#1072;&#1084;&#1080;.<\/p>\n<p>&#1042;&#1080;&#1074;&#1095;&#1077;&#1085;&#1085;&#1103; HTML &#1110; CSS &ndash; &#1087;&#1077;&#1088;&#1096;&#1080;&#1081; &#1110; &#1085;&#1072;&#1081;&#1074;&#1072;&#1078;&#1083;&#1080;&#1074;&#1110;&#1096;&#1080;&#1081; &#1082;&#1088;&#1086;&#1082; &#1076;&#1083;&#1103; &#1090;&#1080;&#1093;, &#1093;&#1090;&#1086; &#1093;&#1086;&#1095;&#1077; &#1087;&#1086;&#1073;&#1091;&#1076;&#1091;&#1074;&#1072;&#1090;&#1080; &#1082;&#1072;&#1088;&#8217;&#1108;&#1088;&#1091; &#1074; &#1088;&#1086;&#1079;&#1088;&#1086;&#1073;&#1094;&#1110; &#1090;&#1072; &#1076;&#1080;&#1079;&#1072;&#1081;&#1085;&#1110;. &#1042;&#1086;&#1085;&#1080; &#1074;&#1110;&#1076;&#1095;&#1080;&#1085;&#1103;&#1102;&#1090;&#1100; &#1076;&#1074;&#1077;&#1088;&#1110; &#1076;&#1086; &#1089;&#1082;&#1083;&#1072;&#1076;&#1085;&#1110;&#1096;&#1080;&#1093; &#1090;&#1077;&#1093;&#1085;&#1086;&#1083;&#1086;&#1075;&#1110;&#1081; &#1110; &#1084;&#1086;&#1074; &#1087;&#1088;&#1086;&#1075;&#1088;&#1072;&#1084;&#1091;&#1074;&#1072;&#1085;&#1085;&#1103;.&nbsp; &#1054;&#1089;&#1085;&#1086;&#1074;&#1080; HTML &#1110; CSS &#1089;&#1090;&#1072;&#1085;&#1091;&#1090;&#1100; &#1085;&#1077;&#1074;&#1110;&#1076;&#1076;&#1110;&#1083;&#1100;&#1085;&#1086;&#1102; &#1095;&#1072;&#1089;&#1090;&#1080;&#1085;&#1086;&#1102; &#1090;&#1074;&#1086;&#1075;&#1086; &#1110;&#1085;&#1089;&#1090;&#1088;&#1091;&#1084;&#1077;&#1085;&#1090;&#1072;&#1088;&#1110;&#1102;.<\/p>\n<p>&#1055;&#1088;&#1080;&#1093;&#1086;&#1076;&#1100; &#1085;&#1072; &#1085;&#1072;&#1096; &#1073;&#1077;&#1079;&#1087;&#1083;&#1072;&#1090;&#1085;&#1080;&#1081; &#1086;&#1085;&#1083;&#1072;&#1081;&#1085;-&#1084;&#1072;&#1088;&#1072;&#1092;&#1086;&#1085;, &#1097;&#1086;&#1073; &#1079;&#1088;&#1086;&#1073;&#1080;&#1090;&#1080; &#1089;&#1074;&#1110;&#1081; &#1087;&#1077;&#1088;&#1096;&#1080;&#1081; &#1089;&#1072;&#1081;&#1090; &#1085;&#1072; HTML &#1110; CSS &#1079; &#1085;&#1091;&#1083;&#1103;. &#1040;&#1073;&#1086; &#1086;&#1076;&#1088;&#1072;&#1079;&#1091; &#1079;&#1072;&#1087;&#1080;&#1089;&#1091;&#1081;&#1089;&#1103; &#1085;&#1072; &#1082;&#1091;&#1088;&#1089; &#1110;&#1079; <a href=\"https:\/\/goit.global\/ua\/courses\/frontend\/?amp%3Butm_medium=articles&#038;amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Butm_campaign=24313\">Frontend<\/a>, <a href=\"https:\/\/goit.global\/ua\/courses\/fullstack\/?amp%3Butm_medium=articles&#038;amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Butm_campaign=24313\">Fullstack <\/a>&#1095;&#1080; <a href=\"https:\/\/goit.global\/ua\/courses\/design\/?amp%3Butm_medium=articles&#038;amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Butm_campaign=24313\">UI\/UX-&#1076;&#1080;&#1079;&#1072;&#1081;&#1085;&#1091;<\/a>, &#1103;&#1082;&#1097;&#1086; &#1074;&#1078;&#1077; &#1074;&#1080;&#1079;&#1085;&#1072;&#1095;&#1080;&#1074;&#1089;&#1103; &#1079; <a href=\"https:\/\/goit.global\/ua\/articles\/naybilsh-zatrebuvani-it-profesii-roku\/\">&#1087;&#1088;&#1086;&#1092;&#1077;&#1089;&#1110;&#1108;&#1102;<\/a>. &#1041;&#1072; &#1073;&#1110;&#1083;&#1100;&#1096;&#1077;, &#1084;&#1086;&#1078;&#1077;&#1096; &#1079;&#1072;&#1087;&#1080;&#1089;&#1072;&#1090;&#1080; &#1076;&#1080;&#1090;&#1080;&#1085;&#1091; &#1085;&#1072; &#1082;&#1091;&#1088;&#1089;&#1080; <a href=\"https:\/\/goiteens.com\/course\/frontend\/\" target=\"_blank\" rel=\"noopener\">frontend &#1076;&#1083;&#1103; &#1087;&#1110;&#1076;&#1083;&#1110;&#1090;&#1082;&#1110;&#1074;<\/a>. &#1057;&#1082;&#1086;&#1088;&#1110;&#1096;&#1077; &#1087;&#1086;&#1095;&#1080;&#1085;&#1072;&#1081; &#1074;&#1095;&#1080;&#1090;&#1080;&#1089;&#1103;, &#1097;&#1086;&#1073; &#1086;&#1090;&#1088;&#1080;&#1084;&#1072;&#1090;&#1080; &#1094;&#1110;&#1082;&#1072;&#1074;&#1091; &#1090;&#1072; &#1074;&#1080;&#1089;&#1086;&#1082;&#1086;&#1086;&#1087;&#1083;&#1072;&#1095;&#1091;&#1074;&#1072;&#1085;&#1091; &#1088;&#1086;&#1073;&#1086;&#1090;&#1091;!<\/p>\n<p><a href=\"https:\/\/m.goit.global\/ua\/new\/?amp%3Butm_medium=articles&#038;amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Butm_campaign=24313\"><\/a>\n<\/p>\n<div id=\"gtx-anchor\" style=\"position: absolute;left: 129.578px;top: 1858.84px;width: 29.6562px;height: 19px\"><\/div>\n<div class=\"jfk-bubble gtx-bubble\" style=\"left: 130px;top: 1888px;opacity: 1\" role=\"alertdialog\" aria-describedby=\"bubble-6\">\n<div id=\"bubble-6\" class=\"jfk-bubble-content-id\">\n<div id=\"gtx-host\" style=\"min-width: 200px;max-width: 400px\"><\/div>\n<\/div>\n<div class=\"jfk-bubble-closebtn-id jfk-bubble-closebtn\" role=\"button\" aria-label=\"Close\"><\/div>\n<div class=\"jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup\" style=\"left: 134.578px\">\n<div class=\"jfk-bubble-arrowimplbefore\"><\/div>\n<div class=\"jfk-bubble-arrowimplafter\"><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0420\u043e\u0437\u0431\u0438\u0440\u0430\u0454\u043c\u043e\u0441\u044f, \u0449\u043e \u0442\u0430\u043a\u0435 HTML \u0456 CSS \u0442\u0430 \u044f\u043a \u0432\u043e\u043d\u0438 \u0434\u043e\u043f\u043e\u0432\u043d\u044e\u044e\u0442\u044c \u043e\u0434\u043d\u0435 \u043e\u0434\u043d\u043e\u0433\u043e. \u0420\u043e\u0437\u043f\u043e\u0432\u0456\u0434\u0430\u0454\u043c\u043e, \u043a\u043e\u043c\u0443 \u0456 \u0434\u043b\u044f \u0447\u043e\u0433\u043e \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0437\u043d\u0430\u0442\u0438 \u043e\u0441\u043d\u043e\u0432\u0438 HTML \u0442\u0430 CSS. \u0420\u043e\u0437\u043f\u043e\u0447\u043d\u0438 \u043a\u0430\u0440&#8217;\u0454\u0440\u0443 \u0432 IT \u0440\u0430\u0437\u043e\u043c \u0437 \u043d\u0430\u043c\u0438. \u041a\u0443\u0440\u0441\u0438 \u0442\u0430 \u0431\u0435\u0437\u043f\u043b\u0430\u0442\u043d\u0456 \u043c\u0430\u0440\u0430\u0444\u043e\u043d\u0438 \u0432\u0456\u0434 GoIT.<\/p>\n","protected":false},"featured_media":24312,"menu_order":0,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false},"categories":[12035],"tags":[],"class_list":["post-24313","articles","type-articles","status-publish","has-post-thumbnail","hentry","category-frontend"],"acf":[],"_links":{"self":[{"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/articles\/24313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/types\/articles"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/media\/24312"}],"wp:attachment":[{"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/media?parent=24313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/categories?post=24313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/tags?post=24313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}