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 (Figma). You should build your solution to match this design.

If you are new to Figma, watch this 10 min intro for developers to get a head start.

The Code

We have provided some initial code and images for you here: Code & Images. 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)

• Having no unused CSS properties (avoid using the copy code function in Figma)

• Using correct and semantic HTML (MDN Web Docs - Semantics in HTML)

Submitting the task

Please submit the task using CodePen, 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. 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.