Consolidated References: Introduction to Web Technology and Programming

• Intro to HTML and Web Concepts

  • HTML Element Reference:

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element

  • Class Examples:

    https://github.com/RyanKadri/cis1052-fall2020-examples

  • HTML Tutorials:

    https://www.w3schools.com/html/default.asp

• Styles and CSS

  • CSS Selector Target Practice:

    https://flukeout.github.io/

  • CSS Selector Cheat Sheet:

    https://adam-marsden.co.uk/css-cheat-sheet

  • Palette Builder:

    https://material-ui.com/customization/color/#color-tool

  • Weird CSS Named Colors:

    https://www.impressivewebs.com/weird-css-color-names/

• Website Layout

  • Flexbox Froggy:

    https://flexboxfroggy.com/

  • Grid Garden:

    https://codepip.com/games/grid-garden/

  • Media Query Reference:

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

• Using CSS Frameworks

  • CSS Specificity:

    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

  • Pseudo-Classes:

    https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

  • Specificity Calculator:

    https://specificity.keegan.st/

  • Bootstrap:

    https://getbootstrap.com/

  • MUI:

    https://www.muicss.com/docs/v1/getting-started/introduction

  • Water.css:

    https://watercss.netlify.app/

  • Code from this class:

    https://github.com/RyanKadri/cis1052-fall2020-examples/tree/master/c4-css-frameworks

• Introduction to Javascript

  • MDN JavaScript Reference:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript

  • Learn Programming Online:

    https://learnprogramming.online/

  • Learn JavaScript Online:

    https://learnjavascript.online/

• JavaScript and the DOM

  • DOM Tutorial:

    https://www.javascripttutorial.net/javascript-dom/This is a good reference but covers more than what we've learned in class so far

  • MDN DOM Reference:

    https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/IntroductionThis guide is a bit long-winded but try to power through it. If you're getting confused, don't worry too much

• Handling User Inputs with JavaScript

  • DOM Tutorial:

    https://www.javascripttutorial.net/javascript-dom/This is a good reference but covers more than what we've learned in class so far

  • MDN DOM Reference:

    https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/IntroductionThis guide is a bit long-winded but try to power through it. If you're getting confused, don't worry too much

• Functions and Callbacks

  • A short callback summary:

    https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

  • More in-depth callback explanation (sync and async):

    https://www.javascripttutorial.net/javascript-callback/

• Asynchronous JavaScript

  • A short callback summary:

    https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

  • More in-depth callback explanation (sync and async):

    https://www.javascripttutorial.net/javascript-callback/

• JavaScript and the Network

  • A short callback summary:

    https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

  • More in-depth callback explanation (sync and async):

    https://www.javascripttutorial.net/javascript-callback/

• JS Libraries and Web Hosting

  • JQuery Documentation:

    https://learn.jquery.com/about-jquery/how-jquery-works/You can read this if you're interested but don't try to learn it all unless you really want to

  • ChartJS Documentation:

    https://www.chartjs.org/docs/latest/getting-started/Also don't try to memorize this

  • Self-Hosting from the Ground Up:

    https://fuzzytek.ml/tutorials/selfhostingguide/Probably not worth jumping through all these hoops for a web site. But interesting and informative if you're curious