# Preparation

During the Pre-Course you've already gone through the basics of HTML, CSS, and JavaScript. Before you come to the first session, we would like you to put all this knowledge to practice by building a simple order form page.

## Order Form Task

### The Design

You can find the design for the order form here: [Order Form Design](https://www.figma.com/file/VwksDkp1vSPhpfa62LWIAz/HTML%2FCSS-session1?type=design\&node-id=0-1\&mode=design\&t=seawrJIXVyPoIt9L-0) (Figma). You should build your solution to match this design.

If you are new to Figma, watch this [10 min intro for developers](https://youtu.be/fZ-OU_7aBv4?feature=shared\&t=68) to get a head start.

### The Code

We have provided some initial code and images for you here: [Code & Images](https://github.com/HackYourFuture-CPH/program/tree/main/courses/foundation/html-and-css/order-form-task). Feel free to use these as a starting point.

Make sure that your code is:

* Properly formatted and indented
* Looking good on both desktop and mobile
* Using CSS class selectors instead of IDs or tags ([Why you should avoid using IDs in CSS](https://medium.com/@clairecodes/reasons-not-to-use-ids-in-css-a42204fb0d97))
* Having no unused CSS properties (avoid using the copy code function in Figma)
* Using correct and semantic HTML ([MDN Web Docs - Semantics in HTML](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html))

### Submitting the task

Please submit the task using [CodePen](https://codepen.io), and share the link in your team's Slack channel before the session.

### Installing VSCode

Before you come to the session, please also download and install [Visual Studio Code](https://code.visualstudio.com/). You will learn more about how to use the tool in the session. You are welcome to already use VSCode to build this task, if you like, but you still need to submit it via CodePen at the end.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://program.hackyourfuture.dk/course-content/foundation/html-and-css/week1/preparation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.