stefanbund / 311

Stefan Bund's Client-side Web Development

Fall 2019 Term Instructional Media:

1. 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
2. sept 10, styling components using CSS modules in react, https://www.gatsbyjs.org/tutorial/part-two/#-style-a-component-using-css-modules
3. 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
4. on div styling, https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured#Functions
5. css grids, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
6. guide to creating your own Linux instance on EC2/AWS: https://www.loom.com/share/c7e11169e2d14140ad526615962c44f7
7. 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
8. oct 1, introducting bootstrap https://www.loom.com/share/05ecb40fed8c4c7d8d470356425392e1
9. oct 3, the boostrap rubric: container, row, column, input and buttons, radios and checkbox UI elements, https://www.loom.com/share/1779feb958f64f1889efa0220ceb1675
10. UI elements in CSS3 Bootstrap: text inputs, radios, checkboxes, tooltips, praefills and classic buttons, https://getbootstrap.com/docs/4.3/examples/checkout/
11. cards, containers, card decks in bootstrap and ecommerce layouts, https://getbootstrap.com/docs/4.3/examples/pricing/ Javascript Elements
12. 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

13. 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

1. go to https://goo.gl/forms/Z0xXX9YT6kevyI713 to construct teams.
2. go to https://www.useloom.com/share/836b7217ed9546ffab1f97ccccbd1c6a to view our motivational starter talk
3. 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

1. set up amazon hosting via S3, https://www.useloom.com/share/7d8f2f2638b046c6aba7c57b2b2e123b
2. core html, js, css, https://www.useloom.com/share/4ae64d7648344ab485dd82833f218962
3. javascript generating DOM nodes via create element, https://www.useloom.com/share/49b0c06e8a9b4d6ea176b76c7007ed0f
4. assignment one notes on drop down menus, https://www.useloom.com/share/45160ba03085448ea70d8b5d2120bc23

Phase 2

1. understand url parameters, and make them happen, https://www.useloom.com/share/6ef704b26d5a4b178e935fc3c06649a0
2. integrating url parameters, for-loop iteration into a responsive image gallery https://www.useloom.com/share/9b273f6cd03a45d686393f6de726ee67

Phase 3

1. Extensive tutorial on JQuery programming, cookies, CSS3 grids and DIY responsive design, https://www.useloom.com/share/abed46908fd5467ab7857a7866762619

Phase 4

1. Creating complete responsive websites using Bootstrap, https://www.useloom.com/share/81970de247124320a5585eda4d455533

Phase 5

1. 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
2. basic collaboration steps, https://www.youtube.com/watch?v=61WbzS9XMwk
3. github's own guides to collaboration,

Outstanding Reference Material

1. MDN beginner's reference, https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics