Recitation 4

# Safety Examples - Venmo - What aspects of Venmo's interface cause a safety issue? How can Venmo's solution fail? - DS160 Forms - See attached in gmail and thunderbird # CSS Review - [CSS Selector Game](http://cssdiner.com) # HW3 Critique - [Filter](examples/filter) - [Animations](examples/animation) - [List Styles](examples/listStyles) - [Position](examples/position) - [Text Shadow](examples/text-shadow) - [Border Margin Padding](examples/border-margin-padding) - [Background](examples/background) # HW2 Feedback - Relative URLs - **Don't** use host relative urls: `/recitations/4/index.html` - **Do** use path relative urls: `../3/index.html` - Why? When grading we might serve your homework files from a different path than the one you use locally so you cannot depend on the relative host url being correct. - If you need clarification see [recitation 1](https://designftw.mit.edu/recitations/1/index.html#absolute-urls) - Spaces in URLs - Spaces are not allowed in URLs. You can use hyphens to separate words. You can replace spaces in URLs with `%20`. - See Mozilla's [percent encoding docs](https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding) for a list of disallowed characters and their percent encoding equivalents. # Future Homework Expectations - Assets in subfolders - images or videos in an `images`, `videos`, `assets`, or `media` folder. - Uses accessible html - Need `alt` attribute for image tags, `title` attribute for video tags - label tag for input elements - Separate presentation and markup - Do not use html elements to control styling for example deprecated tags such as font or center or using multiple br tags to control page layout - Do not copy and paste the same inline style tag. Be DRY, follow the three strike rule, and put common style tags in a css stylesheet - Appropriate use of semantic html - Use main tag to identify the primary content on the page - Use section tag to identify a group of related content - Use title to identify the current page - Only use one `h1` tag per file and subsequent h tags should not skip levels i.e. (`h2` > `h4`) - See [semantic html cheat sheet](https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/) for tips - Appropriate use of html tags - Don’t use header instead of head - Use template files if they are provided # Useful Bookmarklets Bookmarklets are links which contain javascript which can perform actions on the current page. You can run either of the bookmarklets below on the current page by clicking on the link. You can drag the link into your bookmark bar and run the link on any page you visit (including your homework assignments). - Refresh CSS - Refresh all stylesheets on the current page - Credit to [Lea Verou](https://lea.verou.me/2018/09/refresh-css-bookmarklet-v2/) - Validate HTML - Validate your html with the w3 html validator. This validator will show you many warnings and you don't have to worry about all of them. But take errors seriously. - Credit to [Deque University](https://dequeuniversity.com/validator#bookmarklet-source)