{"id":1235,"date":"2023-01-31T13:25:23","date_gmt":"2023-01-31T18:25:23","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/?p=1235"},"modified":"2023-01-31T17:36:25","modified_gmt":"2023-01-31T22:36:25","slug":"creating-html-from-wireframes","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/html\/creating-html-from-wireframes\/","title":{"rendered":"Creating HTML from Wireframes"},"content":{"rendered":"\n<p>When making your web site you need to create HTML that matches your wireframe diagrams. Perhaps the biggest lesson here is to make sure to that you have set up Page Structure elements (see <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/html\/html5-periodic-table\/\" data-type=\"post\" data-id=\"524\">HTML 5 Periodic Table<\/a>) to match the page areas that you have outlined in your wireframes. Remember that for both CSS Grid and Flexbox there needs to be a containing element where the grid or flex is applied.<\/p>\n\n\n\n<p>This video walks through a couple of examples.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.dropbox.com\/s\/iz2kcg4rdpyhm8x\/HTML-Match_Wireframe.mp4?raw=1\"><\/video><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>When making your web site you need to create HTML that matches your wireframe diagrams. Perhaps the biggest lesson here is to make sure to that you have set up Page Structure elements (see HTML 5 Periodic Table) to match the page areas that you have outlined in your wireframes. Remember that for both CSS&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/html\/creating-html-from-wireframes\/\">Continue reading <span class=\"screen-reader-text\">Creating HTML from Wireframes<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[18,25],"tags":[106,107,33,37],"coauthors":[87],"class_list":["post-1235","post","type-post","status-publish","format-standard","hentry","category-html","category-layout","tag-layout","tag-screencast","tag-tutorial","tag-wireframe","entry"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"<p>When making your web site you need to create HTML that matches your wireframe diagrams. Perhaps the biggest lesson here is to make sure to that you have set up Page Structure elements (see HTML 5 Periodic Table) to match the page areas that you have outlined in your wireframes. Remember that for both CSS Grid and Flexbox there needs to be a containing element where the grid or flex is applied. This video walks through a couple of examples.<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/category\/topics\/html\/\" rel=\"category tag\">HTML<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/category\/topics\/design\/layout\/\" rel=\"category tag\">Layout<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/author\/cstein\/"},"comments_num_v2":"0 comments","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"When making your web site you need to create HTML that matches your wireframe diagrams. Perhaps the biggest lesson here is to make sure to that you have set up Page Structure elements (see HTML 5 Periodic Table) to match the page areas that you have outlined in your wireframes. Remember that for both CSS&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts\/1235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/comments?post=1235"}],"version-history":[{"count":3,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts\/1235\/revisions"}],"predecessor-version":[{"id":2377,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts\/1235\/revisions\/2377"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/media?parent=1235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/categories?post=1235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/tags?post=1235"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/coauthors?post=1235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}