Stage 1: Stac Mock‐Up
Submit Assignment
Due Jan 28 by 10pm Points 100 Submitting a text entry box
For this stage of the course project, you will use HTML and CSS to create an initial static version of your web app. You can think of this as design mockup—it will include all of the appearance and content decisions, but no real interactivity (you will add that in the next stage). It will provide a “snapshot” of your app as it is being used, but which shows off the design and styling of the project.
Note that you are welcome to utilize a CSS framework such as Bootstrap or Materialize to help structure and style your page, though you will need to include at least some customizations—your app will need to include some CSS that you wrote yourself. The expectation is that you will write HTML and CSS code yourself to demonstrate and apply those skills.
Think about the design of your page before you start coding it! I recommend you try using a design tool such as Figma (https://www.figma.com/) , PowerPoint, or even just penandpager to draft a mock up of your page. This will let you decide what it should look like (colors, fonts, layout, etc), and give you a nice reference to work against when you actually start coding. This design work can be done even before we go over the technical skills needed to produce the page (i.e., after you finish the topic proposal).
We are happy to look at and give feedback on concept, design, or implementation at any point of any stage of your project!
Be sure and read through all of the page requirements below to ensure that your project’s design meets the requirements!
Objecves
By completing this assignment you will practice and master the following skills:
Creating new web pages from scratch
Writing semantically rich and accessible HTML
Using CSS to gives pages complex formatting and layouts
Harnessing media queries and CSS frameworks to produce responsive web pages Exploring advanced CSS and formatting features
Geng Setup
For this project you will be continuing to work in the same repo you created for Stage 0. You will be adding additional code (HTML and CSS) to what was already present in that repo. Thus you don’t need to create a new repo for this assignment!
You will need to create a new `index.html file in the root of your repo to contain your Stage 1+ work.
Note that this is separate and distinct from the proposal.html` page you made previously.
You can optionally create a new feature branch to do your interactive development, merging that back into master as you finish aspects of the project. This can be helpful for organizing your development, but is not required.
Site Requirements
While the exact subject, content, and design of your site is up to you, it will need to meet a few specific requirements to make sure you demonstrate your web development skills:
Content
Your website will need to include an index.html file to act as the “main page” of your application. Think of this as the “home page” of the app—the page that the user sees and interacts with. If your app will have multiple different pages or views, you will want to focus on the “primary” one that the user will spend the most time interacting with. For example, if you were making a social media app, then your “main page” would probably be the newsfeed or timeline, not the “find a friend” page. You should focus on designing the most important, central part of your app.
If your app will eventually support “user login” features, you should design the page as if the user were logged in.
Your app can include multiple .html pages if you wish—indeed, you will need to create at least one additional page to provide “mock interactivity” (see below). However, the interactive versions of your app developed in Stage 2 and Stage 3 will most likely only utilize a single .html page (the index.html file), so you should plan your app as a “single page” application.
Any .html pages you have should share a unified “theme” and structure—the same CSS rules must be applied to both. Later in the course we will discuss ways to “template” HTML to avoid duplicating shared elements such as navigation (or you can explore a templating engine such as Handlebars (http://handlebarsjs.com/) on your own).
Make sure each HTML page has appropriate metadata (https://developer.mozilla.org/en US/docs/Web/HTML/Element/meta) : the main page should include the author (you), a description, and a set of keywords.
Additionally, your page should include a favicon (https://www.w3.org/2005/10/howtofavicon) (an icon for the page); you can find lots of free icons at sites such as Icon Finder (https://www.iconfinder.com/) or The Noun Project (http://thenounproject.com/) .
Your web app needs to have sufficient content to make its layout and styling necessary (and to ensure it is complex enough to fulfill the project requirements)! A good minimum is about 23 printed pages worth of content. Your page should include both text content and at least 3 notable images or other media content (videos, etc).
Think about what content your page will be showing, and what buttons or forms it will have to enable the user to interact with it!
Include enough graphics and media to make the content exciting and engaging!
You are welcome to use stock images if appropriate. Unsplash (https://unsplash.com/) , Morgue File (http://www.morguefile.com/) , and Pixabay (https://pixabay.com/) are all good places to start looking
for free images. Make sure you have the rights to any images you use, and include attribution where appropriate.
The text and images on your page should be actual (sample) content, not just lorem ipsum placeholder text. We should be able to look at the page and believe that it is a real snapshot of your app! Text and images can be borrowed from other sources, though be sure to include appropriate attribution (https://developer.mozilla.org/enUS/docs/Web/HTML/Element/cite) .
Similarly, if your app includes a data table, be sure to give it realistic values!
If your app will include interactive graphics (such as a chart or a map), you should instead include a static placeholder image that is a sample of what that chart/map may be showing at a particular moment in time. You could create such a placeholder using your favorite graphics editor.
Your page content can be structured however you wish, but should include a header (https://developer.mozilla.org/enUS/docs/Web/HTML/Element/header) with appropriate content (e.g., the title of the page) and a footer (https://developer.mozilla.org/enUS/docs/Web/HTML/Element/footer) with appropriate content (e.g., copyright and contact info).
Mocking Interacvity
While your Stage 1 page is primarily a “snapshot” of the app’s content and design, you will want to show off how that content might change as the user interacts with the app. Thus your Stage 1 will include a second
.html page that will show what the app will look like after the user performs some interaction (e.g., a single “step” from your proposed functionality walkthrough).
To do this, you should first identify the primary point of interaction of your page. Think about the main piece of functionality in your app, and the most significant interaction that the user makes as part of that functionality. For example, if you were developing a social media app, the the main “feature” might be the ability to post status updates—and the user does this by filling in a form and clicking a “post” button. That post button would be the primary point of interaction for your app.
Take this primary point of interaction, and implement it as a hyperlink to a second .html page (name the page something appropriate). The second page should be a version of the index.html file, changed as if theuser had interacted with the page (e.g., with the new post included). Thus by following that link, the user will be able to get a sense for how the page may be interacted with.
If the primary point of interaction is a , you should implement it as an element that is styled to look like a button! If the primary point of interaction is a the user submits, you can have that form’s action (https://developer.mozilla.org/enUS/docs/Web/HTML/Element/form#Attributes) attribute refer to the second .html file.
It’s a good idea to finish up the index.html page before making the second .html page, since they will likely share a lot of content!
Site Style and Structure
Your project will need to use CSS to specify the design and layout of your app’s content. The design of the app is up to you: I encourage you to get creative with how information might be presented. You might study examples from related pages (e.g., for related apps, systems, or organizations), or look at design examples such as from CSS Zen Garden (http://www.csszengarden.com/) , the Bootstrap Expo (https://expo.getbootstrap.com/) , or the Materialize Showcase (http://materializecss.com/showcase.html) .
It is not acceptable to build your page using an predefined template (e.g., in which you just fill in the content) or similar “prebuilt” work. The site you submit should be entirely implemented by you. You are welcome to get design ideas from other sources or look up how to achieve specific effects, but the entire page needs to be coded by you, not by someone else. If you include more than 1 line of code from another source, you need to include an appropriate citation.
It is acceptable to use a CSS framework such as Bootstrap, though you must use the most recent version (v4 for Bootstrap) as introduced in class if you do so. Moreover, even if you use a framework to help style your app, you will need to include some additional CSS rules of your own.
We expect you to have a few dozen different CSS rules for this project; you will need to include that much complexity in order to receive full credit on this proejct.
You should use CSS to style the page with appropriate colors, typography, etc. You can use a tool such as Adobe Color CC (https://color.adobe.com/) or the Material Design Color Tool (https://material.io/color) to determine a color palette.
You are welcome and encouraged to go allout on the artistry—just make sure that the page’s content remains navigable, readable, and usable!
But in order to demonstrate your development skills, your app should not entirely follow the default “flow” of content. You must also include styling that provides substantial “nonstandard” layout structures, such as columns (e.g., via flexbox) or grids. A single positioned or floated element will be worth partial credit; a multicolumn layout is sufficient for full credit (and see Responsiveness below for related requirements). Note that simply using a flexbox to make elements horizontally “inline” will not be sufficient.
Accessibility
As with everything, your web app should be accessible to all users, including those utilizing screen readers. You can ensure your content is accessible by semantically using HTML, applying appropriate headings and sections to make it navigable, and including text equivalents for the visual content (images) to make it perceivable.
You should utilize captions and ARIA attributes when appropriate, particularly if you utilize components of a CSS framework.
It needs to be possible to navigate your page with a keyboard. If your layout is really complex, you might even need to specify a tab order (https://developer.mozilla.org/en US/docs/Web/HTML/Global_attributes/tabindex) .
Run your web page through an accessibility checker such as WAVE (http://wave.webaim.org/) or AChecker (https://achecker.ca/checker/index.php) to confirm it is accessible. Or better yet, open up a screenreader such as Voice Over and try listening to your work!
Responsive Design
Your web app must be responsive and usable on both large desktop displays and small mobile devices. This means using adaptive layouts and multiple media sizes (e.g., different resolution images for different devices).
You must follow mobilefirst design principles (https://info340.github.io/responsivecss.html#mobile firstdesign) when styling your page. In fact, I encourage you to take a “mobilefirst” approach to both your design and to your implementation: make it work on mobile, and then expand to work on desktops.
Remember to specify the viewport meta so that your page will actual be responsive!
Using a CSS Reset file such as normalize.css (https://necolas.github.io/normalize.css/) or Bootstrap Reboot (https://medium.com/cssmine/bootstrapsrebootnextevolutionarystepforcssreset a30f718521b9) is a good idea for making sure your site looks the same across browsers.
Additionally, to demonstrate that your site is actually developed to be responsive (beyond the flow adjustments caused by the browser), it must include at least one significant layout change when moving between large and small displays. For example, perhaps a single column on mobile transforms into multiple columns or a grid on a desktop, or the layout of the navigation menu changes. CSS frameworks can help with this requirement, which also pairs well with the above need for a “nonstandard” flow.
Note that using a CSS framework such as Bootstrap is not sufficient for this requirement; your CSS will need to include some media queries to receive full credit.
Design Polish and User Experience
For this project, we expect your design (read: CSS styling) to include a high level of polish and refinement. The goal is to make the app as exciting and engaging as possible—to really make it “pop” to the user! This means looking like more than just a Bootstrap template, with the kinds of polish and effects that make the app seem more “modern” (and which require more advanced CSS work!).
There are two parts to this requirements:
1. The app’s design and styling needs to be deeply considered and polished. This means that you’ve thought about (and customized!) aspects like color, typography, positioning, etc. While this course does not focus on design, we want to make sure that you’ve actually considered how to use CSS to make a modern and pleasant looking webpage.
You’ve all used popular web pages; you should have a sense for what pages “look good” and what pages don’t!
2. The app’s design needs to be engaging to the user, while remaining usable. One effective way to do this is by using CSSbased interactive effects. For example, hover or focus highlighting effects can help make links standout and make it easier for the user to navigate the page. Additional design effects may include the use of:
CSS 3 specific effects such as box shadows
multilayered or gradient (https://developer.mozilla.org/enUS/docs/Web/CSS/lineargradient) backgrounds images
inpage iconography (e.g., with Font Awesome)
CSS framework components (such as a navbars, cards, carousels, modals, etc.). Note that some components may require including a bit of JavaScript.
Parallax scrolling (https://www.awwwards.com/30greatwebsiteswithparallaxscrolling.html)
effects
CSS 3 transforms (https://developer.mozilla.org/en US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) (e.g., rotating!) CSS 3 transitions (https://developer.mozilla.org/en US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) or animations (https://developer.mozilla.org/enUS/docs/Web/CSS/CSS_Animations/Using_CSS_animations) (e.g., for fancy hover or click effects)
You are definitely not required to include all of these features, and there are other advanced techniques you could use instead. But the goal here is for you to push beyond the basics covered in the exercises, and stretch your own development skills in creating this project.
Many of these features may require you to do further independent learning to figure out how to use them. This is intentional: web development involves picking up and applying new technologies, and this requirement gives you a chance to practice that.
Note that as you include features to make the page “pop”, make sure that you don’t compromise the usability! For example, don’t include animations that cause the user to wait a long time to use your page or click on links. The most effective effects are often subtle. You can include details about yoru advanced design components in the README.md file to make sure we don’t miss them when grading!
A note on grading: we will be scoring this section based on the design complexity and refinement of the app’s styling. As a simple heuristic, something at the design complexity of the iSchool home page (https://ischool.uw.edu/) or Twitter (https://twitter.com/) would be worth full credit, while something that looks as nice as reddit (https://www.reddit.com/) would be around 80% credit. To be clear: just duplicating features and effects from the exercises will not be worth full credit on this requirement.
Deployed Web Page
You will need to “publish” your styled webpage to GitHub Pages. To do this, you will need to checkout the gh-pages branch, merge changes from the master branch, and then push the gh-pages branch to GitHub. You should continue to be able to access your app at
https://info340a-wi19.github.io/project-yourusername/
Tag Final Commit
Again, you will need to tag your final commit so we know what version to grade. Make sure you take the last commit on the master branch!
git tag stage-1
Subming Your Project
To submit your project, do the following:
1. Confirm that the project is complete and meets all the requirements. You can run your page through appropriate validator tools to check your work (e.g., WAVE (http://wave.webaim.org/) to test for accessibility issues). It should work on both small and large screens, and with no screen at all!
(Although not required, it’s a good idea to also update the README.md file to describe your project).
2. Make sure to run the linters provided through the included test suite to validate your code (i.e., run the jest command). We expect all submitted code to pass the tests.
3. IMPORTANT! Please complete the Submission Questionnaire (https://goo.gl/forms/zc0qfyI9jpxJ3Qqu1) for this project stage. We will use these responses to calibrate grading and to improve the assignment in the future.
Do not skip this step!
4. add and commit the final version of your work, tag your commit, and push your code and tag to your GitHub repository (we will be grading the code at the stage-1 tag of the master branch). Also make sure you’ve pushed the final, “publishable” version of your work to the gh-pages branch.
5. Submit both (1) a link to your code repo and (2) a link to your published web site to Canvas using the button at the top of the page.
Stage 1 Rubric
Criteria
Ratings
Pts
Site Content
Your site presents a static mockup of your app. The page contains sufficient content, including
23.0 pts
metadata, text, and media. The content is organized semantically, including header and footer
information. Your site includes a link that will “mock” interactivity via navigation.
Site Style and Structure
Your web site includes basic styling and design elements, including color, typography, and (non
20.0 pts
standard) layout. Your design makes the content navigable and readable.
Accessibility
Your site is accessible and can be utilized through a screenreader and keyboard. The site is both
12.0 pts
navigable (via structured and sectioning elements) and perceivable (via alt text and appropriate
aria attributes).
Responsive Design
Your site is responsive and usable on both small and large screens. It follows mobile design
17.0 pts
principles, and includes noticeable changes based on the screen size.
Design Polish and User Experience
Your web site is deeply considered, polished, and engaging to the user. It uses complex and
12.0 pts
advanced design and CSS features (e.g., CSS3 properties, framework components, etc.) to look
great and show off your awesome technical skills.
Coding Style and Documentation
Your code is valid, clean, readable, and commented when appropriate. You’ve avoided redundant
HTML elements and CSS rules, and use properties appropriately. CSS class names are
16.0 pts
informative and consistent. You’ve published your page to GitHub Pages, tagged this version of
your code, and completed the Submission Questionnaire.
Total Points: 100.0
