We spend an entire hour looking at a Photoshop design and writing HTML5 markup that describes what we see. We try and be as semantic as we can and discuss the challenges of that as they come up. We don’t write any actual CSS, but we discuss CSS as we go, because markup choices and where we do\/don’t need classes\/ID’s are directly related to that. <\/p>\n","protected":false},"excerpt":{"rendered":"
We spend an entire hour looking at a Photoshop design and writing HTML5 markup that describes what we see. We try and be as semantic as we can and discuss the challenges of that as they come up. We don’t write any actual CSS, but we discuss CSS as we go, because markup choices and […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":345582,"url":"https:\/\/css-tricks.com\/video-screencasts\/208-a-css-grid-layout-with-pictures-down-one-side-matched-up-with-paragraphs-on-the-other\/","url_meta":{"origin":13644,"position":0},"title":"#208: A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other","date":"July 30, 2021","format":false,"excerpt":"This is the video version of a blog post we did asking the question: How do you make a layout with pictures down one side of a page matched up with paragraphs on the other\u00a0side? It's a satisfying answer because we can pull this off with simple semantic markup (really\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/layout-thumb-black.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":18651,"url":"https:\/\/css-tricks.com\/lodge\/v10\/122-building-the-videos-archive-part-1\/","url_meta":{"origin":13644,"position":1},"title":"#122: Building the Videos Archive, Part 1","date":"October 1, 2012","format":false,"excerpt":"The videos archive page is the part of the site where people can browse all the free videos available to watch. It's for browsing, must like the homepage for the snippets or the homepage for the demos. These pages are their own template, which we can very quickly and easily\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20286,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/015-home-page-nav-1\/","url_meta":{"origin":13644,"position":2},"title":"#015 – Home Page Navigation, Part 1","date":"February 26, 2013","format":false,"excerpt":"We have a plan for the home page navigation, we just need to get it done in code. Home page navigation, I say specifically, because this is likely only going to be used on the homepage. It would be a bit much to use on every internal page, the way\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16296,"url":"https:\/\/css-tricks.com\/video-screencasts-6\/","url_meta":{"origin":13644,"position":3},"title":"Video Screencasts","date":"February 13, 2012","format":false,"excerpt":"#100: Let\u2019s Write Semantic Markup Running time: 01:02:07 We look at a Photoshop design and write HTML5 markup that describes it as semantically as we can. #99: Overview of HTML5 Forms Types, Attributes, and Elements Running time: 38:33 We'll talk about the new features of HTML5 that relate to making\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4442,"url":"https:\/\/css-tricks.com\/video-screencasts\/74-editable-css3-image-gallery\/","url_meta":{"origin":13644,"position":4},"title":"#74: Editable CSS3 Image Gallery","date":"October 18, 2009","format":false,"excerpt":"We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20369,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/020-the-blog-part-2\/","url_meta":{"origin":13644,"position":5},"title":"#020 – The Blog, Part 2","date":"March 4, 2013","format":false,"excerpt":"The blog is outputting what we want it to, but the typography and layout of it isn't quite there. We add a bit of markup here and there as needed to give us better semantics and elements used just for styling reasons. For instance, our .page-wrap is a div because\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13644"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13644"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13644\/revisions"}],"predecessor-version":[{"id":13650,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13644\/revisions\/13650"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13644"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}