Project II

Introduction

The goal of this assignment is to challenge you to create a well-designed, easy-to-navigate, flawlessly coded multi-page website.

You can use default content provided (check Sakai) or you can pick your own topic (should have similar amount of content).

If you pick your own topic (which can make the project more fun, but does require extra work), I will award 5 points of extra credit to the project grade.

Deliverables

Your website will be published using GitHub pages with your own URL. Your repository name will be project-two. For example, your URL will be something like https://username.github.io/project-two/

Alternatively, you can name your repository something different, like my-project-topic.

I also want you to turn in a share link for you XD project (wireframes and prototypes).

Todos

Assets

Here are the required materials you need for your site. If you do not source them from an article or document relevant to your topic, you can write them.

  • An introduction (a couple of paragraphs) discussing the purpose of the site.
  • A logo. If you need help making a logo, let me know! You can always use a dummy / stock logo from the web.
  • About an article’s worth of text for the first inside page.
  • About an article’s worth of text for the second inside page.
  • About an article’s worth of text for the third inside page.
  • An embeded Vimeo or YouTube video for one of your inside pages.
  • An image for one of your inside pages.
  • An image for another one of your inside pages.
  • An FAQ section for one of your inside pages.
  • An inside page that lists the credits for your content.

Design

You should complete wireframes and prototypes to ensure you have a solid design in mind before you start coding. It will be worth just 10% of your total grade. It will not be critiqued like previous assignments, but it needs to look pretty close to your final result in HTML and CSS.

Students that complete a wireframe and prototype before they start writing code typically experience more clarity in how to tackle the project and less frustration throughout the project.

Architecture

The site should follow the naming conventions previously outlined in class (kebab-case, index.html, etc).

The CSS file should be in a css folder and named style.css.

All of the images should be in an images folder.

All of the inside pages should be named index.html and be in an appropriately named folder.

Expecations

You will be evaluated on your successful execution of HTML and CSS, as well as your site’s overall creativity and usability.

You should demonstrate that you have thought about good design principles (appropriate colors, typography, and layout), and that you can design a basic website using HTML and CSS best practices.

You should take the initiative to figure out how to do something (use some type of code) that we have not learned in class but that will enhance the aesthetic or usability of your site.

Tips

Here are some things to remember as you start your site, as well as some resources to help you along the way. The tips below are based on the most common mistakes students make, so read on to avoid the most common pitfalls.

  1. Read ALL directions carefully before you begin.
  2. Complete your wireframes and prototypes first.
  3. Design for mobile first, then write a media query for the desktop layout.
  4. Start with getting your main content working first. You can worry about a fancy navbar later.
  5. Always use relative links.
  6. Test your site thoroughly to make sure all links, images, and videos work.
  7. Test your site to make sure it looks good on both an iPhone X and a Desktop device that is 1280px wide.
  8. Try something new we haven’t covered in class.
  9. Don’t wait till the last minute. You will run into problems – and some of them might break your site completely – so you need to allow time to debug. Successful students have typically followed this rule of thumb: finish building the site a few nights before the deadline, to allow the last night for debugging. An extra bonus is that you’ll be able to get early feedback!
  10. Only use your own HTML, CSS, and JavaScript. You are permitted to use snippets I have provided to you in class or in assignments. Do not use any third-party resources (CSS, or JavaScript). This means no jQuery, no Bootstrap, no UI kit, no Bulma, etc. The goal here is to develop a reasonable understanding of the fundamentals of web development – not import a library to magically do it for us. (Small snippets are OK, explained more down below)

Examples

Here is an example of great student work. The student got the basics down, like using CSS Flexbox and CSS Grid. Then they went the extra mile and built an accordion by following a tutorial on w3schools.

Example 1

Here is an example of good student work. It is an impressive site, but it uses Bootstrap and jQuery, which we will not use.

Example 2

If you see something that you want to emulate, do a quick Google search on how to do it. You might find a tutorial for exactly that! If you can’t find anything, message me or schedule office hours, and I will show you how.

Rubric

Checklist

At minimum the HTML/CSS files you need are:

  • Home Page
  • Inside Page 1
  • Inside Page 2
  • Inside Page 3
  • Credits Page
  • Stylesheet

Wireframe and Prototype (10pts)

Site was first wireframe and prototyped in XD.

HTML (5pts)

Site structure uses in HTML5

CSS (5pts)

Site style uses CSS3

Functionality (20pts)

All links/menus work; site structure is easy-to-understand; user is never “trapped” and can navigate to any part of the site without having to use the browser’s back button.

Efficiency and Organization (15pts)

HTML and CSS files are clean and smooth behind the scenes. That means structure is logical; notes used when necessary; tags and classes used appropriately. There is a reasonable commit history in the GitHub repo. The commits have descriptive messages, i.e. not “Did project 2.”

Here are some examples of good commits:

  • “Stubbed out project files.”
  • “Added global navigation.”
  • “Added text content.”
  • “Finalized mobile home page.”
  • etc

Aesthetics (10pts)

Design choices consistent, professional and effective.

Responsive Design (10pts)

Website looks proper on iPhone X and on Desktop at 1280px wide.

A11y (Accessibility) (10pts)

Semantic elements are used where appropriate. Proper headings are used to split different sections. All anchor elements have titles. All image elements have alt attributes. All text is easy to read and meets recommended contrast levels.

Above and Beyond (15pts)

You can also call this Innovation and Creativity. It just means doing more than what is explicitly outlined to futher develop your development and research skills. It gives you a bit of freedom to make the project your own. Here are some examples of things people have added in the past.

  • Adding an interactive element, like a carousel or an accordion
  • Adding meta data, like OpenGraph tags, so that the shared link generates a rich preview on platforms like Facebook
  • Researching and implementing a cool CSS effect

Warnings

Because code is so accessible and so reusable, you must take extra care to not do anything that would be considered plagiarism in this class. Here are some tips.

  • Don’t use code that you can’t explain. Extra effects / features are nice, but I want you to understand how it works.
  • Don’t copy code/site wholesale. Looking to use a nifty hover effect? Cool. Looking to use a prebuilt five-page template? Not cool.
  • If you are copy/pasting code into your project, make a code comment listing the URL where you obtained the code and an explanation of how it works.
  • Do not work off the same codebase as a peer.