Betting Website Landing Page Clone

A cloned landing page of a betting promotion for a job application exercise.

Installation

1. Clone the repository.
2. Run npm install to install dependencies.
3. Start the development server using npm start.

Project Structure

• src: Contains the source code for the project.
  • assets: Images or other static assets.
  • components: React components.
  • pages: Different pages of the application.
  • scss: SCSS files for styling.

Technologies Used

• React: A JavaScript library for building user interfaces.
• Sass: A CSS preprocessor for more maintainable and readable stylesheets.
• Vite: A fast, modern build tool that serves as a development server and builds your project for production.
• Git: A version control system for tracking changes in source code during software development.
• npm: The package manager for JavaScript, used to install project dependencies.
• ESLint: A static code analysis tool for identifying and fixing problems in JavaScript code.

Testing and Optimization

• Lighthouse: An open-source, automated tool for improving the quality of web pages.
• W3C Validator: Ensure your HTML and CSS code adheres to W3C standards by validating it using the W3C Markup Validation Service and W3C CSS Validation Service.

Development Environment

• Visual Studio Code: A popular code editor.
• GitHub: Version control and collaboration platform for hosting the project's repository.

VSCode Extensions

• Watch Sass:

  • Description: A helpful extension for watching and compiling Sass files.

• Auto Rename Tag:

  • Description: Automatically renames paired HTML/XML tags.

• Colorize:

  • Description: Adds color to CSS/web colors found in your code.

• Better Comments:

  • Description: Improves the way you comment in your code with categorization and styling.

• Console Ninja:

  • Description: Enhances your console logging experience with additional features.

• Prettier:

  • Description: Code formatter for consistent code styling.

• Readable:

  • Description: Improves code readability with font and syntax highlighting.

• Bito AI:

  • Description: AI Tool used to improve code readability and generate comments.

• Turbo Console.log:

  • Description: Speeds up the process of writing and debugging console.log statements.

Acknowledgements

• Inspiration from the original website Original Website.
• Awesome README