Valorant Website
Module 4 Activity 2
Objective:
Create a website that showcases Valorant agents (characters) using
HTML,CSS, and JavaScript. The website will include:
A Landing Page with an introduction to Valorant.
A Category Selection where users can view agents from different
categories (e.g., Duelists, Controllers, Initiators, Sentinels)
A Character Selection Page that displays a list of agent profiles
and, when clicked, shows detailed information about each agent.
Use JSON files to store and dynamically load agent information.
Additionally, create a PPT or document to document your tasks, task
assignments, design layout inspiration, references, fonts, and color
palette used for the website.
Instructions:
1. Find a Pair
a. Find a partner to work with on this activity
b. Divide tasks between the two of you
2. Create a PPT or document to document the following:
a. Task Assignment: Clearly outline who is responsible for which
tasks (e.g., HTML, CSS, JavaScript, JSON data, testing).
b. Design Layout Inspiration: Include screenshots or links to
websites or designs that inspired your layout.
c. References: List all resources used (e.g., Valorant official
website, fonts, images, tutorials).
d. Fonts Used: Specify the fonts used for the website (e.g.,
Google Fonts like "Roboto" or "Poppins").
e. Color Palette: Include the color palette used for the website
(e.g., hex codes for background, text, buttons, etc.).
f. Challenges Faced: Document any challenges you encountered
and how you resolved them.
3. Setup the Project
a. Create a project folder with the following structure:
valorant-website-member1-member2/
├── index.html (Main Page)
├── styles/
│ ├── styles.css(Main CSS file)
├── scripts/
│ ├── main.js(Main JavaScript file)
├── assets/
│ ├── agents.json(JSON file for agent data)
│ ├── images/(Folder for agent images)
b. Download the provided Valorant agent images and save them
in the assets/images. Valorant Assets Download Link
4. Gather Agent Data
a. Research and gather information about Valorant agents.
Encode at least 10 agents but you may add more if you prefer.
i. For each agent, collect the following details:
Name: The agent's name (e.g., Jett, Phoenix, Sage).
Role: The agent's role (e.g., Duelist, Controller,
Sentinel).
Description: A short description of the agent.
Abilities: A list of the agent's abilities, icons, and its
descriptions.
Image: The filename of the agent's image (e.g.,
jett.jpg).
5. Build the One-page Website
a. Create the index.html file:
Use a single-page layout with three main sections:
Landing Section: Introduction to Valorant.
Character Selection Section: Grid of agent cards.
Character Description Section: Detailed information about
a selected agent (initially hidden).
6. Submission
a. Add the PPT in the valorant-website folder then submit the
zipped folder or may deploy it using a platform like GitHub.
Just add me as a collaborator
(
[email protected]) or copy-paste the link of the
Github Project.
