GROUP ASSIGNMENT
TECHNOLOGY PARK MALAYSIA
CT053-3-1-FDD
Fundamentals of Web Design and Development
INTAKE CODE
NPT1F2403IT
HANDOUT DATE:
HAND IN DATE:
WEIGHTAGE: 60%
GROUP NAME: A6-05
- Members:
1) Srijan Napit (NP069974)
2) Sworup Maharjan (NP069988)
3) Narendra Bohora (NP069938)
TABLE OF CONTENTS
INTRODUCTION...........................................................................................................................4
STORYBOARD AND MODELING..............................................................................................7
DISCUSSION................................................................................................................................14
CONCLUSION..............................................................................................................................17
REFERENCES..............................................................................................................................18
ATTACHMENTS..........................................................................................................................19
1. Introduction:
Most people agree that the 21st century is the digital era. The quick adoption of cutting-
edge technology characterizes this period. People are using mobile devices, laptops, and
computers, as well as the internet, to obtain information, communicate, and interact with
many parts of their life. This has revolutionized websites. To stay up to speed on sports,
news, events, and activities, people use a variety of websites and pages. Sports
organizations now have more ways to engage with their audience and successfully
advertise their events thanks to digital media. In order to reach a universities audience
and advertise their activities, the project entails developing a website for a university
sports news outlet. Digital media has opened up new opportunities for sports
organizations to connect with their audience and promote their activities effectively. So,
the project involves creating a website for a national sports news and to connect with the
university audience and promote their activities. The webpage provides information to
members and non-members about various sports like cricket, football, badminton and
esports. This website is to promote sports news and supports sports activities in the
nation. This website is user-friendly, informational and interactive to the sports
supporters.
2. Goal:
The main goal of the sport website is to create a dynamic and engaging online presence for a
national sport organization. This website develops a user-friendly, informative, and interactive
website that effectively promote and support sports activities at the university.
3. Key Objective:
Centralized and Promote Sports Participation;
The website will service as a centralized hub for all sports relegated information at the
university. This includes news updated, and event schedule. The website play a centralized role
between the sport organization and its audience. The website promotion sports participation and
encourage increased participation in sports and physical activities among the university students,
faculty, staff, and prospective student. The website aims to provide the accurate news and to
inspire more individual to get involved. Our website promotes the benefit of sports participation,
feature success stores of athletes and provide the opportunity how to join event and sports.
Improve the User Experience
The main focus of every website is its users. Providing a satisfying and interesting user
experience is our main goal for the project. The website will have a contemporary, user-friendly
layout that makes navigating the system simple. To guarantee compatibility on a variety of
platforms, including desktops, tablets, and smartphones, the website features a responsive design.
High-quality photos, videos, and interactive features are employed on the website to provide
consumers an eye-catching experience.
Highlight Your Accomplishments:
The website will showcase the accomplishments of the university sports team and individual
athletes, including the outcomes of matches, accolades, and acknowledgement that the team and
players have earned. The website also update the player interview and boost morale of player and
fan with positive and accurate news. this small step of the website helps to promote the website
and also attract the users.
Long-Term vision:
Our project long-term vision for the sport website is to become a valuable resource and digital gateway
for the university’s sport community. With the most recent information, multimedia content, and
interactive elements, the website will be updated continuously. The website may be updated in
the future to feature live streaming of sporting events, an online sports retail store, and a mobile
app.
The website intends to establish a lasting influence on the sports culture of the institution,
encourage active and healthy lives, and offer a venue for recognizing the accomplishments of
student-athletes. By accomplishing these aims and objectives, the website plays a crucial part in
building a robust and active university sports community.
4. Scope:
The website will overing the different sports including football, cricket, table tennis, badminton,
chess, export, and tug of war. Every sport includes different section in website.
Homepage: a welcome page is including the background image of college with navigation bar. In
the navigation bar have four sections with home, about, sport, gallery and join us.
Sports section: in this section the user gets the latest news and updates related to sports at the
university. There will also a calendar of upcoming sports, and including the practice section in
different sports, game and tournaments. We also get the teams detailed information about the
sports teams, with player profile.
Gallery: in this section a photo and video gallery show casting sport events and activities.
Contact and join us: in this page the content with information on how to reach the sports
organization.
5. Target Audience:
our primary target audience for the website include the university students, faculty, and staff.
The website develops for sport lover so it will serve parents, alumina, and sports lover interested
in staying updates with the university’s sport activities. The website will be updated often to
serve both domestic and foreign users in the future.
6. Project Timetable:
The project timeline ensures a well-structured and efficient workflow by breaking the website
development process down into discrete phases.
Planning Phase: To finalize the wireframe and structure of the website, the planning phase
comprised research, role assignment and brainstorming.
Design and prototyping phase: the initial website is focused on creating, mockups by using
Canva and Figma to ensuring a visually appealing user interface.
Deployment: in the website we use the different programming language (CSS, HTML, and Java
Script) in core pages such as Home, About us, Sport, Contact, Gallery.
Testing and Debugging: we test website in browser for ensuring the compatibility with chrome,
Firefox, edge, and safari. Conducting this type of testing make sure the feasibility and usability
of website by gathering the feedback.
Documentation and Report Phase: the team is focused on compiling all project and
deployment details, writing the formal report and reviewing the documentation for submission.
The group completed all of the website and document elements that needed to be submitted to
Moodle. Throughout the project development cycle, this well-organized timeline guaranteed
seamless progress and contributed to maintaining quality.
Modelling and Storyboarding:
Wireframes for every website page make up the storyboard. It offers a well-organized strategy
prior to its actual execution. A storyboard allows for consistent design and easy navigation by
graphically representing the website's flow and layout. It guarantees that every page is user-
friendly, well-structured, and in line with the project's goal.
By this planning we minimize design inconsistencies and streamline the development process
with improving functionality and usability. Here are the key wireframes:
Homepage: The Home page is features with navigation links in header, the main welcome
banner message, and highlight the recent activities like upcoming event, active member and use
background image.
About page: the page is start with introduction about the sports of university and talk why about
why chose us.
Sports: Displays a section of different type of sport with including the upcoming sport events,
news and team. Lists the latest news article with headlines, summaries and link to full articles .
Contact page: Display the contact detail about the organization with include the send us message
section and navigation bar in the head. The map is also include in the page for user to find the
location of organization.
Gallery Pages: showcase photo of different sport events.
Join us: contain with registration form and memberships benefit and social media links.
8. Site Map
The site map outlines the structure and navigation of the website. It includes the following
sections with tree diagram:
Figure: site map of tree
1.Home:
2. About:
3. Sport
3.1 Sports section:
4.Gallery:
5.Contact us:
6.Join Us:
Design Principles:
The main principle of the website is to design the user interface Design. The website will feature
a clean, modern design with intuitive navigation. the design use consistent color schemes,
typography, and design element throughout the website. The text is easy to read with appropriate
font size, line spacing, and contrast. The accessibility of website to user disabilities by following
accessibility guidelines.
The website is responsive and adapts to different screen sizes and devices with visual hierarchy.
The color scheme will reflect the university and sports spirit. The website will use modern, sans-
serif fonts for headings and body text to ensure readability and a contemporary look.
The image is used in high-quality with multimedia element will be used to enhance the visual
appeal of the website. Image of sports events, team photo, and action shots will be prominently
featured.
1. Implementation:
Technology Used
The website will be developed using the following technology;
Html: for structuring the content of the website.
CSS: For styling the website and ensuring a consistent visual design
JavaScript: for adding interactivity and dynamic feature of adding different section in website.
Multimedia Element: For embedding images and videos in different section.
Our journey to Building a Dynamic Sports Website
Our Path to Creating an Engaging Sports Website We accomplished the phenomenal and
creation of a dynamic sports website that not only fulfilled all of our goals and milestones but
also paved the path for an even brighter future with additional intriguing features by employing
excellent collaboration and excellent organization. We are proud of what we achieved; it was
challenging yet rewarding. How the Website Addresses Issues and Takes Advantage of
Possibilities The sports website we've been working on addresses some urgent problems while
providing access to a number of opportunities. Here's how.
1. Centralised Information Hub: The Problem: Information on university athletics is now
scattered across several platforms in an unstructured fashion. This genuinely makes it
challenging for scholars, learners, and sports fans to locate accurate, up-to-date facts.
Our solution was to provide a one spot for everything sports-related, such as schedules, news,
team details, and more! Everything is easily housed in one location.
2. Better User Experience: The Problem: To be honest, a lot of websites are simply difficult to
use, particularly on mobile devices. Users may overlook subpar navigation and design.
Our solution was to design a website with a modern, highly responsive user interface that would
work well on smartphones, tablets, and PCs. We added excellent images, movies, and interactive
features to make it useful while also enhancing its usability and aesthetic appeal.
3. Increasing Sports Participation:
The problem is that there are many unkind staff members and kids who are either unaware of or
disinterested in doing sports.
Our Solution: By introducing ourselves on the internet, we will deal with it. We intend to raise
awareness of the advantages of sports, share the success stories of athletes, and offer easily
accessible information on how to meet teams and participate in events of motivating more of our
own to participate in athletic events.
4. Highlighting Achievements:
The issue is that our university's athletes and sports teams often go unnoticed for their
outstanding accomplishments and hard effort, which deters both players and spectators.
The Fix: All of these accomplishments, including player interviews, match scores, and
accolades, are now prominently shown on their website. May disregard poor design and
navigation.
Our Solution: We created a website with a present-day, highly responsive UI that would look
great on PCs, tablets, and smartphones. making it helpful while simultaneously improving its
visual appeal and use, we included top-notch photos, videos, and interactive elements.
6. Improving Engagement in Sports:
The issue is that there are a lot of cruel employees and students who are either
uninterested in participating in sports or do not know anything about them.
Our Solution: We will address it by presenting ourselves on the website. We shall be
able to draw attention to the benefits of sports, spread the stories of successful athletes,
and provide readily available information on how to join events and meet teams, with the
hope of encouraging more of our own to take part in the sporting activities.
7. Spotlighting Accomplishments:
The Problem: At times, the hard work and great achievements by our university
sports teams and athletes slide under the radar, discouraging players and fans alike.
The Solution: Now, all these achievements are displayed proudly on their website-
match results, awards, player interviews, you name it. An excellent way in keeping
morale high and engagement in all.
8. Looking to the Future:
The Opportunity: This website is truly going to work-it is blossoming! Imagine
this, live streaming sports events, an online store stocked with sports merchandise,
even a mobile app! Sky's the limit!
The Technical Challenges We Faced (and How We Overcame Them)
Discussion
1. Responsive Design:
The Problem: Quite a tough nut to crack was to make the website look good and work well on
every single device-desktops, tablets, smartphones-a real challenge since there were so many
sizes and resolutions.
The Solution: Regardless of the different screen sizes, a responsive design may be achieved by
combining CSS media queries with a flexible grid layout. To make sure it looks amazing and is
easy to use, we also tested it on a few different devices and browsers.
2. Cross-Browser Compatibility:
The problem: Making the site work on different software like Chrome, Firefox, Edge, and
Brave. Some features did not function the same on every browser.
The solution: Competency in testing on extensibility on a variety of browsers, as such did, we
gain a far more plausible level of functionality through integrated coding support to allow
features to work across platforms.
3. Performance Optimization:
The Problem: High-quality photographs and videos were included on the website itself, hence
adding to latency when viewed on mobile connections that had slower Internet.
The Solution: The loading speed was good with image and video compression while
manifesting their quality in lazy load on media as and when needed.
4. Accessibility:
The problem: We want to cater to all users concerning the web-write program, including those
who are handicapped and rely on screen readers or keyboards for navigation.
Our solution was to follow the Web Content Accessibility Guidelines (WCAG) to increase the
accessibility of the site, with the involvement of all texts for images, keyboard navigation and
sufficient contrast levels to read texts.
What is next? Future enhancements and improvements.
While we take much pride in what we have built, we take note that many things still need to be
done. Here are some aspects our focus will shift toward adding in the future:
1. Limited interactive features:
2. Restricted interactive features: o Issue: Regretfully, the web writing program's
interactive capabilities, which include forums, feeds, and live chat, significantly increase
user engagement.
The strategy: To overcome this obstacle and improve the website's dynamic and
interactive features, we want to include live chat assistance, discussion boards, and social
feeds.
3. No mobile application Issue: Although the website is responsive, it lacks a separate
mobile application, making it difficult to utilise on a mobile device.
Plan: In the event of significant events or changes, we want to create a mobile app
version of the website that offers push alerts. Users will find it simpler to stay informed
while on the go as a result.
4. Limited access to multimedia:
Restricted interactive features: o Issue: Regretfully, the web writing program's interactive
capabilities, which include forums, feeds, and live chat, significantly increase user
engagement.
The plan: The website already has a fantastic collection of photos and videos, but they
want to add more exciting material, such live streaming sporting events. We intend to
include live chat assistance, discussion boards, and problem-solving tools.
Plan: One of the future intentions is to include a live match display, which will delight
spectators while they watch games and competitions on the website. How frequently does
that occur?
5. Integration with E-Commerce: The issue is that there isn't a sports gear online store on
the internet, which is a lost chance.
Conclusions
The sports website we have built sets a new horizon for the university sports community. It is a
one-stop shop, user-friendly interface to ensure sports practice is promoted, achievements made
are showcased, and overall experience improved. True, we may have seen some technical hitches
on the way. But we bulldozed through—solving challenges that came along the way!
Furthermore, there are plans for more developments to be done—interactive facilities, mobile
apps, live streaming, and e-commerce. the site shall get better.
References
World Wide Web Consortium (W3C). (2021). Web Content Accessibility Guidelines
(WCAG) 2.1. Retrieved from https://www.w3.org/TR/WCAG21/
W3Schools. (n.d.). Responsive Web Design. Retrieved
from https://www.w3schools.com/css/css_rwd_intro.asp
W3Schools. (n.d.). Web Usability and Design Principles. Retrieved
from https://www.w3schools.com
Attachments
1. Meeting Minutes:
Week 1: Brainstorming session, assigning roles, and finalizing the project scope.
Week 2: Design wireframes and mockups through Canva and Figma.
Week 3: Develop the homepage and about page through HTML and CSS.
Week 4: Develop the sports section and gallery page, with multimedia inserts.
Week 5: Troubleshooting and debugging; gather feedback and adjust accordingly.
2. Minutes of attendance: A list of attendees for every meeting.
3. Signed Workload Matrix: This document, which has been signed by every member,
clearly outlines each part of their responsibilities.
4. Progress Reports Every Week: a succinct synopsis of the work we do every week,
starting with the problems we encountered or the fixes we discovered.
Workload Matrix:
Name Work done Signature
Srijan Napit Website Planning &
Wireframing.
HTML Structure & Page
Creation (6 HTML Pages).
Created CSS Styling & UI
Design
Created JavaScript for
Interactivity.
Browser Testing &
Debugging
Narendra Bohora HTML Structure & Page
Creation (4 HTML Pages).
Navigation System
Implementation
Content Writing &
Proofreading
Helped in the output with
explanation
Helped in File Organization &
Naming Convention.
Final Review
Sworup Maharjan Helped in Website Planning &
Wireframing.
HTML Structure & Page
Creation (4 HTML Pages).
Helped in CSS Styling & UI
Design
Multimedia Elements
(Images, Videos,
Animations)
Helped in Content Writing &
Proofreading
File Organization & Naming
Convention
