Fortnite TimeWarp: A Comprehensive Gaming Timeline

Description

Welcome to my Gaming Journal! It's a simple and friendly website where I share my gaming journey, fun moments with friends, and connect with other gamers. Easy to use, full of pictures, and a great way to join the gaming community. Let's explore and game on together!

Features

✅ User-Friendly Navigation: Easily explore different sections of the timeline.

✅ Engaging Hero Banner: Capture attention with a visually appealing hero section.

✅ Personalized Journey: Share your Fortnite story from early experiences to advanced strategies.

✅ Visual Storytelling: Use visuals and storytelling for an immersive experience.

✅ Interactive Journey Overview: Explore key milestones and defining moments.

✅ Community Showcase: Highlight squad moments and build real friendships.

✅ User Engagement: Share your victories and challenges for a thriving community.

✅ Sneak Peek: Preview future quests and challenges.

✅ Google Fonts Integration: Enhance aesthetics with Montserrat, Roboto Condensed, and Poppins.

✅ Smooth Scrolling: Polished and enjoyable user experience.

✅ Call-to-Action Button: Engage with a "Start Your Journey" button.

Technologies Used

• HTML5
• CSS3
• Google Fonts

Application of choice

VS-Code

The whole application was designed using Visual Studio Code

developed by Microsoft, it is a popular and versatile source code editor known for its lightweight design, extensive features, and robust support for various programming languages.

Useful Extensions

1. ESLint

   • Extension: ESLint
   • Description: Integrates ESLint into VSCode, providing real-time linting for JavaScript and TypeScript code.

2. Prettier

   • Extension: Prettier
   • Description: Formats your code according to Prettier's rules, ensuring consistent and clean code styling.

3. Live Server

   • Extension: Live Server
   • Description: Launches a development server and provides live reloading for your web projects.

4. GitLens

   • Extension: GitLens
   • Description: Enhances the Git capabilities within VSCode, providing detailed insights and annotations.

Links

• Demo-Video: Watch the Demo Video
• Web Browser: Download Google Chrome
• The design created in Figma: View Figma Design

Setup

Prerequisites

The guide expects you to use the "Web Browser" listed under the "Links" section.

Cloning the Repository

1. Clone the repository to your local machine:

   git clone https://github.com/saeedhalabi/Frontend-Learning-project.git
   

Navigate the Project Directory

cd Frontend-Learning-project

Running the Project Locally

1. Open the project folder in your preferred code editor.
2. Locate the index.html file and open it with your web browser.
3. Explore the Fortnite Gaming Timeline locally on your machine.

Learnings

Throughout the development of the Fortnite TimeWarp project, I gained valuable insights and skills in:

• HTML5 for structuring the content of the web page.
• CSS3 for styling and layout, enhancing the visual appeal of the website.
• Integrating Google Fonts to improve the typography and overall design.
• Implementing smooth scrolling for a polished user experience.
• Learned how to structure elements using Flexbox.
• HTML class naming conventions.

Challenges Faced

• Flexbox
  • Customizing layouts to make them look good.
  • Organizing stuff on the page by using containers.
• Making the text look nice by enhancing typography.
• Using git to commit and share my work.

Despite these challenges, each hurdle provided an opportunity for growth, skill development, and a more robust understanding of web development principles.

Disclaimer

This project is not designed to be responsive. It may not display optimally on various devices and screen sizes. Please use a desktop or laptop for the best experience.