{"componentChunkName":"component---src-pages-wam-1-f-26-resource-js","path":"/wam1f26/resource/","result":{"data":{"allMarkdownRemark":{"totalCount":3,"edges":[{"node":{"html":"<h5>Class Materials</h5>\n<ul>\n<li><a href=\"https://docs.google.com/document/d/1vk6vJiTXhBOPzLV6Qt5Xkc3Q-IgyIl4uN5zsw0bEttY/edit?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub: Getting Started</a></li>\n</ul>\n<!-- - <a href=\"https://docs.google.com/document/d/1lCUC8q00CbQp9AV8wQqkdZMeLIOlEesEFp4aOfiQe84/edit?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">Using AI for Debugging: What to Consider</a> -->\n<ul>\n<li><a href=\"https://www.are.na/minkyoung-kim/graph-3325-01-web-as-medium\"  target=\"_blank\" rel=\"noopener noreferrer\">Class Are.na</a></li>\n<li><a href=\"https://github.com/RISD-Code-Lab\"  target=\"_blank\" rel=\"noopener noreferrer\">RISD Code Lab</a></li>\n</ul>\n<!-- - <a href=\"https://docs.google.com/document/d/1lzThEka7w6q2Fkm6QKMs02p0hjxIS3mmaI1Kx4OlYQ0/edit?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">Final Checklist</a>  \n -->\n <br>\n<ul>\n<li><a href=\"https://docs.google.com/presentation/d/19HQrur4GYoJE0dVeKCtfW8HYzlx96RFNQmRJqXsQdy4/edit?usp=sharing\" target=\"_blank\"  rel=\"noopener noreferrer\">HTML Basics and Setup</a></li>\n<li><a href=\"https://docs.google.com/presentation/d/1wYrHzXloZtNI3DNKy0C5Ely5nyZlLjaLQBgNXTtsqK4/edit?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">How the Internet Works &#x26; How to Stay Organized</a></li>\n</ul>\n<!-- - <a href=\"https://docs.google.com/presentation/d/1ZiuGJi7TtpybCppQMisXIt2G_x7c3BYAvow4AleHqBo/edit?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Form and Content</a>\n\n- <a href=\"https://docs.google.com/presentation/d/1UOaWUKpszZffKsAUWUz1J4pVZ5TPjBuhovlFIf2FOKo/edit?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Layout</a>\n\n- <a href=\"https://docs.google.com/presentation/d/18HJ3u_HTQM8yWzhbgsEESl4fat4eqvi3Nlf_K1p-3BQ/edit?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Transforms</a> \n\n- <a href=\"https://docs.google.com/presentation/d/1AlCXA7ZNh6ixPGFOyhXMo03rIUkN8BfuC8kbMtmSpZ8/edit?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Motion</a> \n\n- <a href=\"https://docs.google.com/presentation/d/1HYHGUYuAYmDV29EM-6hNVVGXGn58ksifrPk1F77AmTw/edit?usp=drive_link\" target=\"_blank\" rel=\"noopener noreferrer\">Responsive Web</a> \n\n- <a href=\"https://docs.google.com/presentation/d/1k-j5xf7yvzp3xHwZ6TJJ487HWqChf6aC1Z3UFkxrocA/edit?usp=drive_link\" target=\"_blank\" rel=\"noopener noreferrer\">JS DOM, Query, Event</a>\n\n- <a href=\"https://docs.google.com/presentation/d/1AEO6imwmWiTLivIPLtR_psZDWRaOJ0idEG3n-4Alp2U/edit?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">JS Conditionals, Function, Loop</a>\n\n- <a href=\"https://docs.google.com/presentation/d/1AEO6imwmWiTLivIPLtR_psZDWRaOJ0idEG3n-4Alp2U/edit?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">JS math.Random()</a>\n\n- <a href=\"https://docs.google.com/presentation/d/1bzApas4b9LyHy9dZpWv02s1JNAhmpaVnkG33ZFmP4qs/edit?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">p5.js Intro</a> -->\n<!--\n\n\n\n\n- <a href=\"https://github.com/RISD-Code-Lab/spring2021/tree/main/session-01\" class=\"indent-link\"  target=\"_blank\" rel=\"noopener noreferrer\">Javascript Toggle</a> [<a href=\"https://risd.hosted.panopto.com/Panopto/Pages/Viewer.aspx?id=2d2d218b-8ca4-498b-bdef-ad020100da7f\" target=\"_blank\">🎥</a>]\n\n- <a href=\"https://github.com/RISD-Code-Lab/spring2021/tree/main/session-02\"  class=\"indent-link\"  target=\"_blank\" rel=\"noopener noreferrer\">Using Randomness</a> [<a href=\"https://risd.hosted.panopto.com/Panopto/Pages/Viewer.aspx?id=4a6a02bf-8f62-495e-aebd-ad0900ff643c\" target=\"_blank\">🎥</a>]\n\n- <a href=\"https://github.com/RISD-Code-Lab/cl-spring2020/tree/master/session-09\" target=\"_blank\" rel=\"noopener noreferrer\">Publishing to the Web</a> -->\n<!-- - <a href=\"https://docs.google.com/presentation/d/11o7UZyZ1mcOfUG4MeGxOpp0tzWvwP-z2vzRMY0du3rc/edit?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery Basics and DOM manipulation</a> [<a href=\"https://www.loom.com/share/cb062c9bb4f34199a03b40103bacf061\" target=\"_blank\">🎥</a>] \n\n- <a href=\"https://paper.dropbox.com/doc/gdfwf-Working-with-data-JSONAPI--BtLSy1E8zz6Hsh2UeunZfV8bAQ-fRNivZZaqYKkaeamcoOzh\" target=\"_blank\">Working with Data: JSON/API</a> [<a href=\"https://www.loom.com/share/3673712869554e418ff9edfe7fb6913f\" target=\"_blank\">🎥 1</a>] [<a href=\"https://www.loom.com/share/c80ecba5dea24a0e80dc62ef6f5ed62f\" target=\"_blank\">🎥 2</a>]\n[<a href=\"https://www.loom.com/share/7b1844f32af04befb5944ff45c451fb7\" target=\"_blank\">🎥 3</a>] -->\n<!-- - <a href=\"https://github.com/RISD-Code-Lab/spring2021/tree/main/session-01\"  target=\"_blank\" rel=\"noopener noreferrer\">Code Lab Session 1: The JavaScript Toggle</a> -->\n<!-- - <a href=\"https://github.com/RISD-Code-Lab/spring2021/tree/main/session-02\"  target=\"_blank\" rel=\"noopener noreferrer\">Code Lab session 2: Using Randomness</a> -->\n<!--\n- <a href=\"https://github.com/RISD-Code-Lab/spring2020/tree/master/session-07\" class=\"indent-link\"  target=\"_blank\" rel=\"noopener noreferrer\">Drawing with p5.js</a> [<a href=\"https://drive.google.com/file/d/1eSo_13KC1S-TS-9Xqc2aQ69QYbsvkC35/view?usp=sharing\" target=\"_blank\">🎥</a>]\n- <a href=\"https://github.com/RISD-Code-Lab/spring2021/tree/main/session-05\" target=\"_blank\">Launch Website</a> [<a href=\"https://drive.google.com/open?id=1qDX1-zQ7J_EWG5QSJ3y_A24N1JRm9pdP\" target=\"_blank\">🎥</a>] -->\n<!-- \n\n\n\n\n\n\n\n\n\n\n\n\n<!--\n- <a href=\"https://github.com/RISD-Code-Lab/cl-spring2020/tree/master/session-07\" target=\"_blank\" rel=\"noopener noreferrer\">Drawing with p5.js</a>\n- <a href=\"https://paper.dropbox.com/doc/gdfwf20-Working-with-data-p5.js--A_8s3RJqdIy4jvWDe2Rgp52CAQ-fRNivZZaqYKkaeamcoOzh\" target=\"_blank\" rel=\"noopener noreferrer\">Working with Data: JSON/API</a>\n- <a href=\"https://github.com/RISD-Code-Lab/cl-spring2020/tree/master/session-09\" target=\"_blank\" rel=\"noopener noreferrer\">Publishing to the Web</a>-->\n<h5>Other Online Courses</h5>\n<ul>\n<li><a href=\"https://www.codecademy.com/\"  target=\"_blank\" rel=\"noopener noreferrer\">CodeAcademy</a></li>\n<li><a href=\"https://www.youtube.com/c/TheCodingTrain/playlists\" target=\"_blank\" rel=\"noopener noreferrer\">Coding Train</a></li>\n</ul>","id":"40cc6a3c-ec14-5e91-8ffe-a7755834305b","frontmatter":{"title":"Resources: Referneces","date":"2019-09-03"},"fields":{"slug":"/wam1f26/_resources/ref-1/"}}},{"node":{"html":"<!-- #####Other Assets -->\n<!-- #####Web Fonts -->\n<!-- - <a href=\"https://fonts.google.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Font</a> \n- <a href=\"https://fonts.adobe.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Fonts</a>\n- <a href=\"https://www.webtype.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Web Type</a>\n- <a href=\"http://typecast.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Type cast</a>\n- <a href=\"https://fontstand.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Font Strand</a>\n- <a href=\"https://www.modularscale.com/\">Modular Scale</a>\n- <a href=\"https://www.monotype.com/fonts/licensing-101/\" target=\"_blank\" rel=\"noopener noreferrer\">Font Licensing 101: The basics of proper font usage</a> -->\n<!-- #####Variable Fonts\n- <a href=\"https://v-fonts.com/\">Variable Fonts</a>\n- <a href=\"https://www.axis-praxis.org/specimens/__DEFAULT__\" target=\"_blank\" rel=\"noopener noreferrer\">Axis Praxis</a>\n- <a href=\"https://input.fontbureau.com/preview/?size=14&language=python&theme=solarized-dark&family=InputSans&width=200&weight=500&line-height=1.1&a=0&g=0&i=0&l=0&zero=0&asterisk=0&braces=0&preset=default&customize=please\" target=\"_blank\" rel=\"noopener noreferrer\">Input</a>\n- <a href=\"https://recursive.design/\">Recursive</a>\n- <a href=\"https://spectral.prototypo.io/\">Prototypo</a> -->\n<h5>File Structures &#x26; Naming Principles</h5>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\" target=\"_blank\" rel=\"noopener noreferrer\">Mozilla: Dealing with Your Files</a></li>\n<li><a href=\"https://developers.google.com/style/filenames\" target=\"_blank\" rel=\"noopener noreferrer\">Google Developer Documentation Style Guide: Filenames and File Types</a></li>\n<li><a href=\"https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/\" target=\"_blank\" rel=\"noopener noreferrer\">BEM(Block, Element, Modifier) Methodology </a></li>\n<li><a href=\"https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/\" target=\"_blank\" rel=\"noopener noreferrer\">More Transparent UI Code with Namespaces</a></li>\n</ul>\n<!-- #####Testing Platforms\n\n- <a href=\"http://jsfiddle.net\" target=\"_blank\" rel=\"noopener noreferrer\">jsFiddle</a>\n- <a href=\"https://codepen.io/\" target=\"_blank\" rel=\"noopener noreferrer\">Codepen</a>\n- <a href=\"https://glitch.com\" target=\"_blank\" rel=\"noopener noreferrer\">Glitch</a>\n- <a href=\"https://poet.codes/\" target=\"_blank\" rel=\"noopener noreferrer\">Poet</a> -->\n<h5>Debugging &#x26; Troubleshooting</h5>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools\" target=\"_blank\" rel=\"noopener noreferrer\">Mozilla: Developer Tool Guide</a></li>\n<li><a href=\"https://developer.chrome.com/devtools\" target=\"_blank\" rel=\"noopener noreferrer\">Chrome Dev Tools</a></li>\n<li><a href=\"http://validator.w3.org/#validate_by_upload\" target=\"_blank\" rel=\"noopener noreferrer\">W3C HTML Validator</a></li>\n<li><a href=\"https://stackoverflow.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Stackoverflow</a></li>\n<li><a href=\"http://www.sublimelinter.com/en/stable/\" target=\"_blank\" rel=\"noopener noreferrer\">SublimeLinter</a></li>\n</ul>\n<h5>Responsive Web &#x26; Media Queries</h5>\n<ul>\n<li><a href=\"https://alistapart.com/article/fluidgrids/\">Fluid Grids</a></li>\n<li><a href=\"https://css-tricks.com/dont-overthink-it-grids/\" target=\"_blank\" rel=\"noopener noreferrer\">Chris Coyier’s simple grid approach</a></li>\n<li><a href=\"http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/\">7 Habits of Highly Effective Media Queries</a></li>\n<li><a href=\"https://dev.opera.com/articles/css-viewport-units/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS viewport units</a></li>\n<li><a href=\"https://spec.fm/specifics/8-pt-grid\" target=\"_blank\" rel=\"noopener noreferrer\">8px grid</a></li>\n<li><a href=\"https://cssgrid-generator.netlify.com/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Grid Generator</a></li>\n<li><a href=\"https://alistapart.com/article/fluidgrids/\" target=\"_blank\" rel=\"noopener noreferrer\">Fluid Grids</a></li>\n<li><a href=\"http://screensiz.es\" target=\"_blank\" rel=\"noopener noreferrer\">Screensiz.es</a></li>\n<li><a href=\"https://mediaqueri.es/\" target=\"_blank\" rel=\"noopener noreferrer\">Mediaqueri.es</a></li>\n</ul>\n<h5>Cross Browser Compatibility</h5>\n<ul>\n<li><a href=\"https://caniuse.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Can I Use</a></li>\n<li><a href=\"https://csstriggers.com/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Trigers</a></li>\n<li><a href=\"https://autoprefixer.github.io/\" target=\"_blank\" rel=\"noopener noreferrer\">Autoprefixer CSS</a></li>\n</ul>\n<h5>SVG</h5>\n<ul>\n<li><a href=\"https://svgontheweb.com/\">SVG on the Web</a></li>\n<li><a href=\"https://thoughtbot.com/blog/svg-animations\">SVG animations</a></li>\n<li><a href=\"https://bennettfeely.com/clippy/\">CSS clip-path maker</a></li>\n</ul>","id":"cab61079-0940-5ac3-bca6-acc0fde5a17d","frontmatter":{"title":"Resources: Reading","date":"2019-09-04"},"fields":{"slug":"/wam1f26/_resources/ref-2/"}}},{"node":{"html":"<!-- #####Learning Code -->\n<h5>HTML</h5>\n<ul>\n<li><a href=\"https://www.w3.org/MarkUp/Guide/\" target=\"_blank\" rel=\"noopener noreferrer\">Getting Started with HTML</a></li>\n<li><a href=\"https://www.sitepoint.com/html-css-beginners-guide/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML / CSS a Beginner’s Guide</a></li>\n</ul>\n<h5>CSS</h5>\n<ul>\n<li><a href=\"https://www.htmldog.com/guides/css/beginner/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Beginner Tutorial</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=aHUtMbJw8iA&ab_channel=MozillaDeveloper\" target=\"_blank\" rel=\"noopener noreferrer\" >Mozilla: Why is CSS So... Weird?</a></li>\n<li><a href=\"https://css-tricks.com/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS-tricks</a></li>\n<li><a href=\"http://www.blooberry.com/indexdot/css/propindex/all.htm\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Property Index</a></li>\n<li><a href=\"http://css.maxdesign.com.au/listamatic/\" target=\"_blank\" rel=\"noopener noreferrer\">Listmatic</a></li>\n</ul>\n<h5>CSS: Typography</h5>\n<ul>\n<li><a href=\"https://alistapart.com/article/settingtypeontheweb/\" target=\"_blank\" rel=\"noopener noreferrer\">Setting Type on the Web to a Baseline Grid</a></li>\n<li><a href=\"https://css-tricks.com/methods-controlling-spacing-web-typography/\" target=\"_blank\" rel=\"noopener noreferrer\">Controlling Spacing Web Typography</a></li>\n<li><a href=\"http://megatype.studiothick.com/\" target=\"_blank\" rel=\"noopener noreferrer\">A responsive typographic baseline for the web</a></li>\n<li><a href=\"https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202\" target=\"_blank\" rel=\"noopener noreferrer\">Leading-Trim: The Future of Digital Typesetting</a></li>\n</ul>\n<h5>CSS: Layout</h5>\n<ul>\n<li><a href=\"http://1linelayouts.glitch.me/\" target=\"_blank\" rel=\"noopener noreferrer\">1-Line Layouts</a></li>\n<li><a href=\"https://learncssgrid.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Learn CSS Grid</a></li>\n</ul>\n<!-- #####CSS Preprocessor: <span style=\"font-weight: normal;\">A program that lets you generate CSS from the preprocessor's own unique syntax</span>\n\n- <a href=\"http://sass-lang.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass</a>\n- <a href=\"http://lesscss.org/\" target=\"_blank\" rel=\"noopener noreferrer\">Less</a>\n -->\n<h5>Javascript</h5>\n<ul>\n<li><a href=\"http://eloquentjavascript.net/\" target=\"_blank\" rel=\"noopener noreferrer\">Eloquent JavaScript</a></li>\n<li><a href=\"https://github.com/leonardomso/33-js-concepts\" target=\"_blank\" rel=\"noopener noreferrer\">33 Concepts Every JavaScript Developer Should Know</a></li>\n<li><a href=\"https://tylermcginnis.com/javascript-visualizer/\" target=\"_blank\" rel=\"noopener noreferrer\">Javascript Visualizer</a></li>\n<li><a href=\"https://sdras.github.io/object-explorer/\" target=\"_blank\" rel=\"noopener noreferrer\">Javascript Object Explorer</a></li>\n</ul>\n<!-- #####Javascript Libraries\n\n- <a href=\"http://jquery.com/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery</a>\n- <a href=\"http://jqueryui.com/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery UI</a>\n- <a href=\"http://jquerymobile.com/\" target=\"_blank\" rel=\"noopener noreferrer\"> jQuery Mobile</a>\n- <a href=\"https://reactjs.org/\" target=\"_blank\" rel=\"noopener noreferrer\">React.js</a>\n- <a href=\"https://d3js.org/\" target=\"_blank\" rel=\"noopener noreferrer\">D3.js</a>\n      -->\n<!-- #####Front-end Frameworks: <span style=\"font-weight: normal;\">A package that is made up of other files and folders, such as HTML, CSS, JavaScript, etc</span>\n\n- <a href=\"https://getbootstrap.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Bootstrap</a>\n- <a href=\"https://foundation.zurb.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Foundation</a>\n- <a href=\"https://semantic-ui.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Semantic UI</a>\n- <a href=\"https://designsystem.digital.gov/\" target=\"_blank\" rel=\"noopener noreferrer\">United States Web Design System</a>\n- <a href=\"http://patternindex.org/\" target=\"_blank\" rel=\"noopener noreferrer\">Patern Index</a>\n\n -->","id":"210983fa-39cf-56d8-9c2c-a5393038603a","frontmatter":{"title":"Resources: Tools","date":"2019-09-05"},"fields":{"slug":"/wam1f26/_resources/ref-3/"}}}]}},"pageContext":{}},"staticQueryHashes":["3159585216"]}