{"id":233,"date":"2024-04-29T00:24:41","date_gmt":"2024-04-29T00:24:41","guid":{"rendered":"https:\/\/croakthecode.tcu.edu\/nguyen\/?p=233"},"modified":"2024-05-07T03:20:18","modified_gmt":"2024-05-07T03:20:18","slug":"how-to-use-div-map-and-flexbox-in-web-design","status":"publish","type":"post","link":"https:\/\/croakthecode.tcu.edu\/nguyen\/2024\/04\/29\/how-to-use-div-map-and-flexbox-in-web-design\/","title":{"rendered":"how to: use div, map, and flexbox in web design"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">anh note&#8217;s for additional research on <strong>Project 3: Small Business Website<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">DIV for Structural Layout<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"575\" src=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/div.jpg\" alt=\"\" class=\"wp-image-335\" srcset=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/div.jpg 600w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/div-300x288.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Understanding DIV:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>&lt;div&gt;<\/code> is a fundamental HTML element used for dividing sections of a webpage.<\/li>\n\n\n\n<li>It&#8217;s versatile and acts as a container for other HTML elements, allowing for organized structuring of content.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Guidelines for Using DIV:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Semantic Structure:<\/strong> Use <code>&lt;div&gt;<\/code> elements to define semantic sections of your webpage, such as headers, footers, sidebars, and content areas.<\/li>\n\n\n\n<li><strong>Clear Hierarchy:<\/strong> Maintain a clear hierarchy by nesting <code>&lt;div&gt;<\/code> elements appropriately. Each <code>&lt;div&gt;<\/code> should serve a distinct purpose within the webpage layout.<\/li>\n\n\n\n<li><strong>CSS Styling:<\/strong> Apply CSS styles to <code>&lt;div&gt;<\/code> elements to control layout, positioning, and visual presentation.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Example:<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"header\"&gt;<br>    &lt;h1&gt;Welcome to My Website&lt;\/h1&gt;<br>&lt;\/div&gt;<br>&lt;div class=\"content\"&gt;<br>    &lt;p&gt;This is the main content of the website.&lt;\/p&gt;<br>&lt;\/div&gt;<br>&lt;div class=\"footer\"&gt;<br>    &lt;p&gt;Contact us at example@example.com&lt;\/p&gt;<br>&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Additional Resource: <strong><em><a href=\"https:\/\/medium.com\/@6unpnp\/html-div-element-and-css-5cd259e5772c\" data-type=\"link\" data-id=\"https:\/\/medium.com\/@6unpnp\/html-div-element-and-css-5cd259e5772c\">HTML div element and CSS<\/a><\/em><\/strong> by <strong>Sparisoma Viridi<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>MAP for Image Mapping<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/8-AnS9e-y68\/maxresdefault.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AHUBoAC4AOKAgwIABABGFUgWihlMA8=&amp;rs=AOn4CLCJh1etxdCIDOrxNQCj3XN7JQ5nDg\" alt=\"HTML Image Map Tutorial - YouTube\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Understanding MAP:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>&lt;map&gt;<\/code> is an HTML element used in conjunction with <code>&lt;area&gt;<\/code> elements to define clickable areas within an image.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Guidelines for Using MAP:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Image Preparation:<\/strong> Prepare an image with distinct regions you want to make clickable.<\/li>\n\n\n\n<li><strong>Defining Areas:<\/strong> Use <code>&lt;area&gt;<\/code> elements within <code>&lt;map&gt;<\/code> to define shape and coordinates for clickable regions.<\/li>\n\n\n\n<li><strong>Linking URLs:<\/strong> Assign URLs to <code>&lt;area&gt;<\/code> elements to redirect users to specific pages or resources when clicked.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Example:<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"example.jpg\" usemap=\"#exampleMap\" alt=\"Example Image\"&gt;<br>&lt;map name=\"exampleMap\"&gt;<br>    &lt;area shape=\"rect\" coords=\"0,0,50,50\" href=\"page1.html\" alt=\"Area 1\"&gt;<br>    &lt;area shape=\"circle\" coords=\"100,100,50\" href=\"page2.html\" alt=\"Area 2\"&gt;<br>    &lt;area shape=\"poly\" coords=\"200,200,250,250,200,300\" href=\"page3.html\" alt=\"Area 3\"&gt;<br>&lt;\/map&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Additional Resource: <strong><em><a href=\"https:\/\/www.youtube.com\/watch?v=8-AnS9e-y68\">HTML Image Map Tutorial<\/a><\/em><\/strong> by <strong>Portfolio Course<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Flexbox for Flexible Layouts<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"1981\" src=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/image-18.png\" alt=\"Understanding Flexbox: A Comprehensive Guide | by Make Computer Science  Great Again | Medium\" class=\"wp-image-352\" srcset=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/image-18.png 1400w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/image-18-212x300.png 212w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/image-18-724x1024.png 724w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/image-18-768x1087.png 768w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/image-18-1086x1536.png 1086w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Understanding Flexbox:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Flexbox is a CSS layout model that provides a more efficient way to design flexible and responsive layouts in CSS.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Guidelines for Using Flexbox:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Container and Items:<\/strong> Apply <code>display: flex;<\/code> to the container element and use properties like <code>flex-direction<\/code>, <code>justify-content<\/code>, and <code>align-items<\/code> to control the layout of child items.<\/li>\n\n\n\n<li><strong>Responsive Design:<\/strong> Utilize Flexbox to create responsive layouts that adapt to different screen sizes and orientations.<\/li>\n\n\n\n<li><strong>Flexibility:<\/strong> Leverage properties like <code>flex-grow<\/code>, <code>flex-shrink<\/code>, and <code>flex-basis<\/code> to control how items within the flex container grow or shrink based on available space.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Example:<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>flex-container {<br>    display: flex;<br>    flex-direction: row;<br>    justify-content: space-between;<br>    align-items: center;<br>}<br><br>.flex-item {<br>    flex-grow: 1;<br>    flex-shrink: 1;<br>    flex-basis: 0;<br>    \/* Additional styling for flex items *\/<br>}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Additional Resource: <a href=\"https:\/\/medium.com\/@MakeComputerScienceGreatAgain\/understanding-flexbox-a-comprehensive-guide-992bcd5f04de\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"text-decoration: underline\"><em><strong>Understanding Flexbox: A Comprehensive Guide<\/strong><\/em><\/span><\/a> by <strong>Make Computer Science Great Again<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>anh note&#8217;s for additional research on Project 3: Small Business Website DIV for Structural Layout Additional Resource: HTML div element and CSS by Sparisoma Viridi MAP for Image Mapping Additional Resource: HTML Image Map Tutorial by Portfolio Course Flexbox for Flexible Layouts Additional Resource: Understanding Flexbox: A Comprehensive Guide by Make Computer Science Great Again<\/p>\n","protected":false},"author":13,"featured_media":332,"comment_status":"open","ping_status":"open","sticky":false,"template":"single-with-sidebar","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-233","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial"],"_links":{"self":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/posts\/233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":0,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/posts\/233\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/media\/332"}],"wp:attachment":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/media?parent=233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/categories?post=233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/tags?post=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}