Loading edtechjoker..

These resources are here for your reference and will come in across multiple weeks as this is a project based, studio style course for learning how to develop web components in a manner more reflective of the web development profession.

• HTML Fundamentals - https://www.tutorialspoint.com/html/html_tutorial.pdf  - very long but if you need a more "book" style way of approaching the fundamentals this is a decent, comprehensive overview of JUST HTML
• CSS Fundamentals - https://www.tutorialspoint.com/css/css_tutorial.pdf  - same thing but for CSS about how to do child, parent, id, class and other forms of selectors as well as common attributes you can set
• JS Fundamentals - https://www.tutorialspoint.com/javascript/javascript_tutorial.pdf  - same but for Javascript. I'd still prefer google / stack overflow / codepen's to this way of learning but if you need a book, this is another one.
• Lit - https://lit.dev/  - This is the primary "base class" that we'll be using for this course. Backed by Google, small, and only providing some conventions on top of "the platform", Lit is the smallest possible web component library that has no opinions about what you are building. It also saves on repeating certain tasks like property data management, events, shadow root creation, and stateful variable updating
• OpenWC - https://open-wc.org/ - This is the tool chain we'll be using this semester in order to build web components accurately but also consistently. This provides a great starting point for any web project, let along web component based ones.
• Modern Webdev - https://modern-web.dev - A group that spawned off of OpenWC's success. This makes general recommendations for doing modern web development in a framework / project agnostic way.
• Node.js - https://nodejs.org/en/  - Back-end / CLI javascript engine. Uses JS in order to develop local tooling and servers.
• MDN - Mozilla Developer Network - https://developer.mozilla.org/en-US/docs/Web/Web_Components - MDN is the more authoritative source you can find when needing to learn anything about the web. I highly recommend getting comfortable with it's structure and reading examples there as we will be getting really in the weeds of different parts of the documentation.
• StorybookJS - https://storybook.js.org/  - Storybook is a cross-component-library way of presenting living documentation of your design assets.
• Javascript.info - https://javascript.info/  - A really solid book of all things JavaScript. We'll be using this and MDN a lot when questions come up about syntax and approaches.
• CSS Tricks - https://css-tricks.com/  - lots of articles about different CSS concepts, examples, tutorials, and "tricks"
• Can I use? - https://caniuse.com/ - Developer grid to suggest what APIs and concepts you can use based on the browser your users are using.
• Web.dev - https://web.dev/  - Google based recommendations and tools for how to build web properties
• Google Developer Network - https://developers.google.com/  - deeper dive of blog posts and tech walk through, grouped by year.

Additional Design libraries

https://patternflyelements.org/  - Red Hat VanillaJS based custom baseclass web components
• https://www.duetds.com/  - Lit based, well designed elements
• https://shoelace.style/  - really well designed Lit based element library. Similar styling to tailwindcss and well documented / simple
• https://webcomponents.psu.edu/  - Storybook instance communicating about the different elements that our team produces for the university
• https://opensource.adobe.com/spectrum-web-components/  - Adobe's design library in web components. Lit mixed into a custom baseclass​