sohailmehmood / dragon-ball-series-website

DRAGON BALL SERIES WEBSITE

Welcome to the Dragon Ball Series Website! This platform is dedicated to all Dragon Ball enthusiasts out there. Our goal is to provide a comprehensive, visually appealing experience to fans of the Dragon Ball series. Whether you're a seasoned fan or new to the series, this website is your one-stop destination for accessing information regarding each saga from each dragonball series.

UX

Colour Scheme

The website employs a dynamic colour scheme to enhance the user experience:

• #1c4595 used for primary text and navigation highlight.
• #e76a24 used for secondary text, underlines and shadows.
• #01080a used for headers and shadows.
• #e7e5e8 used for background color.
• #fbbc42 used for navigation text and standard highlight.

I used loading.io to generate my colour palette.

Typography

• Font Awesome icons were used throughout the site, such as the social media icons in the footer.

Wireframes

To follow best practice, wireframes were developed. I've used Balsamiq to design my site wireframes.

Click here to see the Wireframes

Home

• 

Dragon Ball

• 

Dragon Ball Z

• 

Dragon Ball GT

• 

Dragon Ball Super

• 

Contact

• 

Confirmation

• 

Features

Existing Features

• Navigation bar

  • The navigation bar is a critical website feature, providing users with a menu to easily navigate and access different sections.

• Social Media

  • Social media links in the footer, typically represented by icons, offer users quick access to dragonball social profiles. For users, social media links provide instant connection, enhanced engagement, and opportunities for content discovery. It also includes convenient links to the creator's LinkedIn and GitHub profiles, providing users with easy access to the creator's professional and coding profiles.

• Home page

  • The home page of a Dragon Ball website serves as the entry point, featuring a visually striking hero section. It offers a brief yet engaging introduction to Dragon Ball. This page enhances user engagement, reinforces the Dragon Ball brand, and provides quick access to different aspects of the series, making it an inviting and informative entry point for both newcomers and fans.

• Dragonball page

  • The Dragon Ball page offers an organized overview of the series' story arcs. Featuring visual representations and descriptions for each saga, the page aids in quick reference and enhances user understanding of the series' narrative structure.

• Dragonball Z page

  • The Dragon Ball Z page highlights story arcs from Dragon Ball Z with organized visuals and detailed descriptions. It offers a focused exploration of Dragon Ball Z, enhancing user engagement and providing a comprehensive hub for fans to deepen their understanding of the series.

• Dragonball GT page

  • The Dragon Ball GT page spotlights story arcs from Dragon Ball GT with organized visuals and detailed descriptions. It provides a dedicated space for fans to explore GT's unique sagas.

• Dragonball Super page

  • The Dragon Ball Super page highlights story arcs from Dragon Ball Super, featuring organized visuals and detailed descriptions. It provides fans with a dedicated space to explore Super's unique sagas, encouraging engagement and offering a comprehensive hub for a deeper understanding.

• Contact page

  • The Contact page facilitates direct communication with the website's creator. It includes a user-friendly form for sending messages, ensuring straightforward interaction and providing an accessible channel to connect with the creator.

• Confirmation page

  • The Confirmation page assures users of a successful message submission to the website creator. It features a brief confirmation message and automatically redirects users to the home page after 5 seconds, ensuring a smooth and efficient user experience.

• Youtube video

  • Embedded YouTube videos of the intros for each series onto the series page. This provides users with a visually engaging and convenient way to preview the intro directly on the site.

• MP3 Audio intro

  • Playable audio file which enables users to play embedded MP3 files of each Dragon Ball series' soundtrack directly on the relevant pages, enhancing the user experience.

Future Features

• Feature #1: Movie Showcase Page
  • Introduce a dedicated page for showcasing movies related to the Dragon Ball series. Include relevant details, summaries, and potentially embedded trailers or clips for an engaging user experience.
• Feature #2: Game Showcase Page
  • Implement a dedicated page highlighting Dragon Ball video games. Provide information on various games, including release dates, platforms, and potentially embed gameplay videos for user exploration.

Tools & Technologies Used

• HTML used for the main site content.
• CSS used for the main site design and layout.
• CSS Flexbox used for an enhanced responsive layout.
• Git used for version control. (git add, git commit, git push)
• GitHub used for secure online code storage.
• GitHub Pages used for hosting the deployed front-end site.
• Visual Studio Code used as an IDE for development.
• JPG to PNG used to change img type.
• Youtube to MP3 used to get audio from youtube video.

Testing

For all testing, please refer to the TESTING.md file.

Deployment

The site was deployed to GitHub Pages.

The live link can be found here

Local Deployment

This project can be cloned or forked in order to make a local copy on your own system.

Cloning

You can clone the repository by following these steps:

1. Go to the GitHub repository
2. Locate the Code button above the list of files and click it
3. Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
4. Open Git Bash or Terminal
5. Change the current working directory to the one where you want the cloned directory
6. In your IDE Terminal, type the following command to clone my repository:
   • git clone https://github.com/SohailMehmood/Dragon-Ball-Series-Website.git
7. Press Enter to create your local clone.

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.

Forking

By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. Once clicked, you should now have a copy of the original repository in your own GitHub account!

Credits

Content

Source	Location	Notes
Markdown Builder	README and TESTING	tool to help generate the Markdown files
Flexbox Froggy	entire site	modern responsive layouts
DragonBall Fandom	List of Sags	used to source information about the order of sagas

Media

Source	Location	Type	Notes
Goku Growing Up	home page	image	hero image background
Dragon Ball	dragonball page	image	dragonball picture
Pilaf	dragonball page	image	pic of pilaf
Tournament	dragonball page	image	pic of kid goku in tournament
Red Ribbon	dragonball page	image	pic of the red ribbon army
Fortune Teller Baba	dragonball page	image	pic of forune teller baba
Tien	dragonball page	image	pic of tien
King Piccolo	dragonball page	image	pic of king piccolo
Piccolo Jr	dragonball page	image	pic of piccolo jr
Dragon Ball Intro Audio	dragonball page	audio	dragon ball intro
Dragon Ball Intro Video	dragonball page	video	dragonball intro
Dragon Ball Z	dragonball z page	image	pic of the dragon ball z logo
Raditz	dragonball z page	image	pic of raditz
Vegeta	dragonball z page	image	pic of vegeta
Namek	dragonball z page	image	pic of planet namek landscape
Ginyu Force	dragonball z page	image	pic of captain ginyu and the ginyu force
Frieza	dragonball z page	image	pic of frieza
Garlic Jr	dragonball z page	image	pic of garlic jr
Trunks	dragonball z page	image	pic of trunks
Androids	dragonball z page	image	pic of androids 17 and 18
Imperfect	dragonball z page	image	pic of imperfect cell
Perfect	dragonball z page	image	pic of perfect cell
Cell Games	dragonball z page	image	pic of the cell games arena
Other World	dragonball z page	image	pic of goku as ssj3 in other world
Great Saiyaman	dragonball z page	image	pic of the great saiyaman
World Tournament	dragonball z page	image	pic of the world martial arts tournament arena
Babidi	dragonball z page	image	pic of babidi
Majin Buu	dragonball z page	image	pic of majin buu
Fusion	dragonball z page	image	pic of fusion
Kid Buu	dragonball z page	image	pic of kid buu
Peaceful World	dragonball z page	image	pic of the peaceful world
Dragon Ball Z Intro Audio	dragonball z page	audio	dragonball z intro
Dragon Ball Z Intro Video	dragonball z page	video	dragonball z intro
Gt	dragonball gt page	image	dragonball gt logo
Black Star	dragonball gt page	image	pic of the black 4 star dragonball
Baby	dragonball gt page	image	pic of baby
Super 17	dragonball gt page	image	pic of super 17
Shadow Dragons	dragonball gt page	image	pic of the shadow dragons
Dragon Ball GT Intro Video	dragonball gt page	video	dragonball gt intro
Dragon Ball Gt Intro Audio	dragonball gt page	audio	dragonball gt intro
Super Logo	dragonball super page	image	pic of the dragonball super logo
Beerus	dragonball super page	image	pic of beerus
Golden Frieza	dragonball super page	image	pic of golden frieza
Champa	dragonball super page	image	pic of champa
Copy Vegeta	dragonball super page	image	pic of copy vegeta
Goku Black	dragonball super page	image	pic of goku black and zamasu
Tournament of Power	dragonball super page	image	pic of the tournament of power arena
Dragon Ball Super Intro Video	dragonball super page	video	dragonball super intro
Dragon Ball Super Intro Audio	dragonball super page	audio	dragonball super intro

Acknowledgements

• I would like to thank my Code Institute mentor, Tim Nelson for their support throughout the development of this project.
• I would like to thank the Code Institute tutor team for their assistance with troubleshooting and debugging some project issues.
• I would like to thank the Code Institute Slack community for the moral support; it kept me going during periods of self doubt and imposter syndrome.