assignments

1. getting started due Thu Sep 9

• Tell me about yourself - what your coding and internet background is and what your goals and interests are in relation to this course.
• Make a static website with (at least) one .html file, one .css file, and one image. The content and design are up to you - it could be about a place or a movie or a blog essay or whatever you like. Create a folder within share/a_static_site , upload your files, and on the assignment page discuss what technology elements from HTML and CSS you used and what design choices you made. To find tutorials and resources for this material, look on the course resources page. The Structuring the web tutorial at MDN is a good place to start if this is new to you.
• Suppose you sit down at a computer on campus that you've never used before, open up a browser, and type in the URL for that static web page. Describe as best you can everything that happens in that computer and in the larger internet when you hit Return and page loads.

2. deploying a website due Thu Sep 16

• Create another html + css + images site, this time with navigation & multiple pages. You're welcome to start from a template, but if so understand it and adapt it. Do think about design & accessibility.
• Explore web hosting and name registration. Deploy your website, either somewhere of your choosing, explaining what you did. I'll go over a couple of examples on Monday.
• If you have more time and/or feel comfortable with all that and would rather move on, start reading about JavaScript and the DOM using the links on the resources page - that's where we're headed after this.

3. client side javascript 1 due Thu Sep 23

• Make a web page that does something using javascript ... how much and what is up to you, depending on your background and experience.
• Use the time to explore (a) the language and (b) the DOM, using the links on the resources page.
• Describe what you did and what you studied.
• If you aren't sure what to do, make a javascript page that looks like a tic tac toe board, and which lets the user click to draw X's or O's.

4. client side 2 : ajax + libraries due Thu Sep 30

• Make yet another web page (html, css, js), adding two more ideas : at least one external library (such as jQuery or underscore) and include data from an external site using AJAX. Again, the specifics and depth of the effort is up to you.
• I've posted some resources to learn about this stuff on the Sep 23 notes page ... and I'll show an example on Monday the 27th.
• Please do again share and describe what you did so that we can discuss all this in class.

5. client side 3 : react framework due Thu Oct 7

• Explore one of the popular js frameworks.
• React :
  • Work through the React tutorial or their getting started docs, including installing node and running an example on your local machine.
  • Pick a react example project, for example one of their reactjs.org/community/examples to look at closely and install. Explain how information flows in this example through "state", "props", and "actions".
• Svelte :
  • Work through a svelte tutorial such as MDN: svelte or svelte.dev/tutorial , including installing it and trying it out.
  • Pick an example to look at, understand an explain; google "svelte example" or "svelte calculator" . For example this calculator.
• Whatever you choose, come to class on Thursday ready to explain to others the example you chose.
• No need to submit code this week (though you can if you like) - just describe what you did and summarize what you learned, along with urls for the material that you studied. Do put a page in the share/js_frameworks folder with a link to an example to discuss.

6. networks 1 due Thu Oct 14

• Browse the material at resources : networks page
• Read the first chapter of An Intro to Networks
• Install wireshark and play around with it :
  • check out its user manual and/or google "wireshark tutorial"
  • capture & examine some packets :
    1. start capturing some packets
    2. with a browser, visit a website
    3. stop capturing packets
    4. in the wireshark capture, find the packets that loaded that website
    5. how many other packets are in that capture?
    6. what are some of the protocols? (What is your computer doing in the background ...)
• Questions to test your understanding:
  • Suppose your computer's network page lists (IPv4:192.168.1.108 subnet_mask:255.255.255.0 router:192.168.1.1 DHCP:... DNS:...). What happens when your computer wants to send a packet to 192.168.1.23? To 192.169.0.22? To 23.3.115.251?
  • What is this 1.1.1.1/dns all about? Is that a good idea for you to use?
  • What's the difference between IPv4 and IPv6? Which one is your computer using?
• Describe on the homework submission page what you did and how it went.
• Come to class on Monday ready to discuss what you've started and what questions you have.

7. cgi & php due Thu Nov 4

• Read about backend CGI (common gateway interface) and PHP scripts using my notes and the links there.
• Create a user account for yourself on shandshell, following the recipe that I gave in the notes.
• Create a folder on sandyshell under /var/www/sandyshell for your work, similar to what I did with /var/www/sandyshell/jim in my notes.
• Write both a .cgi and .php script which shows who has visited the site and how many times. It should
  • contain a form that asks for a visitor's name
  • read and write to a sandyshell file for persistant storage - the format is up to you
  • report who has visited (i.e. submitted the form) and how many times
• In your homework submission, describe what you did, what worked or didn't work, and link to your work on sandyshell.

8. SQL due Thu Nov 11

• Read about SQL and SQLite using the links in the resources page.
• Try some of the wikibooks:sql_exercisesand/or work through some of swcarpentry's SQL tutorial , using sqlite on the command line, as described in class on Mon Nov 9.

9. flask part 1 due Thu Nov 18

• Install flask on your local machine and start exploring how it works.
• I suggest working through as much of this digitalocean tutorial as you have time for. Its code is in this github repo, though you'll also need some environment variables and the right python stuff installed, as described in the tutorial. And I suggest using a virtual python enviroment, as explained in this companion tutorial. (And one of the comments suggests that on Windows, you need to use "set" rather than "export" for the environment variables, if you're working in the windows command enviroment rather than the unix bash shell.)
• Tell me how you're doing with all this - no need to upload all the code.

10. frontend + backend term project due Thu Dec 9

• Create and deploy (on sandyshell or a server of your choice) your own frontend (html + css + javascript or framework) and backend (flask or similar) web project. Submit your code (perhaps in a .tar.gz archive) and a discussion of what you did, including references to docs, tutorials, and similar work. Your web project should include
  • some sort of user login
  • some type of content that users can contribute (recipes, stories, blog posts, images, etc)
  • some sort of persistent backend data store (such as a SQL database)
  • some sort of display and navigation through the contributed content
  • at least one javascript AJAX component that accesses a backend API.
• You may base your work on other similar examples; if so, credit all sources, and make clear what is your own work and that you understand what's what.
• Please do include a brief description of the network protocols and interactions between the client and server, and what data is stored where.

11. course evaluation due Fri Dec 17

• Jim's term feedback