Consolidated References: Introduction to Web Technology and Programming

• Course Expectations, Web Fundamentals, Developer Tools, HTML Basics

  • 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

• Deeper dive into HTML. Introducing CSS and styles

  • 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/

• Making your site work on (m)any devices

  • 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

• Reacting to User Input

  • Class Examples:

    https://github.com/RyanKadri/cis1052-fall2020-examples/tree/master/c7-reacting-to-input

  • W3Schools Examples:

    https://www.w3schools.com/js/js_htmldom_events.asp

  • Another JavaScript Events Tutorial:

    https://www.javascripttutorial.net/javascript-dom/javascript-events/This page goes into some detail we haven't covered in class yet. You don't need to know addEventListener or Event Bubbling yet

• 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

  • This course does not currently have any references. Please reach out for more information though!

• Promises, async functions, and servers

  • Promises:

    https://www.macadamian.com/learn/javascript-promises-explained/

  • HTTP Response Codes:

    https://developer.mozilla.org/en-US/docs/Web/HTTP/StatusDefinitely don't need to memorize these

  • HTTP Headers:

    https://developer.mozilla.org/en-US/docs/Web/HTTP/HeadersDon't memorize these either

• Common JavaScript Libraries

  • 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

• Modern JavaScript

  • This makes me feel bad at web development:

    https://x.dustinbrett.com/