\nIn Class Lab:\u00a0Continue to explore Design Experimentation with Positioning, Different Selectors (Classes and ID’s), and Navigation (traditional and “anchor tags”).<\/p>\n
1. \u00a0Explore working\u00a0with\u00a0adding “Positioning” properties to your CSS, including: position: relative, position: fixed, position: absolute.<\/p>\n
2. Explore using the “Display” property, i.e. display: block, display: inline, display: inline-block, display: none. Put elements in <div>’s and other containers, and explore what happens as you change their positioning.<\/p>\n
\u2014 Tuesday, Oct\u00a04<\/strong> 1. \u00a0Explore working\u00a0with\u00a0adding “Positioning” properties to your CSS, including: position: relative, position: fixed, position: absolute.<\/p>\n 2. Explore using the “Display” property, i.e. display: block, display: inline, display: inline-block, display: none. Put elements in <div>’s and other containers, and explore what happens as you change their positioning.<\/p>\n \u2014 ——————————<\/strong><\/strong><\/p>\n Thursday, Sep 22<\/strong> In Class Lab: An HTML Page 2. Add some content<\/p>\n 3. Add a hyperlink<\/p>\n 4. Add an image tag <img> \u2014 ——————————<\/strong><\/p>\n Tuesday, Sep 27<\/strong> 1. Add an image and make it a link<\/p>\n 2. Explore adding\u00a0various tag’s to\u00a0your HTML content\u00a0structure, such as <h1>, <h2>, <p>, <img>\u00a0and see how they behave.<\/p>\n 3. Add\u00a0a “Comment” to\u00a0your HTML, such as a note.<\/p>\n 4. Try adding some “inline styles” to your HTML, using such tags as: 5. Once you get the hang of this, then try\u00a0adding an “embedded” or “internal” style sheet within your HTML structure. Do this within a <style> section in the <head> of your HTML file. Try styling\u00a0the <html> or <h1> or <body> tags.<\/p>\n 6. Take the styles you wrote in the embedded stylesheet (above), and place in its own stylesheet.css file. To link this up to your HTML, add the <link> to the stylesheet and put this in the <head> section of your HTML.<\/p>\n 7.\u00a0Add content to the other Pages to familiarize yourself with the overall structure.<\/p>\n \u2014 ——————————<\/strong><\/p>\n Thursday, Sep 29<\/strong> 1. \u00a0Look at a basic Navigational structure, based on using a list \u2013 a simple website! 2. Build a basic HTML index page, and then link a CSS Stylesheet. \u2014 During the next few classes we will be getting to know how HTML and CSS work in the Browser through a series of short exercises. Below is a checklist for you as you move through each one. Thursday, Oct\u00a06 In Class Lab:\u00a0Continue to explore Design Experimentation with Positioning, Different Selectors (Classes and ID’s), and Navigation […]<\/p>\n","protected":false},"author":4,"featured_media":1969,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3],"tags":[],"class_list":["post-1968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-assignments"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/acmgd.info\/id1\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-09-27-at-10.12.17-AM.png?fit=1108%2C878&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7RXPP-vK","_links":{"self":[{"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/posts\/1968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/comments?post=1968"}],"version-history":[{"count":16,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/posts\/1968\/revisions"}],"predecessor-version":[{"id":2006,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/posts\/1968\/revisions\/2006"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/media\/1969"}],"wp:attachment":[{"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/media?parent=1968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/categories?post=1968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/acmgd.info\/id1\/wp-json\/wp\/v2\/tags?post=1968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nResources:
\nW3Schools<\/a>
\nHTML Cheat Sheet
\n<\/a>CSS Cheat Sheet<\/a>
\nBox Model Demo (Guy Routledge)<\/a><\/p>\n<\/div>\n
\nIn Class Lab: Explore Design Experimentation with Positioning, Different Selectors (Classes and ID’s), and Navigation (traditional and “anchor tags”).<\/p>\n
\nResources:
\nW3Schools<\/a>
\nHTML Cheat Sheet
\n<\/a>CSS Cheat Sheet<\/a>
\nBox Model Demo (Guy Routledge)<\/a><\/p>\n<\/div>\n
\nLecture: Intro to Code<\/p>\n
\n1. Create an HTML Page
\n(basic HTML page structure)<\/p>\n
\n(\u201cSelf-closing\u201d tag)<\/p>\n
\nResources:
\nW3Schools<\/a>
\nHTML Cheat Sheet
\n<\/a>CSS Cheat Sheet<\/a>
\nOther links on our class Site<\/p>\n
\nIn Class Lab: HTML Styling with CSS Formatting<\/p>\n
\n<b>
\n<em>
\n<img><\/p>\n
\nResources:
\nW3Schools<\/a>
\nHTML Cheat Sheet
\n<\/a>CSS Cheat Sheet<\/a>
\nOther links on our class Site<\/p>\n<\/div>\n
\nIn Class Lab: HTML Styling with CSS Formatting<\/p>\n
\nSee how the CSS changes not only the Style, but also the Functionality. (See Code sample)<\/p>\n
\n– Create a list and turn it into a navigation with at least 4 elements
\n– Create a page with several divs, play around with positioning.<\/p>\n
\nResources:
\nW3Schools<\/a>
\nHTML Cheat Sheet
\n<\/a>CSS Cheat Sheet<\/a>
\nBox Model Demo (Guy Routledge)<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"