Assignments

Each student is expected to treat the class as a studio where everyone is helping everyone else out. Use Discord to offer help to others, even those not in your group. Also, be sure to ask for help if you need it. This course flows much better when we're all concentrating on learning together rather than individually. Some students will have an easier time with the content (maybe they've coded before), and some may learn differently. I strongly believe all students can learn the course material; it's just a matter of time and of finding the right approaches and resources for them.

Each group is expected to meet at least once a week, either on their own or during class.

Groups are also expected to post a quick update in their Discord channel of what's been going on each week so part of your weekly meeting could be to generate that status report for us.

Please indicate in your learning journals what you did to give and receive help whenever possible!

It helps A LOT if you approach group work with compassion, generosity, and curiosity. Don't assume things about each other, and be genuinely curious about their lives. If anyone seems to be participating less than they should be, figure out how you can help them stay on top of their work by asking what they need rather than just yelling at them or not saying anything and building up resentment.

Please use Perusall (course code to be shared in Canvas) to annotate and comment on the weekly course materials, asking questions, adding clarification, and/or generally posting reactions. Each week, a student's Perusall annotations are worth up to 1 or 2 points (1 point is considered full credit, but it's possible to get 2 if you contribute a lot), depending on a number of factors including quality and quantity of annotations throughout the documents, commenting on and/or upvoting other people's annotations, etc. For 1 point, you're expected to do at least three good notes per reading.

To get started:

• Go to perusall.com, click Login, and then log in using your Facebook, Twitter, or Google account, or create an account using your email address and password. You should be able to choose your UW account using Google login if you've set that up correctly.
• Select I am a student and enter the course code (which will be provided in a Canvas announcement / email).

For a more detailed guide, consult the Perusall Getting Started page.

The list of readings can be found at the bottom of the Resources page.

Get acquainted with course materials:

• Familiarize yourself with this course website.
• Browse the Resources Page. In particular, check out w3schools for examples, references, and tutorials.
• Acquire textbooks (optional): HTML & CSS and Javascript & jQuery, both by Jon Duckett - Super clear and well-designed reference books, but they're not required, and there's A LOT of free resources on the web!

Get set up with course platforms:

• Join the course's Google Shared Drive. This is where we'll store collaborative documents that we can all contribute to and comment on in addition to your individual learning journals.
• Install the Discord mobile and/or desktop app, create an account (if you don't already have one), and join the group that will be sent out via Canvas.
• Introduce yourself in Discord (1 pt) in the appropriate channel and also indicate what your schedule will be for the quarter so that we can form small groups better.
• Create a Learning Journal (2 pts) using Google docs to use for the rest of the quarter in the Learning Journals folder in our Google Shared Drive. Write your first entry, reflecting on all this initial setup, how comfortable you are with coding already, what your expectations for the course are, etc. (See instructions for Learning Journals above.)
• Browse the Instructions and Resources folder in Google drive.

Set up workflow and form teams

• Set up GitHub Pages, Git, VSCode, CodePen, and general workflow (1 pt). Basically, we'll be using github as a way to store and share files among teammates and VSCode as the main coding app. Steps can be found in the Setting up a workflow document in the Instructions and Resources folder of our Google Shared Drive. Show that you've completed this by entering the URL to your github.io repository to a spreadsheet that we'll be using in our Google drive.
• Form teams (1 pt), fill in a Team Plan/Contract (provided through Canvas), start using your team's Discord channel, and enter in your GitHub Pages URLs in the Google doc we'll be using as the portal page. We'll determine the groups using mojo, heavily influenced by your Discord introductions, but, if you want to work with someone in particular, be sure to let us know. Teams may use other communication mediums in addition to Discord, but we expect each student to post at least once once a week on the platform to keep the instructors and teammates updated on their work. For the team contract, just copy that Google doc into your team folder in Google Drive and fill it out.
• Each teammate's github account should be added as contributors to all teammate's github repositories.

Each student should create a basic HTML page that lives in one student's GitHub Pages repository (5 pts).

Each student should create a page and name it "username.html" so that the repository has a collection of files, each named after a team member. Then the team should create an index.html page that links to all of the students' pages.

HTML stands for hypertext markup language. It uses tags around content to let a web browser know what type of content it is, like this: <p>Here's a paragraph!</p>

Tags often have attributes to specify specific properties. They appear in the opening tag as keyword="" like this: <p width="90%">Here's a paragraph that takes up 90% of the horizontal space!</p>

• The page you create must include these HTML tags:
• declaring what type of document it is with the <!DOCTYPE> and <html> tags,
• marking of sections of the document for invisible, meta information about the document (<head>) and for the main user-viewable content of the document (<body>),
• headings (<h1>, <h2>, etc.),
• paragraph <p>,
• which is different than a divider <div>,
• and a specific <span> of text,
• placing more weight on certain text with <strong>,
• and emphasis <em>,
• <table> for structured display of information,
• lists (<ol> and <ul>) and list items (<li>),
• anchor (<a>) and the href="" attribute to link to webpages and other things,
• and images with the <img> tag, using the attributes src="url", alt="alternative text", mostly for screen readers, and title="label here" that show up on mouse hover
• Refer to the Sample HTML Page for examples and a lot more information about how HTML works. You can right-click on the page and View Page Source to see the code. Alternatively, you can also hit F12 to see a panel on the right-hand side that shows a whole bunch of info about the page including a collapsed view of the source code. And, finally, a third way of seeing the code is to look at the Sample HTML page on the github repository for this course. You could also save the page to your computer and then open it with VSCode.
• After consulting the sample page, go to w3schools and look up each of the items in that list above and read those pages for lots of useful info about how to use those tags AND what they mean.
• When working with github, you have to coordinate with each other so that two people aren't editing the same files at the same time. Github can technically help you sort stuff like that out, but it's easier if you just take turns working on files.
• Therefore, it's suggested that one student should start, add stuff along with comments (see below), and then save their files and put them in the github repository.
• A second student in the team should then grab the files from the first student's github repository, edit them,, and put the edited files back into the first student's repo.
• Keep handing it off to a new teammate, saving it to the first student's github each time, until all teammates have had a chance to edit the pages.
• You can keep doing this, not necessarily in a specific order, over and over, until all teammates are satisfied with their additions.
• Each student should contribute the above items (and be mindful that html, head, title, and body should only appear ONCE on the page), and each student should also include:
• <!-- A comment with purpose of new code and mention of the source or inspiration for added code. -->
• Edited code should also be <!-- commented --> to detail any changes made from previous versions.

Each student should also add to their Learning Journal a reflection on this assignment (3 pts--details above).

Finally, each student should copy the Team Evaluation Template in our Google Drive and submit answers via Canvas (2 pts).

One of the things that you should learn how to do is to set up your own webspace and get your own domain name so you have somewhere to call home and to place all your actual web work. You'll be using this space for your individual projects instead of your GitHub Pages, which we're reserving for your team work.

Register domain name and get hosting:

• Get a $45 hosting account with Reclaim Hosting (who focus on empowering students with their own web presence that students then own and control absolutely), which comes with a free domain name registration! https://reclaimhosting.com/ (Let us know if this is a hardship for you and we can try to find other options, but this course doesn't have required textbooks so, hopefully, this cost is okay.)
• After you register an account and get set up, you can visit your client portal at https://portal.reclaimhosting.com/clientarea.php
• Note: If you already have a domain name and hosting, you can skip the above steps, but let us know!
• Put the URL of your new webspace in the common Google spreadsheet we'll be using as the portal page (3 pts).
• We'll provide a guide in Canvas and Google on how to do all this!

Familiarize yourself with cpanel:

• Reclaim Hosting (and other hosting companies) provide a dashboard for your site including a control panel (cpanel).
• Browse through the control panel options and try to get a sense of what tools and options are available.
• There are multiple ways to put .html files you create onto your new web space. One of them is through the file manager in cpanel. We'll show how to do this in class.
• Upload your own index.html page to your webspace or install Wordpress (2 pts).

Create a basic HTML + CSS page with a different student's GitHub Pages page (5 pts).

• Follow the same steps as above with the HTML page, basically, but with a different student's github repository. You should make a clone of the repository on the first student's github onto a different student's GitHub Pages repo and then work from there. Use the Sample Pages as a model for this iterative development. Read the Sample CSS Page and its source code, and comment your code!
• If you get stuck even after referring to w3schools and the additional tutorials on the Resources page, ask for help! Ask your teammates, the whole class, or the instructors!
• Pro-tip! Before you submit the assignments, see if you can resolve any issues that VSCode detects for your page. You can see what VSCode deems as problems by opening the debug panel on the bottom of VSCode. You can make the panel show up in three ways: Move your mouse over the bottom bar until you see the up/down arrow and drag up, go to View->Appearance->Show Panel, OR just hit control-J.
• The pages must include at least:
• various ways to specify a style at different hierarchies:
• with an externally linked stylesheet text file using the <link rel=""> tag in the <head> tag,
• using an embedded stylesheet using the <style> tag in the <head> tag,
• and in-line as a style="" attribute within another HTML tag.
• various ways to specify what should actually be styled:
• a specific tag like, say, you want all <a> tags to be styled in a particular way,
• only certain subsets of tags by using the class="" attribute in a tag and specifying .class in the stylesheet,
• A common use for a class="" attribute is to define different types of paragraphs <p>, for example.
• or specific unique elements that need to be styled a certain way through using the id="" attribute and #id in the stylesheet.
• This is often done to name a specific element (e.g., a specific <div>) so that you can make it do something when clicked on, such as the expanding and collapsing of assignments that you see on this page. (Have you looked at the source code for this page, yet?)
• various style changes:
• font size, weight, and treatment,
• position and alignment of elements,
• (Making something centered is surprisingly finicky in HTML/CSS so see if you can find good resources on that specifically!)
• treatment of images (like width, height, etc.),
• and using selectors such as :hover to change visibility for links or other elements.
• In general, you want to start using styles to define how different elements on your page look and stop using HTML attributes.
• For example, start doing this: <table style="width: 90%; border: 2px;"> instead of: <table width="90%" border="2">

Each student should also add to their Learning Journal a reflection on this assignment (3 pts--details above).

Finally, each student should copy the Team Evaluation Template in our Google Drive and submit answers via Canvas (2 pts).

Each student will work on an individual ongoing project for the quarter. The nature of the project is up to you, but it must be done in HTML/CSS + JS (with or without Bootstrap and/or other frameworks). It can be simple or complex, but it needs to be inspired by a strong vision for what the project is. Potential creations include portfolios, artwork, a page for an organization you belong to, personal websites, etc. We'll use Google docs for the planning of these projects.

Create a new Google doc in the Individual Projects folder and write at least a page that describes:

• the project purpose,
• resources or other work that inspired this project (include URLs and screenshots of inspirations!), and
• thoughts about what you'll need to learn or what resources you'll need to gather for project completion.

Bootstrap is a set of predefined styles and functions (AKA a framework) that a group of developers have created and shared with the world as a resource for others so they don't have to invent the wheel with each new website they create. It includes common ways to structure and layout a page, using a grid system.

Create Bootstrap versions of your pages, using a third student's GitHub Pages page (5 pts).

• As above, read and refer to the Sample Bootstrap Page and its source code, take turns with the repo, and comment your code!
• Learn how the grid system works, and use it to structure your page. Basically, Bootstrap treats each page as having an invisible grid that is 12 columns wide and however many rows tall as is needed. You can use the grid to structure your page in a way that makes it easier to read and understand. You can also use the grid to create a responsive layout, which means that your page will work on all screen sizes.
• Then include:
• a navbar,
• flexboxes,
• and any other elements you want to play around with, like jumbotrons, etc.

Each student should also add to their Learning Journal a reflection on this assignment (3 pts--details above).

Finally, each student should copy the Team Evaluation Template in our Google Drive and submit answers via Canvas (2 pts).

This assignment is meant for you to explore different options and document the process of narrowing down designs for your ongoing project. By the end of this assignment, you should have a good idea of what you'll be making for the rest of the quarter and how to go about doing that work. If you need inspiration for the different types of things you could include in your project, check out projects on CodePen, browse these 40 Javascript projects for beginners, and see the how-to demos on w3schools.

Tasks:

• Sketch out the wireframe for your final project. You can do this with software (like with figma or draw.io) or on paper that you scan or take photos of, but it should be presentable (so if you take a photo of a drawing, make sure the drawing is neat and legible, edit the photo so it's high contrast and is cropped correctly, etc.).
• Try some initial coding, styling, and commenting in VSCode. You should probably create a new repository (or folder in your GitHub Pages repo) to work on this, making sure to update the repo consistently (backups are good!). If you can, put your web files into your webspace (e.g., on your Reclaim Hosting space). You can do this in several ways. The easiest is to go through cpanel and upload it with the File Manager. Another way would be to link VSCode to your hosting site and have it automatically save files there. If you can't figure it out in time for this assignment due date, don't sweat it. We'll go over it in class and there's still a couple of weeks before you actually have to have something on your site.
• Add a new section to your Individual Project Google doc write-up and include your sketches and the URL for your ongoing project. Also, include further thoughts on the project and what the plan is for moving forward.

Show off your website project in its current form (5 pts). Individual students should have ready for viewing their works-in-progress website with features working and ready to test. Final aesthetics are not necessary, but the main forms of interaction and sections should be there.

Each student will provide feedback to at least three other students' websites. You can do this by visiting their website and then going to their Google doc to see their wireframes, etc., and leaving comments there. Then go to the URL spreadsheet and indicate which students you left feedback for.

Each student should add to their Individual Project Google doc a reflection on the feedback they received and what they plan on changing (2 pts). Start by copying and pasting all of the feedback you received into your Google doc. Then sort through it and order it based on topic or suggestion (it helps to see if multiple people gave the same suggestion!). Then write a response for what you'll change or not based on the feedback received.

Ok, here's where it gets complicated fast. Javascript is a programming language and many consider the skill ceiling for it much higher than just HTML/CSS. You could study and use Javascript for years and still not feel like an expert. That means this course must focus on introducing you to the resources available for continued learning after the course is over. There are some fundamental components to any programming language that you should learn. Getting that foundation down will help with all programming languages in the future (and generally help you think logically in other disciplines as well!).

For this assignment, you'll follow the same process as the other group work assignments in creating a page on a different student's GitHub Pages, but it will be difficult just seeing from the code whether all students "get it." This is another reason why the Learning Journal is so important. Even if you don't fully understand, I want to see evidence that you're earnestly trying and that you have a plan for moving forward.

Hopefully, by now the course runs as a supportive community where we all help each other. If you get stuck, just post a question on our online discussion board, come to an optional session, or ask for help!

As above, read and refer to the Sample JS Page and its source code, work iteratively together, comment code.

Create a page that does the following (5 pts):

• Declares a variable and set its value.
• Uses an array (AKA a table of variables stored as a set).
• Creates a function.
• Tests conditional logic (AKA uses an if-then statement or a switch of some sort).
• Creates a loop that runs multiple times until some end condition is met.
• Makes some element execute the function when clicked on or is interacted with somehow by the user.

Each student should also add to their Learning Journal a reflection on this assignment (3 pts).

Finally, each student should copy the Team Evaluation Template in our Google Drive and submit answers via Canvas (2 pts).

If any individual student (or group) wants to play around with animation using CSS, go for it! Create something and write about it in a new journal entry, and you can receive up to an extra 5 points.

Create something and upload it to your GitHub space then submit the URL in Canvas (3 pts).

Each student should also add to their Learning Journal a reflection on this assignment (2 pts).

Individual websites are due to show off in class. They should have a strong vision and clear evidence of your best execution of that vision given the constraints in place. That said, sometimes you have to try multiple things in design before finding something that works and moving forward in that direction, so it's not expected for you to have super final polished versions of your project up. Do work that you're proud of. Document these trials in your final reflection on the project.

Tasks:

• Submit final website. (5 pts)
• Update your files. Make sure the files on your web host are the latest versions.
• Comment your code!
• Append a new section to your Individual Project Google doc (5 pts) that includes a refined statement of intent (if it needs it), and then write at least two pages of reflection on the process of making the project. Be sure to include things you tried that didn't work! Also, include screenshots or diagrams or whatever other evidence you think would make a complete documentary of your work. We want to see hyper-detailed debrief and evidence of your process and thoughts during the process. If the final pages don't look like your mockups, there should be stuff written down about why that is and how that happened.