Re-code the Past - Event Rules

Event Rules

• You can participate in teams of up to 3 members.
• You will be provided with a screenshot of a legacy website and not the hyperlink.
• A Figma file showing the exact dimensions and colors is also provided.
• Your objective is to replicate the website's functionality and visual elements using your framework of choice.
• Required assets, such as images and fonts, will be provided.
• The winner will be determined by the degree to which the participants have successfully recreated the original website, encompassing both functionality and visual fidelity.
• If you are caught opening the website on your browser, you will be announced as disqualified.
• If we find that you have used code from the original website, you will be disqualified.
• You are allowed to use the internet and dev mode in Figma.

Figma Mockup to Web Page

Objective

Turn this Figma mockup into a web page: Figma Mockup Link

Prerequisites

• HTML
• CSS
• VS Code

Step 1: Inspect the design mockup using Figma

• Open the above link and create an account or sign in to view the page in Figma.
• Inspect the dimensions and styles of various components in the div mode on Figma.
• Identify the fonts used on the page and find them on Google Fonts for later use.
• Export the images on the page as PNG or JPEG files for use within your web page, which is provided to you.

Step 2: Set up basic page structure and styles

• Create a folder on your desktop and open it up in VS Code.
• Create an index.html file, a styles.css file, and copy over images (recommended).
• Add basic HTML tags (head, title, link, body, section-wise divs, etc.).
• Set up basic styles (header & body font family, text size, background, etc.).

Step 3: Implement the web page section by section

• Add the content for each section one by one using HTML (recommended).
• Use Figma's "Inspect" tab to check values of CSS properties (recommended).
• Add styles for each completed section one by one using CSS (recommended).
• Try to replicate the mockup as closely & precisely as possible (recommended).

Best of Luck