Skip to content

Assignments

  • Final Group Project Ideas

    We will go over this post in class to help you think about what to do for your final project and to also get started with getting you into groups. Overall Topic Guide For this semester, you will be required to create a project that tells a story using the information from the Dollar Street website. There is a lot of information on the Dollar Street website. It shows both people live in different countries and lets you compare their monthly income and how they are living: what their rooms look like, what kind of appliances they own, what kind of shoes they have, how they bathe and much more. Your task will be to pick four to six families to compare and tell a story about. You could pick similar income families in different countries, different incomes in the same country, or whatever your group decides will be a good way to compare them and tell a story. You will also be able to use other CC or equivalent licensed content to add to your site if needed. Dollar Street Video Walkthrough This video walks you through what is available on Dollar Street and gets you started thinking on how you might use the data there to pick a topic for the final group project. View Walkthrough on Dropbox with closed captioning Technical Requirements You will get a more detailed list later, but keep in mind: Roles In your groups you will divide the work among yourselves. To make this clearer and the workflow easier you will each get defined roles. in general the roles will include: Everyone will need to be able to access the GitHub repository and write files and do Git Branching to support the work. All roles except for Project Management should be done by more than one person, so you will all have at least two roles. There should be at least two and no more than four people per group. Project Roles Survey I will give a survey link in class where you can indicate your preferences for roles. These will be a guide, but you will most likely have to do some part of a role that is not your first choice.

    Due Date:

  • Eleventy Portfolio Project

    OVERVIEW The Eleventy Site Project is taking the HTML/CSS/JS from your Responsive Site project and creating a site that is created with the Eleventy Static Site Generator and is hosted on Netlify. Due Date Tuesday, April 16 The class on the week of Tuesday, April 9 will cover topics related to Eleventy but not necessarily be devoted to the Eleventy Site project. We will be starting the group project as well that week. Submitting the Eleventy Site This page has more information on how to submit the midterm and schedule your presentation time. View Submitting the Eleventy Site post. ELEVENTY SITE SCORING RUBRIC SCORING RUBRIC Scored Areas% of Overall ScoreOrganization– eleventy config files (.eleventy.js, package.json)– content in Markdown files– template (at least base.njk layout template)– passthrough folders (css – js – images)Most of this should be in place from using the GitHub Classroom template.Related ResourcesMiro Boards on the proper 11ty structure.Starting Eleventy Personal Site Repository [ 19:43]20%DeployThe site is deployed through Netlify– The files are stored in a GitHub Repository– Netlify is connected to the repository and publishing the siteRelated ResourcesClass on Deploy to Netlify [1:49:50]Eleventy Portfolio Ready for Deployment postWeb Design Workflow Overview (miro)View Organizations in Github SettingsDeploy to Netlify postLink to sign in to Netlify10%ContentThe content of the site is there as described in your Project Brief. Please note any major changes when submitting file in Blackboard.15%Page ContentYou have created Markdown files for your site pages. These have the proper front matter and Markdown/HTML content.Related ResourcesView from [1:08:07] on 4/2 class: Transferring Files and Website Adjustments Smart Chapter15%TemplatesYou have at least one base template that is used to display your page content. Repeated site elements like header/nav/footer should be in templates.Related Videos15%ResponsiveYour site is still responsive (based on responsive site) using– Flexible Images– Fluid Grid– Media Queries as appropriate.10%Passthrough– Your CSS files are properly passed through and included.– Your image files are properly passed through and included.– Your JavaScript files are properly passed through and included. It’s OK if you don’t have JavaScript Files.Related ResourceOn this post: View the code under Update to .eleventy.js setup file5%CSSYour CSS– doesn’t have syntax errors– has meaningful class names10%Extra CreditYou can receive extra credit for using Collections and Templates.Related ResourcesEleventy Collections (miro)Up to 10%

    Due Date:

  • Submitting the Eleventy Site

    Here is what you will need to do to submit your Eleventy site The Eleventy Site is due on Tuesday, April 16.

    Due Date:

  • 11ty Portfolio Site Files Setup

    Code Updates to get your site to run Once your Project is set up it may still not run properly. Here are the code updates you wil have to make. Change all links to HTML files to remove .html The way 11ty works is that when it turns myPage.md into an HTML page it does not creaet myPage.html. Instead it makes a folder named myPage and then puts an index.html file in that. This means your links and paths to Images, CSS files and JS files have to change. For example from this To this Update to .eleventy.js setup file There is an error in the .eleventy.js setup file. Change lines 7,8 and 9 so that instead of _site, it uses src. Here is code you can copy and paste Moving Files from Old Assignment to New Assignment I have to note that there is a change needed for this because I made a mistake. All of the repositories that you have created so far are Private repositories. This means that you won’t be able to publish them on Netlify. We are going to take time in class to go over this as well. It’s going to require that you accept a new assignment and then move your files over. Step 0: Sign in to Github Go to https://github.com and sign in. Step 1: Accept the new Assignment Click on this link: https://classroom.github.com/a/l71OkOp7 Step 2: Export your files from original Github Repo NOTE: If you have not yet accepted this assignment or started work, then you can skip this step and the remaining steps and just use the assignment from Step 1. Step 3: Extract Zip file Most browsers will put the file in your Downloads folder. If you are on a Mac it may automatically extract. If you are on Windows you may have to right-click on the zip file and then select Extract All Either way, you should end up with a folder that is named the same as your repository with -main at the end. It will be something like: Step 4: Move Files in SRC folder to GitHub You should be ready to go at this point. Step 5: Commit your changes and sync Remember to:

    Due Date:

  • Responsive Portfolio Site Project

    OVERVIEW The Responsive Personal Site Project is taking the wireframes and other ideas from your Portfolio Brief and creating a responsive web site that will be housed on GitHub. Due Date Tuesday, March 12 RESPONSIVE SITE SCORING RUBRIC SCORING RUBRIC Scored Areas% of Overall ScoreOrganizationFolder and file setup– all .html files in the main project folder (not a sub folder)– all .css files in a css folder– all .js files in a js folder– all images in an images folder10%DeployThe site is properly on the web– The files are stored in the GitHub Repository created through GitHub ClassroomYou will then use GitHub pages to display the site.10%ContentThe content of the site is there as described in your Project Brief.10%Responsive 1: Fluid GridYou have created a layout that uses fluid units (fr, %) to allow the grid elements to change width as the browser changes width. CSS Grid Post15%Responsive 2: Flexible MediaYou have applied the appropriate CSS to allow your images and video to change size with their containing elements. Responsive Images and Video Post5%Responsive 3: Layout Adapts to Screen (Media Queries)You’ve used media queries (and other methods) to change the layout of your site based on the width of the browser being used to view the site (browser’s viewport). Media Queries Post15%HTMLYour HTML– Has the proper doctype, and meta tags.– Doesn’t have syntax errors– uses elements semantically; the appropriate element for the content inside of it (ie section, article, main, nav etc. and not just divs for everything).15%CSSYour CSS– doesn’t have syntax errors– has meaningful class names10%Visual DesignThe elements of your visual design match the target audience and look and feel described in your Portfolio Brief. I will focus mostly on layout, color, use of images and typography for this project.10%

    Due Date:

  • Portfolio Brief Assignment

    OVERVIEW The Portfolio Brief is a document to describe the Portfolio web site that you will be creating. It includes a number of areas where you will write about the project and create visualizations to show what it will be like. Template I have a template you can use to create the brief. We went over this in class on Week 3. Portfolio Brief Template Due Date Tuesday, February 13 Submitting the Portfolio Brief This page has more information on how to submit the midterm and schedule your presentation time. View Submitting the Portfolio Brief post. PORTFOLIO BRIEF SCORING RUBRIC SCORING RUBRIC Scored Areas% of Overall ScoreOrganizationClear Sections for all content areas– Project Name– Description– Target Audience– Goals– Look and Feel– Research– Site Map– Wireframes10%DescriptionDescribe what the project is.10%Target AudienceDescribe the people who will visit the site (demographic information, interests, profession etc)10%GoalsDescribe your goals: why are you making the site.Describe the users’ (target audience) goals. What do they want to see? What information are they looking for?10%Look and FeelDescribe the visual design and how you want the site design to make people feel. If there are interactive elements, describe those as well.10%ResearchProvide two to three sites that provide inspiration. For each site:– name of the site– link to the site (can make the name the link or show url separately)– reason the site was chosen– optional screenshot10%Site MapA site map that has a rectangle for each page of the site. The lines connecting the pages show how navigation works. You can use an org chart diagram in Word/Google Docs to draw this.10%WireframeEach type of page in your site map should have a wireframe for it. You can produce a lo-fi wireframe. You do NOT need to have hi-fi or mockup.Each page should have at least two versions (large and small/mobile) but preferably three (large/medium/small also written as desktop/tablet/mobile).30% Visualization Examples You will create two visualizations for your brief. Examples on this Miro Site Visualizations Board Sitemap Example This is an example. Yours will be different based on the content of your portfolio. BLOG POSTS Example of representing a group of pages with overlapping rectangles Wireframes LO-FI WIREFRAME These generally block out content areas of the page without showing the actual individual content items (title, text, list, image etc.) in detail. HI-FI WIREFRAME These wireframes do show individual content items, but DO NOT show typography or color and other visual design elements.

    Due Date:

  • Submitting the Portfolio Brief

    Instructions on how to submit your Portfolio Brief. FORMAT Please submit your brief as a single PDF file. I suggest using Microsoft Word or Google docs to create it and then exporting as PDF. You will most likely use some other tool (Figma, XD, etc) to create your wireframes and site map. Export an image from that tool and then import it into Word or Docs. Remember to organize the file so it has clear headings and sections. We will go over examples in class. DUE DATE Files are due to be uploaded to Blackboard on Tuesday, February 13. UPLOADING TO BLACKBOARD note: the assignment will be made available in Blackboard closer to the due date.

    Due Date:
  • Assignment 1: Portfolio Page Structure

    Assignment 1: Portfolio Page Structure

    This assignment is to take a page from one of the portfolios we looked at in class and recreate the overall page structure with HTML and CSS in a Pen on the site CodePen.

    Due Date: Tuesday, February 6