[html/css] HTML/CSS Issues (New Curriculum)

Index/Overall:

[x] Rename classes based off what they cover.
[x] Turn index slide into index page, open slides in new page
[x] Change exercise descriptions to use You case (second person).

Class 1 (Pamela)

[x] Fix bold things to actually look bold.
[x] Slide 5) Explore: Notice a cool effect on the webpage, post-it. Notice one thing that's confusing, post-it. Share with a partner. Remove content-organize questions. Change GDI SF site to GDI national.
[x] Slide 6) Hide it.
[x] Move goals/agenda/whatever to after the intro slide.
[x] Fix formatting of ANatomy slide to be like http://www.teaching-materials.org/htmlcss-1day/html-basics/slides.html#slide2
[x] Move tools after Anatomy, before folder structure, bold the tools.
[x] Best practices: Name your main file index.html, For naming files and folders, use lowercase letters, numbers, hyphens/dashes. Use the right extension, eg. .html for HTML files, .css for CSS files, .js for JS files.
[x] Remove questions from Exercise 1.
[x] Change P image to https://ka-perseus-images.s3.amazonaws.com/2b914caea7fdf9df8ff30e4780096d38624cab4f.png
[x] Add the code to HEAD/BODY page. Simplify description - HEAD is information about the page, BODY is content that shows up inside the browser window.
[x] Do in-class example during HEAD/BODY that shows text in versus text in <body></li> <li>[x] Meta tags, charset and viewport.</li> <li>[x] Exercise: Set up an empty page with all the tags that we just talked about.</li> <li>[x] Slide 33 exercise: 1) You're going to make a page about your favorite food, animal, or activity. First you need text! You can either copy/paste from a Wikipedia page or from an Ipsum lke veggieipsum, hipsteripsum, cupcakeipsum. 2) Add paragraph tags to break it into at least 3 paragraphs. 3) Add formatting tags to emphasize your favorite words. 4) Add headings to describe your amazing paragraphs. 5) Bonus: Add fun symbols from copypastecharacter.com</li> <li>[x] Attributes: Remove examples. Remove "placed" bullet.</li> <li>[x] Links: Remove title attribute. Reword to "To make a link, you need 3 parts":</li> <li>[x] Link Attributes: becomes LInk Targets. Remove mailto, #top.</li> <li>[x] Move Relative Paths to images section. Simplify those tags.</li> <li>[x] Exercise: Just change it to add 2 links that open in different windows. Remove title attribute question.</li> <li>[x] Rename Stand Alone to Empty. Change title to Empty Elements.</li> <li>[x] Move br to before img.</li> <li>[x] Images slide: Rename three components to three parts. Add empty alt example: <a rel="noreferrer nofollow" target="_blank" href="http://www.teaching-materials.org/htmlcss-1day/html-basics/slides.html#slide15">http://www.teaching-materials.org/htmlcss-1day/html-basics/slides.html#slide15</a></li> <li>[x] Exercise: Write a haiku about your topic, add line breaks. Add an image on your topic. Try linking the image.</li> <li>[x] Lists exercise. Remove suggestion to make lists of images. If you have time, try making a list within a list or a table.</li> <li>[x] Move tables to before lists.</li> <li>[x] Hide character codes slide.</li> </ul> <p>Class 2: (Jessica)</p> <ul> <li>[x] Remove "What is the deal with nesting?"</li> <li>[x] Remove the Check for Understanding that has answer "An HTML element".</li> <li>[x] Note: Show deleting CSS on girldevelopit.com to convey what it does. Link the image to the site.</li> <li>[x] Collapse CSS rule slides into <a rel="noreferrer nofollow" target="_blank" href="http://www.teaching-materials.org/htmlcss-1day/css-selectors/slides.html#slide5">http://www.teaching-materials.org/htmlcss-1day/css-selectors/slides.html#slide5</a>, possibly make our own version of pretty image with curly brackets</li> <li>[x] Embedded: "Can only be used in one html file." -> "CSS rules only apply to that page."</li> <li>[x] Linked: Change Linked to External in title.</li> <li>[x] In exercise, change hexadecimal to named color.</li> <li>[x] Remove "CSS syntax slide". ADd <a rel="noreferrer nofollow" target="_blank" href="http://www.teaching-materials.org/htmlcss-1day/css-selectors/slides.html#slide8">http://www.teaching-materials.org/htmlcss-1day/css-selectors/slides.html#slide8</a> instead</li> <li>[x] Rename "Selector: Element" to "Types of Selectors: element"</li> <li>[x] Move Color values slide after color property slides.</li> <li>[x] Add a slide that Shows Chrome Dev Tools for changing color.</li> <li>[x] "Try selecting " to "Try changing the colors of your paragraphs, headings and lists."</li> <li>[x] Add bonus to Fonts exercise, to use a Google web font.</li> <li>[x] Change title to "Types of Selectors: Position"</li> <li>[x] Put CSS pseudo-classes before IDs and elements</li> <li>[x] Remove crazy snake image.</li> <li>[x] Remove dagger from Cascading slide p{ -> p {</li> <li>[x] Cascading: At end, Show Chrome Dev Tools for viewing overrides. Prep in-class example that shows the cascade with a confusing equally ambiguous selectors.</li> <li>[x] Remove !important.</li> <li>[x] More CSS selectors: Remove exercise verbiage.</li> <li>[x] Closing out: remove "continue learning". Ask about what their favorite tag or CSS property is. Have them share with partners. Remove "We love feedback"</li> </ul> <p>Bonus Deck:</p> <ul> <li>[ ] Clients and servers, How to put your code online. Have them do it using BitBalloon.</li> </ul> <p>Class 3: (Pamela)</p> <ul> <li>[x] Remove "Note: all divs have semantic elements"</li> <li>[x] Move < span > before < div ></li> <li>[x] < span >-> add spans, give them a class, add a rule that changes their color</li> <li>[x] < div > - > Have them add styles to their divs in that first exercise.</li> <li>[x] Remove < Wrapper > slide.</li> <li>[ ] Possibly add a slide on display property.</li> </ul> <p>Class 4: (Jessica)</p> <ul> <li>[x] Add actual slide on fixed positioning</li> <li>[x] Bonus: Use fixed positioning for the header.</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/pamelafox"><img src="https://avatars.githubusercontent.com/u/297042?v=4" />pamelafox</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>Class 1 changes in this PR: <a href="https://github.com/gdisf/teaching-materials/pull/345">https://github.com/gdisf/teaching-materials/pull/345</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/pamelafox"><img src="https://avatars.githubusercontent.com/u/297042?v=4" />pamelafox</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>PR merged. The only task I decided not to address for now was adding a slide on display:property. Closing this issue.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/stale[bot]"><img src="https://avatars.githubusercontent.com/in/1724?v=4" />stale[bot]</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>This issue has been automatically marked as stale because it has not been updated in the last 30 days. It will be closed if no further activity occurs within the next 7 days. If needed, feel free to reach out on the #open-source channel in our Slack team. You can also mention an admin for further help and resources. 😊</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/stale[bot]"><img src="https://avatars.githubusercontent.com/in/1724?v=4" />stale[bot]</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>This issue has been automatically closed due to max staleness. Thank you so much for your contributions to Girl Develop It SF. Please feel free to open up another PR at any time. 💛</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

gdisf / teaching-materials

[html/css] HTML/CSS Issues (New Curriculum) #340