Class 3 - 24/02/2023

Lab Class [8am-9:30am]

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

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

- 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.

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).

- Link to the webpage to reproduce

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

- 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.

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.