General Objectives
Your assignment is to develop a Web site, working either alone or in pair.
The Web site should be dynamic, interactive, and standards compliant. It should include elements from all aspects covered in the course: structure and semantics with HTML, layout and styling with CSS, dynamic behavior and user input management with JavaScript.
Project Requirements
Pay attention to the following while developing your Web site. These criteria will be taken into account in the evaluation of your work:
- The structure of your Web page(s) should be clearly defined and valid HTML.
- Layout and styling (visual appearance) should be handled using CSS, and the CSS rules should be valid.
- Interaction with the user, based on JavaScript
Your efforts should focus on client-side development (HTML/CSS/JS). While it is fine to include some server-side development (PHP, NodeJS, etc.) this is not a requirement at all. Server-side development is only briefly touched upon at the end of CSC_1S004, after the project deadline. It should not represent a big part of your project, as this is not the main topic of this course, which focuses on client-side (front-end) development.
External Libraries
There are numerous frameworks and libraries available to help you design and develop Web sites. You are not allowed to use WYSIWIG editors such as Adobe Express. This course is about learning Web development technologies, not about the use of Web page design tools. As such , the code of your project should not be generated automatically from a tool that lets you draw the Web site and get the HTML, CSS and JavaScript without writing a single line of code.
However, it is acceptable to use frameworks and libraries that help you write your own code. For instance, third-party Javascript libraries that provide you with some specific functionality you need to implement your own dynamic behavior is completely acceptable. Most Web programmers use such third-party libraries all the time, so that they do not have to reinvent the wheel.
But be aware that you use such third-party components at your own risk: you cannot expect teachers to master those. And in your report you need to explain what you have coded yourself and what comes from third-parties. Also make sure you do not spend too much time learning how to use such a framework/library. Again, the objective of this course is to improve your skills with the core Web languages: HTML, CSS and JavaScript. Extra frameworks can be useful, but they are not in the scope of CSC_1S004.
Deliverables
You will have to upload the following items to Moodle by the project deadline (May 28th, 2025):
- The source code of your entire project, including HTML/CSS/JS files as well as media resources such as images that are included in your Web pages.
- A short (1-to-3 page long) report explaining your project and the overall approach.
Possible Project Topics
You are free to define the sort of Web site you want to develop. Check with a teacher that your choice is ok. Examples:
- a Web-based video game;
- the Website of an imaginary company;
- an interactive Web site providing some sort of service (see examples below).
The percentage of HTML, CSS, and JavaScript will vary among projects. Some will more strongly focus on HTML and CSS, others will involve significant amounts of scripting. Develop your project in a coherent and clean way. LoC (lines of code) count is not an objective per se. Readbility of your code, concision and elegance of solutions are more important.
If you lack inspiration, a possible topic is to develop a set of basic video games where user interaction is programed in JavaScript. A first step would be to create a Web page that displays a menu in HTML/CSS listing all those basic games, linking to different Web pages, each one hosting a different game. Examples of simple games include tic-tac-toe, snakes, etc. Start with a simple game, finsh it, then move on to a possibly more elaborate one, and so on.
Examples from Previous Years
A broad variety, including: educative games; maze game; isometric RPG; small 3D games; quizz games; creation of a website for a friend or company; a symbolic calculator; a sound sequencer.
Videos showcasing sample projects from previous years are available through Moodle.
Guidance
Avoid projects that would require storing/loading data (which would likely involve server-side programming): you will not have access to files, or this will require handling security restrictions. This includes projects such as developing a blog platform or social network. Prefer website where data can be fully described in your HTML/JavaScript code, and where you will not have to manually provide and fill a lot of data content.
Methodology
Decompose Your Project in Clear Steps
Decompose your project in a series of steps and check-points.
- Make sure to include a first check-point about providing a basic, usable website, and that this is easily and quickly do-able.
- Set up the more challenging/explorative points as the latest steps.
In particular, make sure you do not spend any class without having a working website, even if it doesn't have all the expected functionalities (do not stay for a long period of time developing code without testing. Test and validate your code all along the process.
Working in Pairs
Do not underestimate the synchronization overhead when working in pairs.
When working in pairs, make sure you merge your code frequently.
- Do not work (the equivalent of) more than one class without merging your code with your team mate.
- Versioning tools such as git help you share your code and resolve conflicts when they arise while trying to merge incompatible changes. The Binet Réseaux at Polytechnique hosts a GitLab service that you can use for your project.
- Whatever the solution you choose to share code in your group, make sure you merge often. Merging a lot of changes, especially close to the deadline, will result in a lot of work and stress, and possibly unsolvable situations that will evenyually yield half-baked projects.
Code Quality
- Your HTML code must be valid. Use the HTML validator to check.
- Your CSS code must be valid. Use the CSS validator to check.
- Your JavaScript code must be compatible with the ECMAScript 6 standard ("use strict";)
Your website should run correctly on the machines from the lab using Firefox. Check this is indeed the case before handing in your project. There might be errors that do not appear depending on the browser and operating system you use for development. Your Web site does not have work on older browsers such as Microsoft Internet Explorer.
Project Evaluation
- The HTML structure should be clear, valid, and properly reflect the semantics of the page's contents (use the right HTML elements for the right purpose).
- CSS layout and styling instructions should be used to achieve the visual appearance you actually aim to get. The project is not an art contest. Evaluation is not based on the aesthetics of the end result, but rather on using CSS properly to achieve your goal.
- JavaScript code should:
- be clear and easy to read;
- follow best practices;
- feature at least some input management (user event handling with listeners).
If you work in pairs:
- A more elaborate project is obviously expected from a group of two students than from a student working alone.
- The two members of a group get the same grade.
- You are free to organize work in your group as you wish.
- The general rule is that you are both expected to participate and share the workload based on your skills and interests. The two members of a group will often have different skills and profiency with Web programming.
- Be autonomous and responsible.
- You can freely and honestly describe the contribution of each member in your project report. Noone will loose points because of this: we grade your project, not the perceived/self-reported percentage of contributions to it. Somebody with outstanding contributions can, however, get extra bonus (for instance if helping other students on their own project).
- If things go wrong in your group (clear lack of commitment from one member, discord, etc.) — unfortunately this happens every year, and it usually gets worse as the deadline approaches:
- you may decide yourselves to split the group;
- a teacher may force a group to split at any time. We prefer not to intervene in your group, but we may do so if one member requests it, or if we notice ourselves that there is a problem.
- If your group splits: each student will upload their own final version of the project. Clearly describe which part was made in common, and which part is yours only. Both projects will be graded separately. Splitting may happen even if close to the deadline: so do make sure you have your own version of the project accessible somewhere.