Interactive Web Development
33
stars
46
forks
source link
Stefan Bund's Client-side Web Development
Fall 2019 Term Instructional Media:
aug 29 ,gatsby get started guide, https://www.gatsbyjs.org/docs/quick-start/ or alternatively, use https://www.gatsbyjs.org/tutorial/part-zero/ to get started
sept 10, styling components using CSS modules in react, https://www.gatsbyjs.org/tutorial/part-two/#-style-a-component-using-css-modules
CSS fundamentals, to employ inside your new react components, https://developer.mozilla.org/en-US/docs/Learn/CSS , then go to https://css-tricks.com/ to investigate... We will utilize examples posted at https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started
on div styling, https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured#Functions
css grids, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
guide to creating your own Linux instance on EC2/AWS: https://www.loom.com/share/c7e11169e2d14140ad526615962c44f7
project guide, what to turn in on october 1-3 for first project, https://github.com/stefanbund/311/blob/master/October%201%20project%20guidelines.pdf
oct 1, introducting bootstrap https://www.loom.com/share/05ecb40fed8c4c7d8d470356425392e1
oct 3, the boostrap rubric: container, row, column, input and buttons, radios and checkbox UI elements, https://www.loom.com/share/1779feb958f64f1889efa0220ceb1675
UI elements in CSS3 Bootstrap: text inputs, radios, checkboxes, tooltips, praefills and classic buttons, https://getbootstrap.com/docs/4.3/examples/checkout/
cards, containers, card decks in bootstrap and ecommerce layouts, https://getbootstrap.com/docs/4.3/examples/pricing/
Javascript Elements
integrating javascript into html pages, getElementById, manipulating the DOM, adding html elements, augmenting properties of html elements in the DOM, interactivity, basic UI elements (buttons, text inputs, links), programming with links and the window object, https://github.com/stefanbund/311/tree/master/prior%20terms/phase%201 . Movie version of lectures:
12.1. set up amazon hosting via S3, https://www.useloom.com/share/7d8f2f2638b046c6aba7c57b2b2e123b
12.2. core html, js, css, https://www.useloom.com/share/4ae64d7648344ab485dd82833f218962
12.3. javascript generating DOM nodes via create element, https://www.useloom.com/share/49b0c06e8a9b4d6ea176b76c7007ed0f
12.4. assignment one notes on drop down menus, https://www.useloom.com/share/45160ba03085448ea70d8b5d2120bc23
javascript phase 2:
13.1 url parameters, https://www.useloom.com/share/6ef704b26d5a4b178e935fc3c06649a0
13.2 responsive interactivity, data iteration and divs, integrating custom css into interactive elements via appendChild, https://www.useloom.com/share/9b273f6cd03a45d686393f6de726ee67
Prior terms, spring '19:
Phase 0 Team Build, Syllabus
go to https://goo.gl/forms/Z0xXX9YT6kevyI713 to construct teams.
go to https://www.useloom.com/share/836b7217ed9546ffab1f97ccccbd1c6a to view our motivational starter talk
please download the 'industry affinity' spreadsheet from blackboard, then view this tutorial on how to create teams with the data here, https://www.useloom.com/share/7935a031f49a4c2ba423c016c1cd45bc
Phase 1 lesssons
set up amazon hosting via S3, https://www.useloom.com/share/7d8f2f2638b046c6aba7c57b2b2e123b
core html, js, css, https://www.useloom.com/share/4ae64d7648344ab485dd82833f218962
javascript generating DOM nodes via create element, https://www.useloom.com/share/49b0c06e8a9b4d6ea176b76c7007ed0f
assignment one notes on drop down menus, https://www.useloom.com/share/45160ba03085448ea70d8b5d2120bc23
Phase 2
understand url parameters, and make them happen, https://www.useloom.com/share/6ef704b26d5a4b178e935fc3c06649a0
integrating url parameters, for-loop iteration into a responsive image gallery https://www.useloom.com/share/9b273f6cd03a45d686393f6de726ee67
Phase 3
Extensive tutorial on JQuery programming, cookies, CSS3 grids and DIY responsive design, https://www.useloom.com/share/abed46908fd5467ab7857a7866762619
Phase 4
Creating complete responsive websites using Bootstrap, https://www.useloom.com/share/81970de247124320a5585eda4d455533
Phase 5
Creating a github organization, repository, and adding members to a team, https://github.com/collab-uniba/socialcde4eclipse/wiki/How-to-setup-a-GitHub-organization,-project-and-team
basic collaboration steps, https://www.youtube.com/watch?v=61WbzS9XMwk
github's own guides to collaboration,
Outstanding Reference Material
MDN beginner's reference, https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics