Kazuki Takahashi born on October 4th 1961 was a well known manga, author illustrator of the popular series Yu-Gi-Oh, whom died in diving incident on the 4th of July 2022 saving a woman and her 11 year old daugther and Major Robert Borgeau who was as a diving instructor on the coast of Okinawa Island. Kazuki was who is known for creating the well known anime series of Yu-Gi-Oh (2000), Yu-Gi-Oh 5D's (2008) and Yu-Gi-Oh Zexel (2011) and appeared as a regular feature in the magazine Shonen Jump in 1996. With the popularity of the series of teenage fans it inspired Kazuki to create the Official Card Game (OCG) which was first introduced in Japan and Trading Card Game (TCG) which was later introduced in the West, where it allowed players to duel with numerical valued ability cards against each other, following in the success of the hugely successful Pokémon TCG.
[Click here to view deployed site]Yu-Gi-Oh-Guide
- Site Overview
- Project-Planning
- Current Features on all pages
- Individual Page Contents features
- Potential-Features
- Testing Phase
- Deployment
- Credits
- For users who are interested in learning how to play the Trading Card Game.
- For users who want to build their own perosnal play style and deck from scratch.
- For users who are returning/new players who have a general interest of the series and want to learn more about the game.
- For users who have never heard of YU-Gi-OH but are interested in the franchise.
- Educating the user on how to play the game.
- Educating the user on how to construct their own deck/playinig style.
- Providing the user with external information to allow them to play and participate in local or online events.
- Promoting the popularity of Yu-Gi-Oh as a fan to encourage more people to play the franchise.
- Providing extra information on a extensive data base at which teh user can research at their own discretion.
- As a user, I want to see information about the latest updates by Konami.
- As a user, I want to navigate the page with ease.
- As a user, I want to leave feeling as I know more about the Yu-Gi-Oh franchise.
- As a user, I want to be able to play and connect with other people around the globe through different social media platforms.
- As a user, I want to b able to play with different people through different means whether it is by a website, official franchise, games or in real life.
-
The home page will allow the user a brief introduction as to what Yu-Gi-Oh is and a navigation point to different parts of the site.
-
The site will provbide multiple links and resources such as:
- The official website on Yu-Gi-Oh where it will show the latest updates and new decks that will be released by Konami.
- Links to an extenseive database/deckbuilder where the user can create tehir ideal deck.
- Embedded Youtube Videos showcasing tips and tricks.
-
The site will provide different options on where to be involved with the Yu-Gi-Oh Community.
- Through official Konami made apps where users can pit against each other virtually or in person.
- Fan-made websites where the user can play virtual decks.
-
The site will provide users a link on where to watch the series (providing they have an account linked via Crunchyroll or any affiliated anime streaming sites).
-
To prevent any digression to the from the scope objectives, I have made wireframes for the project. Both the mobile and desktop version will have links to their respected versions of all six pages of the Yugioh guide:
-
Mobile Wireframes:
-
Desktop Wireframes:
-
There was small changes from the planned wireframes to enhancve the UX (User Experience). Changess include:-
- Links on the homepage which direct teh user to differnt extrnal site e.g Youtube or the offcial Yu-Gi-OH site.
- Headings and placement of content to allow for a smoother flow and consistency across all pages.
- When creating the intial overall design of the site I have decided to use this colour scheme to go with the overall Yugioh to make it look more mysterious and within the color scheme of the cards from monster effects, to spells, traps and the newer cards which Konami have introduced, for example; XYZ , Synchro and Link monsters.
-
All Headers have always been stuck to the top left of the pages or the center for mobile. The orginal plan was to use the headers as a way to naviagte back to the home-page but due to time constraints of the project being due very soon, it will be added at a later date a new feature.
-
The headers contain all of the features
The header itself contains the following features:
- The title is there to indicate the purpose of each page.
-
The logos illustrate the site's theme and offer something to appease the user's eye by filling the blank space without distracting from the title.
-
The logo on mobile version is to make sure that the title is enalarged on a smaller screen for a better user experience.
-
Whereas the logo on the desktop version is to fill as much white space as possible on a higher screen resolution for a much cleaner appearence.
-
-
all of the navigation tabs appear on all 6 pages of the site.
-
Each of the pages links to the about page, essentials, card information, decks, how to play, and the current banlist allowing for easy navigation between the tabs.
-
In the image below it shows that whenever a user is on the current page it is highlighted underneath a small purple line.
-
Hovering over the menu will turn the highlighted word in a different color.
- I have only added the hero image on the main home-page to act as the main attraction at which people would see once they open the link.
- The image has a zoom animation to attract the user to make it more presentable.
- Each of the iamges used in this project is within them of Yugioh or explaining the functionality of the cards.
The picture used in as the hero image is none other than Linkuriboh, this cute round monster has appeared on the anime series of Yu-Gi-Oh Vrains which is the first to introduce Link summoning which is later introduced in the TCG game.
the picture used for the main banner for all of the pages is from a fan based site which produce incredible wallpapers for all Yu-Gi-Oh fans.
- All anchor tags that have been used in the page's contents do not have a under-lined hyperlink.
- Instead there is a color change upon hovering the links and also a color change upon visting the pages.
- The Hoevr over effect on all th ehyper links show a red color contrast from the original gold text to indicate the user about to select a different link.
- Have a hover-over effect that turns the Hyperlink a darker color from the gold gradient used throughout the page.
- At which i have created a seperate code in style.css to show that once the user has been to the site it will change from gold to red.
-
The footer has direct links to all of the offcial social media accounts of the Yu-Gi-oh franchise. Each of the icons are unique with their own colours for their own branding.
-
All the icons were imported from the font awesome site using Javascript at the bottom of the page.
-
In some of the footers on the rest of the pages I have included that a disclaimer that the site that is being built is merely a fan-based site at which it acts as a guide for returning or new players interested in the franchise and that all of the stated material goes to the rightful owners of the Yu-Gi-Oh franchise of STUDIO DICE/SHUEISHA, TV TOKYO, and KONAMI.
Throughput the project all of the fonts that were used were primarily
-
Oswald - for an eyecatching look.
-
Space mono- for the retro gaming effect it has.
-
All Fonts that have been sued have been sourced from Google Fonts (as quoted in the credits)
- The main page gives a brief overview of what yugioh is.
- The linked youtube video is showcasing tips and tricks on returning player son how to get better at the TCG game.
- It also has its distinctive well-known gaming icons of both Sony and Microsoft.
- This page gives you information at which the person needs certain resources if they choose to play th egame in real life.
- It also states the various different accessories which are available to enhance the users exeprience such as card sleeves for the added protection of the cards and the aesthetically pleasing artwork offered on said card sleeves or game mats.
- It also shows a diagram showing the different indicated numbers of the playing mat at which players have to set up their own decks.
- This page explains on the basic structure of the card, consisting of the name, card description, the type, the attribute, level, the printed official card number, and its attack and defense points.
- below it explains the different card effects that cards have and how each one has its own use in any given situation.
- The Decks page offer fan favourites to the top tier meta cards at which many players use in various tournaments.
- Each of the cards are clickable and will send the user to an external site which will show the user of the full deck to build, if they choose to do so.
- This is a tutorial at which it showcases a step-by-step guide on howto play the game explaining the turn systems and how toplay various different cards.
- It also explains the different scenarios at which players can tactically play at their discretion and th evarious Spell and trap icons and meanings behind the cards.
- This just shows a very static list of all of the upadated various cards that have been banned in any sort of offcial competition setting by Konami.
- My Original idea was to link each of the cards to the data-base of the offcial Yu-Gi-Oh site but it will be mentioned in the Potential-Features.
-
Due to the personal busy schedule I have had many ideas at which i want to implement for this site were not added. But these are the ideas at whic i would like ti impliment in t henear future:
- A scrollable gallery with the deck so that all the cards are not static
- links to each individual card within the ban list table to allow for an easier naviagtion for the user.
- An interactive animation at which it shows the user on how to play specfic cards.
-
Once I have better knowledge of learning Javascript later on the course i would like to add a drop down menu either on the side or the top of the page which allows for an accessible way of naviagting different tabs or different information.
I have added a Testing document which states the tests on the porject on pre-devlopment and post-development. TESTING.md
The project has been deployed with the following steps: -
- Within the project's repository, you then select the Settings tab.
- Then select the Pages menue tab on the left side.
- Under Source then, select the Main branch from the drop-down menu and click Save.
- A message will then show that the porject has been successfully launched with the live link.
This project was a very fun and interesting way to showcase what i was capable of doing through my personal hobbies but i must credit the following people who have been supporting me throughout:
- Can Sucullu - The Code Institute mentor who i may not have known for too long but has been a huge help to helping plan alot of the project and to pick out important stuff to include for th enear future (I will definitely be looking forward to our next meeting Can!)
- The Slack community of Code Institute for helping me find useful tips and tricks throught the course and project.
- My older brother for always giving me the best advice and always picking out the flaws in me to improve in any aspect (especially this project too).
- Huge Huge thanks to my girlfriend who is always supporting me and pushing me all the way love you.
- The project was inspired by the Code Institute's coding project called Love Running. i have tried to change as much as possible but there may be some similarties within the codes.
- I have also used W3Schools for useful tips on coding and the generic coding and for tips and tricks.
- All the content produced by me was all written by hand with the excemption of banlist.html as a majority of the data for the card names have been copied for accuracy.
- Icons that were used throughout the project were taken from Font-Awesome
- The golden gradient colour scheme - brandgradients.com.
- All fonts used have been imported from - Google-Fonts
-
Yugioh database- Yu-Gi-Oh Database
-
Video on index.html has been taken from TeamSamuraiX1's official YouTube channel
-
Dueling nexus to practice and play with differnt players- Dueling Nexus
-
To Watch all of the series- Anime Planet
-
Play the official game by Konami - Master-Duel
-
Image within the home-page on index.html - Linkuriboh
-
Image within the essentials-page on essentials.html - pendulum-mat
-
Image within the cardinfo-page on cardinfo.html - number 62
-
Image within the decks-page on decks.html - Galacxy-eyes-photon-dragon
-
Image within the decks-page on decks.html - eldlich-the-golden-lord
-
Image within the decks-page on decks.html - number_c62_neo_galaxy_eyes_prime_photon_dragon
-
Image within the decks-page on decks.html - ultimate-conductor-tyranno
-
Image within the decks-page on decks.html - sky-triker-ace-kagari
-
Image within the decks-page on decks.html - tri-brigade-shuraig-the-ominous-omen
-
Image within the decks-page on decks.html - divine_arsenal_aa_zeus___sky_thunder
-
Image within the decks-page on decks.html - kashtir-la-riseheart
-
Image within the decks-page on decks.html - infinitrack-megaclops
-
Image within the decks-page on decks.html - blue-eyes-chaos-max-dragon
-
Image within the play-page on play.htmlhunter-dragon
-
Image within the play-page on play.htmlset-card
-
Image within the play-page on play.htmlblue-eyes-alternative-white-dragon
-
Image within the play-page on play.htmldark-magician
-
Image within the play-page on play.htmlluster-dragon
-
Image within the play-page on play.htmlseleglare
-
Image within the play-page on play.htmlfield-barrier
-
Image within the play-page on play.htmlanti-spell-fragrance
-
Image within the play-page on play.htmlparasomnia-pillow
-
Image within the play-page on play.htmltwin-twisters
-
Image within the play-page on play.htmlfield-spell
-
Image within the play-page on play.htmlcounter-trap-card
-
banner image on index.html - Yugioh wallpaper
-
Image compressions- TinyPNG
-
watermark remover-watermarkremover.io
-
Colored grid scheme - EightShapes
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
