HIOSC X Hacktoberfest 2023 Frontend Challenges

This repo is created for Hacktoberfest 2023, a month-long celebration of open source software. It contains a collection of frontend challenges from [Frontend Mentor], a platform that provides real-world HTML, CSS and JavaScript challenges with professional designs.

The goal of this repo is to help beginners and experts in frontend development to practice their skills, learn new techniques, and contribute to open source projects. You can choose from different levels of difficulty and get feedback from other developers.

How to participate

To participate in Hacktoberfest 2023, you need to register on the [official website] and make four valid pull requests to any public GitHub repository by October 31st. You can read more about the [participation guidelines] and the [quality standards] on the Hacktoberfest website.

To contribute to this repo, you need to follow these steps:

  • Fork this repo and clone it to your local machine.
  • Choose a challenge from the Frontend Mentors and create a new branch for it. The branch name should be in the format challenge-name-your-name.
  • Create a folder with the name in this format challenge-name-your-name, this is where your task will be done.
  • Complete the challenge using HTML, CSS and JavaScript. You can use any framework or library you like, but make sure to follow the code style and the best practices for this repo.
  • Add your name and GitHub profile link to the CONTRIBUTORS.md file.
  • Push your changes to your fork and create a pull request to the main branch of this repo. Make sure to add a descriptive title and a screenshot of your solution to the pull request.
  • Wait for a review from the maintainer or other contributors. If your pull request is approved, it will be merged to the main branch. If your pull request needs some changes, you will get feedback on how to improve it.

Video Demo

Challenges

You can head over to Frontend Mentors for list of challenges that you can choose from. Each challenge has a zip folder you can download from that contains the starter files and the design files. You can also find a README file for each challenge that describes the requirements and the expected outcome.

Code style

This repo follows the [Google HTML/CSS Style Guide] and the [Airbnb JavaScript Style Guide]. You can use a code formatter like [Prettier] or [Beautify] to automatically format your code according to these rules.

Best practices

Here are some best practices that you should follow when completing the challenges:

  • Use semantic HTML elements and follow the HTML5 standards.
  • Use responsive design and make sure your solution looks good on different screen sizes and devices.
  • Use accessibility features and follow the Web Content Accessibility Guidelines (WCAG).
  • Use comments and meaningful variable names to make your code easy to read and understand.
  • Use Git and GitHub to manage your code and track your progress.
  • Write clean and modular code and avoid code duplication.
  • Use a linter like [ESLint] or [JSHint] to check your code for errors and bugs.
  • Test your code and fix any issues before submitting your pull request.

License

This repo is licensed under the MIT License.

Code of conduct

This repo follows the Contributor Covenant Code of Conduct. By participating in this project, you agree to abide by its terms.

Top categories

Loading Svelte Themes