Section outline

  • General

    Collapse all Expand all

  • Syllabus

    • Students must
      Mark as done

      Web Programming (CSE 104) introduces the languages, tools, and techniques specific to developing web-based applications. This is a hands-on practical course providing practice knowledge to develop your own web-based applications.

      At the end of the course, you should have developed a solid understanding of the intricacies of contemporary, dynamic website development, and an insight into the internal workings of the web itself.

    • Students must
      Mark as done

      Course objectives:

      • Being able to develop an interactive client-side-based website
        • complying to HTML5/CSS3 standard, and JavaScript good practices
        • responsive
        • without requiring external libraries
      • Being introduced to server side programming
      • Being able to autonomously find and use information from various documentation on web applications

    • Students must
      Mark as done

      Topics: 

        - I. HTML, CSS

        - II. JavaScript (front-end)

        - III. Introduction to server programming (PHP)

    • Students must
      Mark as done

      Course prerequisite: Basic programming experience (ex. Python)

    • Students must
      Mark as done

      General organization: The class will mainly consist of practical computer lab classes mixing tutorials and exercises. A small project will be conducted where you will develop your own website (client side only) following the current good practices.

    • Students must
      Mark as done

      Exams:

      - Test 1 [24/02]: HTML/CSS - Lecture Quiz and Webpage reproduction (~30min, 25% course grade)

      - Test 2 [14/04]: JavaScript - Interactive webpage reproduction and/or lecture quiz (~30min, 25% course grade)

      - Project [11/05]: Your own website on the topics of your choice (50% course grade)

      - Test 3 [26/05]: Sever programming - lecture quiz (~10min, bonus/malus).

      Note: No final exam, Lab classes tutorials are not graded.

    • Students must
      Mark as done

      Grade correspondence table:

      A+ >= 18; A >= 16; A- >= 15; B+ >= 14; B >= 13; B- >= 12; C >= 10; D >= 7; E > 0; F == 0


  • General links

    • Students must
      Mark as done

      Links

      - Exercises on HTML/CSS

      - Online host: https://cse104.org where you can freely upload your work and projects; and its administrative panel: https://cpanel.cse104.org

        (ID to not share outside of this class)
        - login: cseorg1
        - password: ebF3612#24WX

      Do not change the password, this is a shared login system

    • Students must
      Mark as done

      > FAQ for common issues


  • Class 1 - 10/02/2023

    • Students must
      Mark as done

      The class will start in Amphi Cauchy at 8am.

    • Students must
      Mark as done

      0. Class general information

      [Slides], [pdf]

    • Students must
      Mark as done

      1. Lecture HTML/CSS

    • Students must
      Mark as done

      [Slides], [pdf]

    • Video of the lecture (if you missed the onsite one) URL
      Students must
      Mark as done
    • Students must
      Mark as done

      2. Lab Class [HTML/CSS]

      => Link to the exercises on HTML/CSS

      - Minimal objective to reach before the next week: Finish all "HTML Introduction"

      (starting "CSS Introduction" is encouraged)

       

  • Class 2 - 17/02/2023

    • Students must
      Mark as done

      Note that the password on the cpanel of cse104.org has been updated. Please do not change yourself the password, this is not an individual account, you are all sharing a unique login/password.


    • Students must
      Mark as done

      Lab Class [8am-10am]

      HTML/CSS

      Minimal objective to reach before the next week: 
      - Finish "CSS Introduction"
      - Finish "Box Model"
      - Have at least started "Class and ID"

    • Solution "class and ID" File
      Students must
      Mark as done

  • Class 3 - 24/02/2023

    • Students must
      Mark as done

      Lab Class [8am-9:30am]

      HTML/CSS

      Minimal objective: Reach "Alignment" before the start of the test


    • Solution 009-mouse_over File
      Students must
      Mark as done
    • Solution 010-palm_tree File
      Students must
      Mark as done
    • Solution 012-position File
      Students must
      Mark as done
    • Students must
      Mark as done

      2- Test on HTML/CSS [~9:30am-10:00am]

      The program of the test includes all the content up to  "Alignment" (included)


    • Students must
      Mark as done

      Self training from last years lab class exams (about 20-30min):
      (note this year will be slightly simpler website)

      - [Test 2021/2022] (Video)
      - [Test 2019/2020] (difficulty: high)
      - [Test 2018/2019] (difficulty: high++ )



    • Solution test 2019/2020 File
      Students must
      Mark as done
    • Solution test 2021/2022 File
      Students must
      Mark as done
    • Students must
      Mark as done

      - The test is 30min long, it contains two elements: 

      1) A quiz (multiple-choice questions) - The Quiz has 4 questions, it opens at 9:30am, and closes at 9:38am

      2) A practical exercise where you have to reproduce a webpage. All you files must be upload on Moodle at 10am.


      - Modalities: Use of notes, codes, internet, etc. is allowed. Any communications between you is forbidden.

      example of quiz questions:
      - Basic class related questions (role of the language, principle of the server, role of basic HTML tags, etc.).

      - Watch a simple html structure, and indicate the correct css selector for a given element among multiple choices. Understand CSS cascading behavior and priority.

      - Indicate the correct layout to set to some elements (type of display, type of position) given an image or a behavior of what we want to obtain.

    • 1) Quiz HTML/CSS (9:30am - 9:38am ), 4 questions
      Students must
      Mark as done
    • Students must
      Mark as done

      2) Reproduce the behavior of the following webpage:

      General rules:

      • Create and complete the necessary files (HTML, CSS) to reproduce the example webpage
      • At the end of the time, upload on Moodle your HTML and CSS file
      • Your webpage should contain valid HTML and CSS code
      • You don't have to reproduce the exact size, space, and colors of elements. Approximating them is good enough. However, pay attention to their general display and behaviors and try to copy them precisely.
      • You can access the internet, and use your previous exercises. But don't communicate under any forms with anybody (excepted the teachers).

    • Students must
      Mark as done

      - Link to the webpage to reproduce

    • Students must
      Mark as done

      Hints/reminder on some useful CSS:

      - Set a rounded corner to a box: "border-radius: Npx;" with N to be set

      - Create a border around a box: "border: Npx solid Color;" with N/Color to be set

      - Align the content in a box: "text-align: left/middle/right;"

      - Make a text in bold: "font-weight: bold;"

      - The color used in the test will be among: blue, yellow, red, white, black, lightcoral

    • Drop your HTML and CSS file here before 10:00am Assignment
      Students must
      Mark as done
    • Students must
      Mark as done

      - You can drag & drop your two files (.html and .css) in the file deposit.

      Important: 

      - You need to upload files and the end, you cannot copy/past code.

      - The file deposit closes at 10am. Make sure that you upload your result before the end of the time.

      - Once uploaded, check that you have uploaded the correct files. You can re-upload files if you have done a mistake as long as the file deposit is open.

      - You can use the following "Dummy file deposit" to test beforehand. You can drop whatever file you want there.

    • Possible solution of the test File
      Students must
      Mark as done
    • Students must
      Mark as done

      Note that I have included the CSS style in the HTML (in the tag <style></style>) to be more concise in this solution. But it is a better practice in general to split your HTML and CSS in two separated files.


  • 03/03/2023

    • Students must
      Mark as done

      No class - holidays

  • Class 4 - 10/03/2023

    • Students must
      Mark as done

      1- Lecture on JavaScript [8am - ~9am]

      Please come in "amphi Carnot" at 8am for the lecture.

      [Slides] [pdf]


    • Students must
      Mark as done

      In case you have missed the lecture on JavaScript: [Video]

    • Students must
      Mark as done

      2- Lab Class on JavaScript [~9:00am-10am]

    • Students must
      Mark as done

      => Link to JavaScript exercises

    • Students must
      Mark as done

      Objective to reach before the next class: Finish "Event"

  • Class 5 - 17/03/2023

  • Class 6 - 24/03/2023

    • Students must
      Mark as done

      Lab Class [8am-10am]

      JavaScript

    • Students must
      Mark as done

      Minimal objective: finish all exercise from JS Language

      Normal Objective: GUI and buttons



    • Solution exercise "JS Language" File
      Students must
      Mark as done

  • Class 7 - 31/03/2023

  • Class 8 - 07/04/2023

    • Students must
      Mark as done

      1. Lab Class [8am-10am]

      JavaScript


    • Students must
      Mark as done

      - Minimal objective: Animation loop
      - Normal objective: 2d drawing - Canvas


    • Solution Falling circles File
      Students must
      Mark as done
    • Solution canvas drawing File
      Students must
      Mark as done

  • Class 9 - 14/04/2023

    • Students must
      Mark as done

      1. Test on JavaScript (8am-8:50am)


    • Students must
      Mark as done

      - Duration: 50min

      - Type: You will have a small webpage to reproduce - in particular you will need to reproduce the behavior of the elements using JavaScript.

      - Principle: The link to the test will be available on Moodle. You will need to code 3 files on your computer (html, css, and javascript) and upload them to the test webpage. 

      - Program: The program of the test covers all JavaScript up to "Animation loop" included. Canvas is not in the program of the test.

      - Modalities: Use of notes, code, internet queries is allowed. 
      All forms of communication and exchange of data are forbidden. You should not communicate together, don't use any chat, don't ask questions to anyone except to your teacher in case of a technical problem (we won't help you to solve the exercise though).

      Cheating penalty: If you are caught with any type of communication, code exchange, or ending up with similar codes, your final CSE104 grade will be F in the first session, and your cheating reported to your administration for further processing. Note that the penalty applies in the same way to students who receive but also provide the code.

    • Students must
      Mark as done
      Training: Last year exam 
    • Solution last year exam File
      Students must
      Mark as done
    • Students must
      Mark as done

      Exam JavaScript 2023 - to appear here

    • Students must
      Mark as done

      Hints: 

      - The css commands: "cursor:pointer" can change the default cursor appearance (see here).

      - The opposite of [element].addEventListener(eventName, functionName), is [element].removeEventListener(eventName, functionName) (removing a listener on an element).

      - The opposite of [element].classList.add(className) is [element].classList.remove(className). (remove className to the element).

      - Math.random() can be used to generate a random number in [0,1[. Math.sqrt(x) returns the square root of a number.


      Don't forget that you JS code must start with the line "use strict;". Your HTML and CSS code must remain valid and pass the HTML validator without error. Avoid giving a code that crashes: It is better to provide a code that works, than a code that does theoretically more but actually crashes. 

      Basic functionality and general behavior provide more points than fine details. Focus on these only if you have done the basic functionality - they are often trickier to implement while providing fewer points.

    • Students must
      Mark as done

      Principle: 

      The test consists of a game with two main parts.

      First part: You manually place an arbitrary number of discs on your window using the mouse click. Each disc has a radius of 20px and inherit the color indicated by the GUI element. The initial color of the GUI element is set to cyan (#00ffff).

      Second part: Once the player is ready, he can click on the start button. The spheres then start to move with constant velocity and bounce on the boundary of the window. The cursor of the player is attached to a red disc. During the game, the player must avoid touching the other moving discs. If it does, the game stops indicating "Game Failed" and shows in color the collision.

    • Students must
      Mark as done

      More hints:

      A constant velocity motion can be implemented as: p = p + v dt in an animation loop, where p is the position to be moved, v is the velocity (constant), and dt is the constant time step (you can consider dt=1 to simplify your relation).

      A 2D velocity vector v=(vx,vy) that has a prescribed magnitude L must satisfy the relation L*L = vx*vx+vy*vy

      The bouncing effect along x (resp. y) direction can be obtained by reversing the velocity in x (resp. y) coordinates. (x -> -x, and y -> -y)


    • Students must
      Mark as done

      Webpage to reproduce

    • Students must
      Mark as done

      Video of the expected behavior

      (or on Ubicast)

    • JavaScript test - drop your HTML, CSS, and JS files here Assignment
      Students must
      Mark as done
    • Solution test js 2023 File
      Students must
      Mark as done
    • Students must
      Mark as done

      Grading: 

      First part (creating colored discs): 12 points

      - Creating a new disc at the selected position after a click: 4 points

      - Creating this new disc at the correct position: 3 points

      - Setting the color of the newly creating disc: 5 points

      Second part (animation): 8 points

      - An action take place when we click on Start button: 1 point

      - The discs are moving in a decent way: 2 points

      - The discs bounce on the window limits: 3 points

      - A red disc is following the user cursor: 1 point

      - Handling the Game Over: 1 point

      Bonus/Malus

      - Code readability: +2 points if decent code. Up to -2 malus points if very bad/overly-complex code (ex. brute force generic chatGPT).

      - Late submission: -1 point

    • Students must
      Mark as done

      2. Project (9:00am - 10am)


    • Students must
      Mark as done

      Make sure to validate your project topic with one of the teacher.

    • Students must
      Mark as done

      Information on the project

    • Example of 2021 projects URL
      Students must
      Mark as done
    • Example of 2020 projects URL
      Students must
      Mark as done

  • Class 10 - 21/04/2023

    • Students must
      Mark as done

      All students doing their project at 8am: please go to rooms 32 & 33

      All students doing the second test JavaScript at 8am: please go to the room 31.


      (Don't forget the project deadline on May the 9th - you still have a bit of time, but it will come fast !)

    • Students must
      Mark as done

      Project [8am-10am]


    • Students must
      Mark as done

      Test JavaScript 2 [8am-8:45am] (only for students who were absent last week, or who have been contacted to redo a second attempt)

    • Students must
      Mark as done

      The second JavaScript test will start at 8am. Be on time, if you miss its start, you won't be allowed to work on it.

    • Students must
      Mark as done

      General rule:

      - This test only concerns students who were absent on April 14th, or who have been contacted for a "second chance". All the other students should be working on their project.

      - This second test will be another webpage to reproduce in about 45min. Same rules, program, and criteria as last week (internet queries are allowed; but it is strictly forbidden to communicate, sneak at your neighbor's code, or exchange any type of data - any forbidden behavior or code similarity will lead to a final 0/F grade for your entire CSE104 result).

      - Students who were absent last week will get their grades from this test only. You can get a grade between 0 to 20.

      - Students who are doing their "second chance" cannot get a grade greater than 14/20 on this second test. If this second test is worst than your first one, you'll keep your first grade.


      As in last week's test, you are highly encouraged to:

      - Do simple things first. Don't try to do the entire exercise at once. Prefer to have a simple website that does simple things rather than an empty screen with javascript error. You'll accumulate points when you have working behaviors (simple behaviors bring most of the points), not when you write lines of code that do not work.

      - Don't try to make chatGPT write your entire code directly - it will probably be overly complex and not working as expected, making you stuck in endless trials and errors. It is ok to get a bit of chatGPT help/hints on subparts, but you should be able to structure your code and move on incrementally with code that you understand. 

      You can always do the entire exercise based only on instructions that have been seen during the labs + the few hints indicated on Moodle.

    • Students must
      Mark as done

      Hints:

      - You may check the function event.stopPropagation(). This function allows avoiding an event to propagate toward its parent. 

      Exemple of use:

      function someActionFunction(event) { 

         event.stopPropagation(); //ensure that no action function will be called on the parent for the same type of event.

         ... // rest of the Action function

      }

      - The CSS outline is similar to the "border" property, but doesn't take additional space in the layout.

      - You may look at the events: mouseover and mouseout.

    • Students must
      Mark as done

      Description:

      - Every time the user clicks 'Add container' button, a blue container appears.

      - When the user clicks on a blue container, a smaller yellow container appears inside the blue one.

      - When the user clicks on a yellow container, a smaller salmon box appears inside the yellow one.

      - When the mouse is over an active blue (resp. yellow) container, its border becomes red.

      - The yellow container can hold up to 5x2=10 child red boxes. When a yellow container reaches this maximum number of red boxes, its border becomes green and the child boxes become gray. The yellow container thus becomes "inactive".

      - The blue container can hold up to 4x6=24 child yellow containers. When a blue container reaches this maximum number of yellow boxes, its border becomes green. The blue container thus becomes "inactive".

      - In this example, the size of each container is the following:

      -- blue container: width:40%; height:300px;

      -- yellow container: width:20%; height:35px;

      -- red box: width:15%; height:10px;

    • Test JavaScript 2 (only for students concerned by this test) Assignment
      Students must
      Mark as done

  • Class 11 - 28/04/2023

    • Students must
      Mark as done

      Project [8am-10am]


    • Students must
      Mark as done

      Deadline extension: You can drop your project until Wednesday May the 10th, 20h without penalty.

    • Project deposit - Deadline 10/05/2023 20h00 Assignment
      Students must
      Mark as done
    • Students must
      Mark as done

      Don't forget to check the information on the project. And don't forget to give your code and your short report.

      In particular, please provide a single archive (prefers .zip or .tar.gz) that contains 

      - Your entire website (including images, etc.). When you have multiple .html file, please name the entry point of your webpage "index.html" so that we know where to start.

      - A short report (prefers pdf format) typically 1-3 pages that describes briefly your project and can possibly describe the effects you have set up and your choices to make them (if they are not trivial). (Your report doesn't have to follow a formal structure.) Your report must contain your name(s).

  • 05/05/2023

    • Students must
      Mark as done

      No class - holidays

  • Class 12 - 12/05/2023

  • Class 13 - 19/05/2022

    • Students must
      Mark as done

      Lab Class (server programming)


  • Class 14 - 26/05/2022 - Last one

    • Students must
      Mark as done

      1. Lab Class (server programming)


    • Students must
      Mark as done

      2. Quiz on server programming

    • Students must
      Mark as done

      This quiz only provides "bonus points" and cannot lower your final grade.

      The test is a short quiz, there will be no programming exercise.

      It can apply to students physically present.


    • Students must
      Mark as done

      - Duration: 7min

      - Type: Short quiz

      - Topic: Server lecture content + PHP exercises up to [005] included


    • Quiz Server
      Students must
      Mark as done