Official (Open)

Test Project
Web Technologies
Module F – Web Page Design/Interactivity
Submitted By: Country
Singapor
Andrew Tan e
Singapor
Kang Siew Hwa e
Lay Christian Indonesia
Thomas Galih Satria Indonesia
Cchanthamoungkhu
Mithuna Laos
Vannapha SOUTHIVONG Laos
Wan Ahmad Jailani Malaysia
Philippin
JothamHernandez es
Settachok Saennam Thailand
Nopadol
Arampatarawong Thailand
Official (Open)

Introduction
In this module, you are tasked to create a website for the promotion of “Singa”, a local NFT company.
You are to create a single page design for the desktop and mobile view of the site, before coding it in
HTML + CSS.

The color schemes are provided, your designs and website must adapt to either of the color scheme
provided. Users must be able to toggle between light and dark mode, with dark mode as the default.

General Info and Expectations

● You are required to create the single page design of the website in desktop and mobile view.
● The single page design should follow the dimension stated:
Desktop: 1440px width x flexible height
Mobile: 768px width x flexible height
● You can ONLY use HTML and CSS to code the website. Do not use Javascript. No other libraries
or frameworks (Bootstrap, Tailwind, React, Vue etc.) can be used in this module. Failure to
comply will result in your work NOT MARK by the experts.
● The website should be responsive to accommodate desktop computers and mobile devices.
The html file will be marked with a viewpoint width of 1440px for desktop and 768px for
mobile.

● Your single-page HTML will be measured by industry standards and will need to incorporate
responsive design best practices.
● Your HTML and CSS webpage will only be evaluated if you have delivered the layout and
design using Adobe XD/Adobe illustrator/Adobe Photoshop. You should not flatten your
artwork layers and it should not be a screenshot of the website. Your artwork layers will be
verified, failure to comply will result in your design & layout component NOT MARK by the
experts.

Version 1.0 Updated on 9 Feb 2025 Page 2 of 7

Adopted & Adapted from WorldSkills Kazan 2019
Official (Open)

Description of tasks
The page consists of the following main sections:

1) Header
● Logo
● Navigation Menu (About, Products, Testimonials, Subscription)
2) Main Content
● About: Company Description
● Products: Product Gallery and Information
● Testimonial section
● Subscription: Newsletter Subscription
3) Footer

Header
In the desktop view, the header contains the logo and a menu to navigate to the appropriate section
within the page. You should include some interactivity or effects to enhance the user experience.

In the mobile view, the navigation bar should be collapsed.

Main Content
About: Company Description
Refer to media in content folder company description.

The main content should include a Hero Section with an enticing headline, captivating description,
and a Call-To-Action (CTA) button to allow users to navigate to the subscription section. Feel free to
use the images provided in the media files to enhance the design.

Version 1.0 Updated on 9 Feb 2025 Page 3 of 7

Adopted & Adapted from WorldSkills Kazan 2019
Official (Open)

Products: Product Gallery and Information

The gallery section should feature the NFTs shared in the media folder. You should include the NFT
image, name, description, price and a CTA button to “Add To Cart”. The product gallery section should
showcase 3 NFTs (For desktop view) and 1 NFT (For mobile view) at a time and be presented as a
carousel. When the user clicks on the right navigation, the carousel should have a smooth transition
to the next 3 NFTs (For desktop view) and to the next NFT (For mobile view). Likewise, when the user
navigates to the left, the carousel should slide back to the previous set of 3 NFTs (For desktop view)
and 1 NFT (For mobile view) .

You are required to design how it looks on desktop and mobile view. You will be marked based on
how well you can implement the designs into code. You should design some interactivity to enhance
user experience.

Refer to media > content folder for more information.

Testimonial Section
The testimonial section should include all the testimonial information such as username, photo and
comments from the media > content folder. You should design some interactivity to enhance user
experience.

Refer to media > content folder for more information.

Subscription: Newsletter
The newsletter section should include the following fields:

● Your name
● Your email
● CTA button to subscribe to the newsletter

The form need not be functional.

Version 1.0 Updated on 9 Feb 2025 Page 4 of 7

Adopted & Adapted from WorldSkills Kazan 2019
Official (Open)

Footer
The footer should display the company logo, copyright information, navigation menu and 3 social
media icons. The icons should be clickable and interactive but do not have to point to a valid URL.

Instructions to Competitor
● Webpage development that uses javascript/javascript libraries/css libraries will not be

considered for evaluation.

● Your website will be evaluated using the Google Chrome browser using a viewpoint width of

1440px for desktop and 768px for mobile.

● The media files are available in the ZIP (Module_F_Media.zip) file. You can modify the files

provided and create new media files to ensure the correct functionality and improve the

interactivity of the application.

● Save your design files in a folder called “XX_Module_F/Design” where XX is your workstation

number and NN is the number of screens.

● Save your files according to the below:

Working/Source file (ai, xd, psd) - “XX_WorkingFile.ai/.xd/.psd”

If it is a .ai file, please ensure that the images are embedded.

Design files (desktop view) – “XX_Desktop_NN.JPG”

Design files (mobile view) – “XX_Mobile_NN.JPG”

Assets (images used) – “Design/Assets” folder

HTML (index file) – “XX_Module_F.index.html”

Version 1.0 Updated on 9 Feb 2025 Page 5 of 7

Adopted & Adapted from WorldSkills Kazan 2019
Official (Open)

At the beginning of competition:

● The resources and media files are available in the Module_F_Media.zip file.
● You are required to create a folder XX_Module_F in the respective server location
*Where XX is your allocated workstation number

At the end of competition:

● Your single page HTML should be accessible via the following URL

http://wkXX.ws.org/XX_Module_F

*Where XX is your allocated workstation number.

Files Provided

Item Description

Content Folder All content and media required for webpage

Version 1.0 Updated on 9 Feb 2025 Page 6 of 7

Adopted & Adapted from WorldSkills Kazan 2019
Official (Open)

Marking Scheme Summary

WORK COMMUNICAT DESI LAYO BAC CM TOT

ORGANIZAT ION AND GN UT K- S AL
ION PRESENTATIO END
N

F1 Design & 2.4 - 2.5 1.5 - - 6.4

Layout

F2 High Fidelity 1 - - 1.6 - - 2.5

Implementation

F3 Header - - 0.2 0.7 - - 0.9

F4 About - - 0.2 - - - 0.2

F5 Products: - 2.0 0.4 - 0.4 - 2.8

Product Gallery

F6 Testimonial - - 0.5 0.5 - - 1.0

F7 Subscription: - 0.8 - - - - 0.8

Newsletter

F8 Footer - 2.3 - - - - 2.4

Total 17.0

Version 1.0 Updated on 9 Feb 2025 Page 7 of 7

Adopted & Adapted from WorldSkills Kazan 2019