CSCI-1080 Intro To CS: World Wide Web

Saint Louis University
Department of Computer Science

Web Project Topic

You are welcome to propose any project idea for instructor approval. If you need inspiration, here are a few customers that have submitted their website idea. Part of the SLU mission is to give back some service to the community, so please consider picking one of these projects.

  • Customer: Dr. Jeremiah Weinstock: Jeremiah.Weinstock@slu.edu (Associate Professor of Psycology at SLU)
    Project: Create website for Don't Go There, an app for individual with gambling disorders

  • Customer: Rachel Smith Bartels: rachel@mowaterkeeper.org (314) 884-1473 (Founder) Project: Update mowaterkeeper.org

  • Customer: Meg Krejci: krejci.m@wustl.edu (Employee Wellness Consultant at Washington University in St. Louis)
    Project: Update Meg's website http:masterpeacestudios.org/

Web Project Deliverables and Grading

The presentation should focus on website design and functionality; students will grade each others’ presentations. Attendance is required during the project presentation.

Websites must be complete and ready for the instructor to grade before the deadline specified on the syllabus. If the project is not complete by the deadline, the class will grade based on what the presenting student will show during the project presentation. The project writeup is due the day of the project presentation.

Breakdown of points allocated to the project are as follows:

Grade from Peer review 20
Goals/Content/Scope 5
Design 5
Functionality 5
Overall 5
Grade from Instructor 80
Website organization 12
Website content 15
Website design 15
Website use of tools 12
Website testing 6
Web Project Write-up 20

Online website building platforms are not allowed

To build your website, you may not use any online website building platforms that do not require coding, e.g., but not limited to, Wix, Weebly or Squarespace. One of the objectives of this class is to learn the basics of (web) development. To do so, students should gain some coding experience. Using platforms that allow you to build a website without coding is hence not very useful, although the design could be, in some case, beautiful and the effort to build a website could be lower. These platforms often allow users to insert HTML, CSS and JavaScript code snippets, but the learning experience of organizing information, modifying templates, designing, testing and debugging code would be lost.

Use of existing templates

If you use an existing (responsive) CSS template, you are required to print the existing CSS code before your submission, and highlight your changes with respect to the existing template. This is a semester long project and hence changes need to reflect such length. A lack of details that indicate how your version is different than the template may result in significant score reductions. A suggestion is simply highlight with a different color in your report your changes on the HTML, CSS and Javascript.


More details on deliverables and grading are below.

Peer Reviews

Each student will have 3.5-4 minutes to present his/her website in class. The presentation should focus on website design and functionality. Attendance is required. Those attending will evaluate each website as it is being presented, using criteria very similar to prior online peer evaluations. The scores will be averaged for each website and the results will count toward the project grade according to the weighting above.

Instructor Grading Criteria

Organization

  • Organization of site appearance. (E.g., Prioritization of contents, home page accessibility; each page stands alone and does not present too much information)

  • Organization of site artifacts. (E.g., appropriate use of file names, folders, subdirectories, and web-hosting services if used.)

  • Organization of the navigability (e.g. the navigation bar is not hidden, users do not have to struggle to find it, it exists and it is consistent on every webpage. Users do not have to use the “go back” button of the browser while navigating on your website.)

  • Relevant reading: Web Style Guide: Site Structure

Project Goal and Content

  • The goal of the website is immediately clear (within a few seconds).

  • Your website must stand on its own without any unfinished links or “under construction” apologies.

  • Proper attribution must be given to all sources (i.e., respect terms of use and/or Creative Commons licenses of your sources).

  • Amount of content, organization, and design must be commensurate with a semester-long project especially if you use a CSS template or any other template. A single web-page (without additional sub-pages) or a few minor changes from a downloaded template do NOT meet this standard.

  • The website shall contain at least 4 pages worth of good content (not including pages required to create frames) and the template eventually used must reflect the goal of your site.

  • A blog counts as one page (no matter how many posts), provided that the blog is well-integrated with the project as a whole. An account you have on some other service flickr, for example, may be an important part of your project but probably does not count toward the 4 pages requirement, unless you can demonstrate sufficient work under the hood that you have done to customize your flickr account so that it is well-integrated with your project.

Design

Web programming tools

  • Your site must include at least 3 of these 6 toolsets:

    • CSS (e.g., adapting a template)

    • Javascript

    • Jemdoc. If you use Jemdoc, please include a link to your source.jemdoc file in your submission.

    • PHP (e.g., adapting WordPress or similar). Note that merely installing Wordpress does not meet the PHP requirement. You need to do at least a little under the hood work customizing your Wordpress site.

    • React. A JavaScript Library for building user interfaces https:reactjs.org/

    • Forms

  • Forms do NOT count for two toolsets: e.g. a form that uses PHP (or JavaScript) does NOT count as requirement for PHP and forms. Also, if your websites includes two forms in PHP (or Javascript), you still have covered only one out of five toolsets.

Website testing/evaluation

  • Does your site work on the browser(s) that you support?

  • Do all links work?

  • Do all images load in a reasonable time?
    use GIMP to reduce their size to a web-friendly format (see this GIMP tutorial )

  • Did you test it using a mobile framework?
    With the Chrome inspector tool you can do that


Web Project Write-Up

The Web Project Write-Up is due the same day of the project presentation and it is worth 20 points. These 20 points are added to your final project grade. They are not droppable like HWs are.

Special submission instructions for this assignment:

  • Write a concise structured essay with the 5 sections described below. For ease of grading, please make clear when you are addressing section 1, 2, 3, etc.; also be sure to actually write your answer and not just list a bunch of bullet points.

  • Please type your submission and save in one of the following formats: MS Word (doc, docx, txt or Adobe PDF).

  • Please name your file with the following format: Last_First_Project_Writeup_MM_DD_YYYY.pdf, for example Smith_John_Project_Writeup_12_01_2017.pdf

  • Please email the final copy of your submission to the instructor

  • You must include title to your sections and subsections. Name the Sections and the Subsections as they are named in these guidelines below.

Section 1: Project specification

Concise and current project specification that reflects your final website, including

  • Subsection 1.1: Summary of site and its most important goals

  • Subsection 1.2: Primary audience for the Web site.

    • Is your site built from scratch or based on an existing site?

  • Subsection 1.3: Site organization:

    • List & description of pages, including which pages link to which other pages

    • List & description of artifacts (e.g., images, audio, video)

    • What kind(s) of web-hosting does your site use? (E.g., slu.edu, or commercial web-hosting). If your site uses several different hosts, clarify the purpose of each.

  • Subsection 1.4: Tools

    • Which Web programming tools did you use? (E.g., CSS, Javascript and Forms.) If you used PHP, be sure to provide relevant excerpts of your PHP code, highlighting edits you made, crediting your sources, etc. Recall that we cannot see your PHP code and give you credit for it unless you show us your PHP as part of your write-up.

    • What other tools, templates, and/or utilities did you use to build your site (e.g., CSS templates, Javascript utilities, etc.) If your site uses a blogging platform or some other external service (flickr, etc), please be sure that is described in the hosting section above, in addition to any description you add here.

  • Subsection 1.5: Licence

  • Subsection 1.6: Browser(s)

    • What browser(s) does your site support?

    • Is the site content clear also within mobile devices?

Section 2: History

Briefly explain the history of your project. If you added to a pre-existing website, make very clear (with links as appropriate) what existed before and what was added as a result of your project. Describe how your project evolved over the semester, focusing on significant changes from your plan and significant milestones in the actual development.

Section 3: Website organization

Explain why you organized your web site the way you did. (See “Website organization” under Web project guidelines for more about what we mean by organization).

Section 4: Testing

Explain briefly how you performed the testing of your site. Be sure to test your website with at least 2 different browsers and describe the results of your testing. Here you can find a list of the most popular browsers.

Section 5: Lessons learned

Discuss the main lessons you learned during the course of the project. Be sure to consider both:

  • Subsection 5.1: Web programming

    • lessons that apply directly to your web-programming now, and

  • Subsection 5.2: New Resources

    • lessons that apply to discovering new resources & approaches to develop your web-programming skills in the future.


The contect of this site is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.