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!
✅ 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.
- HTML5
- CSS3
- Google Fonts
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.
-
ESLint
- Extension: ESLint
- Description: Integrates ESLint into VSCode, providing real-time linting for JavaScript and TypeScript code.
-
Prettier
- Extension: Prettier
- Description: Formats your code according to Prettier's rules, ensuring consistent and clean code styling.
-
Live Server
- Extension: Live Server
- Description: Launches a development server and provides live reloading for your web projects.
-
GitLens
- Extension: GitLens
- Description: Enhances the Git capabilities within VSCode, providing detailed insights and annotations.
- Demo-Video: Watch the Demo Video
- Web Browser: Download Google Chrome
- The design created in Figma: View Figma Design
The guide expects you to use the "Web Browser" listed under the "Links" section.
- Clone the repository to your local machine:
git clone https://github.com/saeedhalabi/Frontend-Learning-project.git
cd Frontend-Learning-project
- Open the project folder in your preferred code editor.
- Locate the
index.html
file and open it with your web browser. - Explore the Fortnite Gaming Timeline locally on your machine.
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.
- 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.
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.