{"id":2596,"date":"2023-07-04T22:49:54","date_gmt":"2023-07-05T02:49:54","guid":{"rendered":"http:\/\/learntechwell.com\/?p=2596"},"modified":"2023-07-06T16:52:36","modified_gmt":"2023-07-06T20:52:36","slug":"responsive-design-the-missing-ingredient","status":"publish","type":"post","link":"https:\/\/learntechwell.com\/ru\/responsive-design-the-missing-ingredient\/","title":{"rendered":"\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0443: \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442"},"content":{"rendered":"<style>.wp-block-kadence-advancedheading.kt-adv-heading_0b701c-8b, .wp-block-kadence-advancedheading.kt-adv-heading_0b701c-8b[data-kb-block=\"kb-adv-heading_0b701c-8b\"]{font-size:var(--global-kb-font-size-md, 1.25rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_0b701c-8b mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_0b701c-8b[data-kb-block=\"kb-adv-heading_0b701c-8b\"] 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;}.wp-block-kadence-advancedheading.kt-adv-heading_0b701c-8b img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_0b701c-8b[data-kb-block=\"kb-adv-heading_0b701c-8b\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<div class=\"kt-adv-heading_0b701c-8b wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_0b701c-8b\"><em>So, you have a good handle on HTML and CSS, but when it comes to Responsive Design, things get a bit tricky. You struggle to make your designs truly responsive: elements overflow, images get distorted, and you can&#8217;t figure out why. Sounds familiar? That&#8217;s exactly where I was a few months ago. After wrestling with these challenges for a while, I realized it was time to find a course that would give me a solid foundation in Responsive Web Design. As it turned out, there was more to it than just one course\u2026 Read on for the full story! All courses mentioned below are free.<\/em><\/div>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-_bebc8a-53 .kt-block-spacer{height:60px;}.wp-block-kadence-spacer.kt-block-spacer-_bebc8a-53 .kt-divider{border-top-width:3px;height:1px;border-top-color:#eee;width:80%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-_bebc8a-53\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\"\/><\/div><\/div>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_ebd5aa-c8, .wp-block-kadence-advancedheading.kt-adv-heading_ebd5aa-c8[data-kb-block=\"kb-adv-heading_ebd5aa-c8\"]{font-size:var(--global-kb-font-size-sm, 0.9rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_ebd5aa-c8 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_ebd5aa-c8[data-kb-block=\"kb-adv-heading_ebd5aa-c8\"] 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;}.wp-block-kadence-advancedheading.kt-adv-heading_ebd5aa-c8 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_ebd5aa-c8[data-kb-block=\"kb-adv-heading_ebd5aa-c8\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<div class=\"kt-adv-heading_ebd5aa-c8 wp-block-kadence-advancedheading has-theme-palette-7-background-color has-background\" data-kb-block=\"kb-adv-heading_ebd5aa-c8\">If you want to know what Responsive Web Design is, be sure to visit a <a href=\"http:\/\/learntechwell.com\/responsive-web-design-explained\/\">dedicated post solely focused on explaining this term<\/a>. <\/div>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-_bd35ef-6b .kt-block-spacer{height:60px;}.wp-block-kadence-spacer.kt-block-spacer-_bd35ef-6b .kt-divider{border-top-width:3px;height:1px;border-top-color:#eee;width:80%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-_bd35ef-6b\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\"\/><\/div><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"http:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/Superb-Responsive-Design-1024x1024.png\" alt=\"Superb Responsive Design: Thinking Outside the Frame (Sarcasm) \" class=\"wp-image-2659\" srcset=\"https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/Superb-Responsive-Design-1024x1024.png 1024w, https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/Superb-Responsive-Design-300x300.png 300w, https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/Superb-Responsive-Design-150x150.png 150w, https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/Superb-Responsive-Design-768x768.png 768w, https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/Superb-Responsive-Design-12x12.png 12w, https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/Superb-Responsive-Design.png 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_9117ff-4a, .wp-block-kadence-advancedheading.kt-adv-heading_9117ff-4a[data-kb-block=\"kb-adv-heading_9117ff-4a\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_9117ff-4a mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_9117ff-4a[data-kb-block=\"kb-adv-heading_9117ff-4a\"] 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;}.wp-block-kadence-advancedheading.kt-adv-heading_9117ff-4a img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_9117ff-4a[data-kb-block=\"kb-adv-heading_9117ff-4a\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading_9117ff-4a wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_9117ff-4a\"><strong>1. <a href=\"https:\/\/web.dev\/learn\/design\/\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"text-decoration: underline;\">Introduction to Web Design<\/span><\/a> by Google Developers<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This course delves into the world of modern responsive web design. It equipped me with a lot of valuable tools, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visualizing the birth of Responsive Web Design<\/li>\n\n\n\n<li>Browser developers&#8217; perspective on how browsers process HTML and CSS files <\/li>\n\n\n\n<li>Providing helpful links to Chrome Dev Tools for better comprehension<\/li>\n\n\n\n<li>Explaining media queries and their usage<\/li>\n\n\n\n<li>Covering responsive images in detail, including the <code>&lt;picture&gt;<\/code> element and icons<\/li>\n\n\n\n<li>Shedding light on fluid typography<\/li>\n\n\n\n<li>Exploring macro- and micro layouts<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Seems like the course covered all the tools I needed\u2026 but was it ALL there was to it?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Something was still missing\u2014a crucial ingredient. And that ingredient was <em>me <\/em>and my mindset. Did I feel confident in my ability to use the tools effectively? Did I feel empowered and passionate about creating responsive designs? The answer was <em>no<\/em> until I took one more course.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_99fc60-13, .wp-block-kadence-advancedheading.kt-adv-heading_99fc60-13[data-kb-block=\"kb-adv-heading_99fc60-13\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_99fc60-13 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_99fc60-13[data-kb-block=\"kb-adv-heading_99fc60-13\"] 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;}.wp-block-kadence-advancedheading.kt-adv-heading_99fc60-13 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_99fc60-13[data-kb-block=\"kb-adv-heading_99fc60-13\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading_99fc60-13 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_99fc60-13\"><strong>2. <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.kevinpowell.co\/courses\" rel=\"nofollow noopener\" target=\"_blank\">Conquering Responsive Layouts<\/a> <\/span>by Kevin Powell<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To give you a sense of what I experienced in this course, let me compare it to learning to drive. A traditional driving instructor, like a regular CSS course, teaches you like this:<\/p>\n\n\n<style>.wp-block-kadence-iconlist.kt-svg-icon-list-items_7cb947-59:not(.this-stops-third-party-issues){margin-top:0px;margin-bottom:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items_7cb947-59 ul.kt-svg-icon-list:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc){margin-top:0px;margin-right:0px;margin-bottom:var(--global-kb-spacing-sm, 1.5rem);margin-left:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items_7cb947-59 ul.kt-svg-icon-list{grid-row-gap:5px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items_7cb947-59 ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:10px;}.kt-svg-icon-list-items_7cb947-59 ul.kt-svg-icon-list .kt-svg-icon-list-level-0 .kt-svg-icon-list-single svg{font-size:20px;}<\/style>\n<div class=\"wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items_7cb947-59 kt-svg-icon-list-columns-1 alignnone\"><ul class=\"kt-svg-icon-list\"><style>.kt-svg-icon-list-item-_eec392-ac .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;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<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_eec392-ac\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_car-side kt-svg-icon-list-single\"><svg viewBox=\"0 0 640 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M544 192h-16L419.22 56.02A64.025 64.025 0 0 0 369.24 32H155.33c-26.17 0-49.7 15.93-59.42 40.23L48 194.26C20.44 201.4 0 226.21 0 256v112c0 8.84 7.16 16 16 16h48c0 53.02 42.98 96 96 96s96-42.98 96-96h128c0 53.02 42.98 96 96 96s96-42.98 96-96h48c8.84 0 16-7.16 16-16v-80c0-53.02-42.98-96-96-96zM160 432c-26.47 0-48-21.53-48-48s21.53-48 48-48 48 21.53 48 48-21.53 48-48 48zm72-240H116.93l38.4-96H232v96zm48 0V96h89.24l76.8 96H280zm200 240c-26.47 0-48-21.53-48-48s21.53-48 48-48 48 21.53 48 48-21.53 48-48 48z\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Go straight. Okay.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-_6b2d24-f4 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;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<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_6b2d24-f4\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_car-side kt-svg-icon-list-single\"><svg viewBox=\"0 0 640 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M544 192h-16L419.22 56.02A64.025 64.025 0 0 0 369.24 32H155.33c-26.17 0-49.7 15.93-59.42 40.23L48 194.26C20.44 201.4 0 226.21 0 256v112c0 8.84 7.16 16 16 16h48c0 53.02 42.98 96 96 96s96-42.98 96-96h128c0 53.02 42.98 96 96 96s96-42.98 96-96h48c8.84 0 16-7.16 16-16v-80c0-53.02-42.98-96-96-96zM160 432c-26.47 0-48-21.53-48-48s21.53-48 48-48 48 21.53 48 48-21.53 48-48 48zm72-240H116.93l38.4-96H232v96zm48 0V96h89.24l76.8 96H280zm200 240c-26.47 0-48-21.53-48-48s21.53-48 48-48 48 21.53 48 48-21.53 48-48 48z\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Turn right. Okay.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-_84fff1-16 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;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<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_84fff1-16\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_car-side kt-svg-icon-list-single\"><svg viewBox=\"0 0 640 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M544 192h-16L419.22 56.02A64.025 64.025 0 0 0 369.24 32H155.33c-26.17 0-49.7 15.93-59.42 40.23L48 194.26C20.44 201.4 0 226.21 0 256v112c0 8.84 7.16 16 16 16h48c0 53.02 42.98 96 96 96s96-42.98 96-96h128c0 53.02 42.98 96 96 96s96-42.98 96-96h48c8.84 0 16-7.16 16-16v-80c0-53.02-42.98-96-96-96zM160 432c-26.47 0-48-21.53-48-48s21.53-48 48-48 48 21.53 48 48-21.53 48-48 48zm72-240H116.93l38.4-96H232v96zm48 0V96h89.24l76.8 96H280zm200 240c-26.47 0-48-21.53-48-48s21.53-48 48-48 48 21.53 48 48-21.53 48-48 48z\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Turn left. Okay.<\/span><\/li>\n<\/ul><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">But Kevin&#8217;s approach is different:<\/p>\n\n\n<style>.wp-block-kadence-iconlist.kt-svg-icon-list-items_d4c93c-72:not(.this-stops-third-party-issues){margin-top:0px;margin-bottom:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items_d4c93c-72 ul.kt-svg-icon-list:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc){margin-top:0px;margin-right:0px;margin-bottom:var(--global-kb-spacing-sm, 1.5rem);margin-left:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items_d4c93c-72 ul.kt-svg-icon-list{grid-row-gap:5px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items_d4c93c-72 ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:10px;}.kt-svg-icon-list-items_d4c93c-72 ul.kt-svg-icon-list .kt-svg-icon-list-level-0 .kt-svg-icon-list-single svg{font-size:20px;}<\/style>\n<div class=\"wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items_d4c93c-72 kt-svg-icon-list-columns-1 alignnone\"><ul class=\"kt-svg-icon-list\"><style>.kt-svg-icon-list-item-_f8113a-67 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;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<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_f8113a-67\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_car kt-svg-icon-list-single\"><svg viewBox=\"0 0 512 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M499.99 176h-59.87l-16.64-41.6C406.38 91.63 365.57 64 319.5 64h-127c-46.06 0-86.88 27.63-103.99 70.4L71.87 176H12.01C4.2 176-1.53 183.34.37 190.91l6 24C7.7 220.25 12.5 224 18.01 224h20.07C24.65 235.73 16 252.78 16 272v48c0 16.12 6.16 30.67 16 41.93V416c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h256v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-54.07c9.84-11.25 16-25.8 16-41.93v-48c0-19.22-8.65-36.27-22.07-48H494c5.51 0 10.31-3.75 11.64-9.09l6-24c1.89-7.57-3.84-14.91-11.65-14.91zm-352.06-17.83c7.29-18.22 24.94-30.17 44.57-30.17h127c19.63 0 37.28 11.95 44.57 30.17L384 208H128l19.93-49.83zM96 319.8c-19.2 0-32-12.76-32-31.9S76.8 256 96 256s48 28.71 48 47.85-28.8 15.95-48 15.95zm320 0c-19.2 0-48 3.19-48-15.95S396.8 256 416 256s32 12.76 32 31.9-12.8 31.9-32 31.9z\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">The car is designed to respond to your commands.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-_22b68e-98 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;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<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_22b68e-98\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_car kt-svg-icon-list-single\"><svg viewBox=\"0 0 512 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M499.99 176h-59.87l-16.64-41.6C406.38 91.63 365.57 64 319.5 64h-127c-46.06 0-86.88 27.63-103.99 70.4L71.87 176H12.01C4.2 176-1.53 183.34.37 190.91l6 24C7.7 220.25 12.5 224 18.01 224h20.07C24.65 235.73 16 252.78 16 272v48c0 16.12 6.16 30.67 16 41.93V416c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h256v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-54.07c9.84-11.25 16-25.8 16-41.93v-48c0-19.22-8.65-36.27-22.07-48H494c5.51 0 10.31-3.75 11.64-9.09l6-24c1.89-7.57-3.84-14.91-11.65-14.91zm-352.06-17.83c7.29-18.22 24.94-30.17 44.57-30.17h127c19.63 0 37.28 11.95 44.57 30.17L384 208H128l19.93-49.83zM96 319.8c-19.2 0-32-12.76-32-31.9S76.8 256 96 256s48 28.71 48 47.85-28.8 15.95-48 15.95zm320 0c-19.2 0-48 3.19-48-15.95S396.8 256 416 256s32 12.76 32 31.9-12.8 31.9-32 31.9z\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">It tends to run straight unless you move the wheel.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-_29c45f-87 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;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<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_29c45f-87\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_car kt-svg-icon-list-single\"><svg viewBox=\"0 0 512 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M499.99 176h-59.87l-16.64-41.6C406.38 91.63 365.57 64 319.5 64h-127c-46.06 0-86.88 27.63-103.99 70.4L71.87 176H12.01C4.2 176-1.53 183.34.37 190.91l6 24C7.7 220.25 12.5 224 18.01 224h20.07C24.65 235.73 16 252.78 16 272v48c0 16.12 6.16 30.67 16 41.93V416c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h256v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-54.07c9.84-11.25 16-25.8 16-41.93v-48c0-19.22-8.65-36.27-22.07-48H494c5.51 0 10.31-3.75 11.64-9.09l6-24c1.89-7.57-3.84-14.91-11.65-14.91zm-352.06-17.83c7.29-18.22 24.94-30.17 44.57-30.17h127c19.63 0 37.28 11.95 44.57 30.17L384 208H128l19.93-49.83zM96 319.8c-19.2 0-32-12.76-32-31.9S76.8 256 96 256s48 28.71 48 47.85-28.8 15.95-48 15.95zm320 0c-19.2 0-48 3.19-48-15.95S396.8 256 416 256s32 12.76 32 31.9-12.8 31.9-32 31.9z\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">You have the power to turn it left or right when needed.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-_106508-b5 .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;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<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_106508-b5\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_car kt-svg-icon-list-single\"><svg viewBox=\"0 0 512 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M499.99 176h-59.87l-16.64-41.6C406.38 91.63 365.57 64 319.5 64h-127c-46.06 0-86.88 27.63-103.99 70.4L71.87 176H12.01C4.2 176-1.53 183.34.37 190.91l6 24C7.7 220.25 12.5 224 18.01 224h20.07C24.65 235.73 16 252.78 16 272v48c0 16.12 6.16 30.67 16 41.93V416c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h256v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-54.07c9.84-11.25 16-25.8 16-41.93v-48c0-19.22-8.65-36.27-22.07-48H494c5.51 0 10.31-3.75 11.64-9.09l6-24c1.89-7.57-3.84-14.91-11.65-14.91zm-352.06-17.83c7.29-18.22 24.94-30.17 44.57-30.17h127c19.63 0 37.28 11.95 44.57 30.17L384 208H128l19.93-49.83zM96 319.8c-19.2 0-32-12.76-32-31.9S76.8 256 96 256s48 28.71 48 47.85-28.8 15.95-48 15.95zm320 0c-19.2 0-48 3.19-48-15.95S396.8 256 416 256s32 12.76 32 31.9-12.8 31.9-32 31.9z\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">When you finish turning, relax your grip on the wheel, and it will return to the straight position.<\/span><\/li>\n\n\n<style>.kt-svg-icon-list-item-_66f356-cd .kt-svg-icon-list-text mark.kt-highlight{background-color:unset;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<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_66f356-cd\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fas_car kt-svg-icon-list-single\"><svg viewBox=\"0 0 512 512\"  fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  aria-hidden=\"true\"><path d=\"M499.99 176h-59.87l-16.64-41.6C406.38 91.63 365.57 64 319.5 64h-127c-46.06 0-86.88 27.63-103.99 70.4L71.87 176H12.01C4.2 176-1.53 183.34.37 190.91l6 24C7.7 220.25 12.5 224 18.01 224h20.07C24.65 235.73 16 252.78 16 272v48c0 16.12 6.16 30.67 16 41.93V416c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h256v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-54.07c9.84-11.25 16-25.8 16-41.93v-48c0-19.22-8.65-36.27-22.07-48H494c5.51 0 10.31-3.75 11.64-9.09l6-24c1.89-7.57-3.84-14.91-11.65-14.91zm-352.06-17.83c7.29-18.22 24.94-30.17 44.57-30.17h127c19.63 0 37.28 11.95 44.57 30.17L384 208H128l19.93-49.83zM96 319.8c-19.2 0-32-12.76-32-31.9S76.8 256 96 256s48 28.71 48 47.85-28.8 15.95-48 15.95zm320 0c-19.2 0-48 3.19-48-15.95S396.8 256 416 256s32 12.76 32 31.9-12.8 31.9-32 31.9z\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">You see, you are driving it! You are in command!<\/span><\/li>\n<\/ul><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">After completing Kevin&#8217;s course, I felt a new sense of empowerment and control. I understood how to make CSS work as intended. I had the confidence to make my designs truly responsive, and that&#8217;s what I call the <strong>missing ingredient<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"http:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/c7haasacig-1024x576.jpg\" alt=\"Instructor pointing out something to a driver\" class=\"wp-image-2598\" srcset=\"https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/c7haasacig-1024x576.jpg 1024w, https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/c7haasacig-300x169.jpg 300w, https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/c7haasacig-768x432.jpg 768w, https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/c7haasacig-1536x864.jpg 1536w, https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/c7haasacig-18x10.jpg 18w, https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/c7haasacig.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">A good instructor would make you at ease with the tools you are learning and build your confidence in your ability to use these tools. <\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">To be fair, Kevin&#8217;s course doesn&#8217;t cover every trick in the book. It doesn&#8217;t delve into Dev Tools, fluid typography, the <code>&lt;picture&gt;<\/code> element, or even the grid. But here&#8217;s the thing: tools are one thing, and mindset is a whole different ball game. Kevin&#8217;s course uniquely transforms your mindset.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To summarize, here are the valuable aspects of Kevin&#8217;s course that left a lasting impact on me:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Emphasizing the <em>ease <\/em>of creating responsive designs<\/li>\n\n\n\n<li>Providing encouragement and empowerment throughout<\/li>\n\n\n\n<li>Demonstrating real-life coding of responsive designs<\/li>\n\n\n\n<li>Incorporating best practices, like using Emmet, class naming (BEM), and the single responsibility principle<\/li>\n\n\n\n<li>Covering percentages, media queries, and flexbox<\/li>\n\n\n\n<li>Focusing on fundamental concepts and explaining them thoroughly<\/li>\n\n\n\n<li>Offering code challenges and their solutions that help pinpoint your difficulties and validate your accomplishments<\/li>\n\n\n\n<li>Providing a supportive Discord channel<\/li>\n<\/ul>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_4dd834-3d, .wp-block-kadence-advancedheading.kt-adv-heading_4dd834-3d[data-kb-block=\"kb-adv-heading_4dd834-3d\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_4dd834-3d mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_4dd834-3d[data-kb-block=\"kb-adv-heading_4dd834-3d\"] 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;}.wp-block-kadence-advancedheading.kt-adv-heading_4dd834-3d img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_4dd834-3d[data-kb-block=\"kb-adv-heading_4dd834-3d\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading_4dd834-3d wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_4dd834-3d\"><strong>3. Other options for learning Responsive Web Design<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For the sake of completeness, let&#8217;s briefly explore other options for learning Responsive Web Design. While the resources in this section have their merits, they mostly focus on the tools rather than changing your mindset.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_994747-a8, .wp-block-kadence-advancedheading.kt-adv-heading_994747-a8[data-kb-block=\"kb-adv-heading_994747-a8\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_994747-a8 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_994747-a8[data-kb-block=\"kb-adv-heading_994747-a8\"] 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;}.wp-block-kadence-advancedheading.kt-adv-heading_994747-a8 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_994747-a8[data-kb-block=\"kb-adv-heading_994747-a8\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading_994747-a8 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_994747-a8\"><a href=\"https:\/\/www.udacity.com\/course\/responsive-web-design-fundamentals--ud893\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"text-decoration: underline;\">Responsive Web Design Fundamentals<\/span><\/a> by Google + Udacity:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Again, it\u2019s mostly about the tools, though it does touch on the mindset to some extent. This is a video course, unlike the text-only Google Developers course mentioned above.  Each video is approximately 1 minute long, highlighting a specific concept.  The course also includes quizzes and coding challenges. Some of the topics covered include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Using Dev Tools on desktop and mobile<\/li>\n\n\n\n<li>Understanding the viewport and device pixel ratio<\/li>\n\n\n\n<li>Minimum tap target sizes<\/li>\n\n\n\n<li>Media queries and breakpoints<\/li>\n\n\n\n<li>Responsive design patterns<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Overall, this course provided me with useful tricks and tools that were not readily available elsewhere. The content is well-packaged and easily accessible for students. However, when I needed to look up a specific aspect, this content wasn&#8217;t as search-friendly as the Google Developers course. While helpful, it didn&#8217;t offer the same level of empowerment as Kevin&#8217;s CRL course. <\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_bde086-9c, .wp-block-kadence-advancedheading.kt-adv-heading_bde086-9c[data-kb-block=\"kb-adv-heading_bde086-9c\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_bde086-9c mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_bde086-9c[data-kb-block=\"kb-adv-heading_bde086-9c\"] 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;}.wp-block-kadence-advancedheading.kt-adv-heading_bde086-9c img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_bde086-9c[data-kb-block=\"kb-adv-heading_bde086-9c\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading_bde086-9c wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_bde086-9c\"><a href=\"https:\/\/www.freecodecamp.org\/learn\/2022\/responsive-web-design\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"text-decoration: underline;\">Responsive Web Design<\/span><\/a> by freeCodeCamp:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This course covers the fundamentals of responsive web design using HTML and CSS. It includes lessons and coding challenges. I haven\u2019t done it, but it seems good.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_8962c3-f7, .wp-block-kadence-advancedheading.kt-adv-heading_8962c3-f7[data-kb-block=\"kb-adv-heading_8962c3-f7\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_8962c3-f7 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_8962c3-f7[data-kb-block=\"kb-adv-heading_8962c3-f7\"] 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;}.wp-block-kadence-advancedheading.kt-adv-heading_8962c3-f7 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_8962c3-f7[data-kb-block=\"kb-adv-heading_8962c3-f7\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading_8962c3-f7 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_8962c3-f7\"><a href=\"https:\/\/www.coursera.org\/specializations\/web-design\" rel=\"nofollow noopener\" target=\"_blank\"><span style=\"text-decoration: underline;\">Web Design for Everybody: Basics of Web Development &amp; Coding<\/span><\/a> by Coursera:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This course, offered by the University of Michigan, covers responsive design concepts along with HTML, CSS, and JavaScript. I haven\u2019t done it; it appears to be good for beginners in front-end development.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_7d0d66-83, .wp-block-kadence-advancedheading.kt-adv-heading_7d0d66-83[data-kb-block=\"kb-adv-heading_7d0d66-83\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_7d0d66-83 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_7d0d66-83[data-kb-block=\"kb-adv-heading_7d0d66-83\"] 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;}.wp-block-kadence-advancedheading.kt-adv-heading_7d0d66-83 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_7d0d66-83[data-kb-block=\"kb-adv-heading_7d0d66-83\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading_7d0d66-83 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_7d0d66-83\">MDN Web Docs:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">While the MDN Web Docs is a comprehensive resource, the presentation in its <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/CSS_layout\/Responsive_Design\" rel=\"nofollow noopener\" target=\"_blank\">Responsive Web Design Basics<\/a> and <a href=\"http:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\" data-type=\"URL\" data-id=\"developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\" rel=\"nofollow noopener\" target=\"_blank\">Responsive Images Basics<\/a> seemed challenging to digest. It resembled a recipe with dozens of options that obscure the dish itself. These pages can be great for reference once you have a solid grasp of the fundamentals of responsive design.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_523268-34, .wp-block-kadence-advancedheading.kt-adv-heading_523268-34[data-kb-block=\"kb-adv-heading_523268-34\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_523268-34 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_523268-34[data-kb-block=\"kb-adv-heading_523268-34\"] 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;}.wp-block-kadence-advancedheading.kt-adv-heading_523268-34 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_523268-34[data-kb-block=\"kb-adv-heading_523268-34\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading_523268-34 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_523268-34\">Summary<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In my experience, the winning approach was a smart combination: a course that equips you with the necessary tools, like the one by Google, and &#8220;<a href=\"https:\/\/www.kevinpowell.co\/courses\" data-type=\"URL\" data-id=\"https:\/\/www.kevinpowell.co\/courses\" rel=\"nofollow noopener\" target=\"_blank\">Conquering Responsive Layouts<\/a>&#8221; by Kevin Powell, which transforms your mindset and empowers you to confidently use those tools. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Good luck on your learning journey!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Please feel free to share this article if you liked it, and I would be happy to hear back in the Comments!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0418\u0442\u0430\u043a, \u0432\u044b \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u0442\u0435\u0441\u044c \u0432 HTML \u0438 CSS, \u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u0432\u0441\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u043c: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043a\u0430\u0436\u0430\u044e\u0442\u0441\u044f, \u0438 \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443. \u0417\u043d\u0430\u043a\u043e\u043c\u043e? \u0418\u043c\u0435\u043d\u043d\u043e \u0432 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u0441\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430\u0437\u0430\u0434. \u041f\u043e\u0431\u043e\u0440\u043e\u0432\u0448\u0438\u0441\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0441 \u044d\u0442\u0438\u043c\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438, \u044f \u043f\u043e\u043d\u044f\u043b\u0430, \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0439\u0442\u0438 \u043a\u0443\u0440\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0430\u0441\u0442 \u043c\u043d\u0435 \u043f\u0440\u043e\u0447\u043d\u0443\u044e \u043e\u0441\u043d\u043e\u0432\u0443 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0433\u043e \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u041a\u0430\u043a \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0434\u0438\u043d \u043a\u0443\u0440\u0441... \u0427\u0438\u0442\u0430\u0439\u0442\u0435 \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043e\u043b\u043d\u0443\u044e \u0438\u0441\u0442\u043e\u0440\u0438\u044e! \u0412\u0441\u0435 \u043a\u0443\u0440\u0441\u044b, \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0435 \u043d\u0438\u0436\u0435, \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b.<\/p>","protected":false},"author":1,"featured_media":2659,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cos_headline_score":0,"cos_seo_score":0,"cos_headline_text":"Learning Responsive Design: The Missing Ingredient","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":[],"class_list":["post-2596","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding"],"jetpack_featured_media_url":"https:\/\/learntechwell.com\/wp-content\/uploads\/2023\/07\/Superb-Responsive-Design.png","_links":{"self":[{"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/posts\/2596","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=2596"}],"version-history":[{"count":13,"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/posts\/2596\/revisions"}],"predecessor-version":[{"id":2661,"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/posts\/2596\/revisions\/2661"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/media\/2659"}],"wp:attachment":[{"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/media?parent=2596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/categories?post=2596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learntechwell.com\/ru\/wp-json\/wp\/v2\/tags?post=2596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}