jisan-mia/dom-projects

dom-projects is an open-source web app that helps you learn frontend development faster with a hands-on practice style. It is a collection of projects that you can use to learn HTML, CSS and JavaScript

DOM Projects(Repo: dom-projects)

Learn . Create . Share about your Frontend Development Journey

View Demo · Report Bug · Request Feature

Introducing DOM Projects

dom-projects is an open-source web app that helps you learn Frontend Development faster with a hands-on practice style. It is a collection of HTML, CSS and JavaScript projects that you can use to learn Frontend Development.

You can also create your projects and share them with the world.

Demo

Here is the link to the app. We hope you enjoy it.

The DOM Projects app Link

How to Set up DOM Projects for Development?

It's simple. As this project was built using only HTML, CSS, JavaScript, no need of any build step, all you need is to fork the repo then clone it to your local machine and open index.html file on your browser.

You may want to set up the dom-projects repo for the following reasons:

• You want to create a new Project using HTML, CSS and JavaScript or want to edit an existing project as a contributor. Please check the Contribution Guide to get started.

• You want to contribute to the dom-projects repo in general. Please check the Contribution Guide to get started.

Here is a quick overview of the dom-projects repo setup:

Fork and Clone the Repo

First, you need to fork the dom-projects repo. You can do this by clicking the Fork button on the top right corner of the repo. If you are new to forking, please watch this YouTube Guide to get started.

Once forked, you can clone the repo by clicking the Clone or Download button on the top right corner of the forked repo.

Please change the directory after cloning the repository using the cd <folder-name> command.

After navigating to the project directory, open the index.html file.

Built With

• HTML
• CSS
• JavaScript

Contributing to DOM Projects

Any kind of positive contribution is welcome! Please help us to grow by CONTRIBUTING to the project.

If you wish to contribute, you can,

• Create a Project
• Suggest a Feature
• Test the app, and help it improve.
• Improve the app, fix bugs, etc.
• Improve documentation.
• Create content about DOM Projects and share it with the world.

Please follow to guidelines outline in the CONTRIBUTING file, for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

🆕 New to Open Source? 💡 Follow this guide to jumpstart your Open Source journey 🚀.

License

The DOM Projects website is licensed under the MIT License, permitting the usage, modification, and distribution of the codebase. See the LICENSE file for more details.

Thank you for being a part of this project and embracing a unique frontend learning experience! Happy coding!

dom-projects's Issues

Color Picker

What's the Project about?

What Frontend Development(HTML, CSS, JAVASCRIPT) concept will be used to create this project?

New Project

Record

• I have checked the existing issues
• I have read the Contributing Guidelines
• I want to work on this issue

Code of Conduct

• I agree to follow this project's Code of Conduct

[Feature request]: Use a more recent version for modals

Type of feature

🧑‍💻 Code Refactor

Is your feature request related to a problem? Please describe.

Modal example works as expected:
https://www.jisan.io/dom-projects/projects/modal/

But fails if we check WCAG standards (for example: impossible to close the modal with Esc key).

Describe the solution you'd like.

Now that we are in 2024, I will suggest to use Dialog tag that works in all browsers and simplifies a lot the way to develop a modal.

If you prefer to keep the current one as "legacy" version then will be better to create a new one.

Describe alternatives you've considered.

Here is the MDN documentation with some examples:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Screenshot / Screenshare

No response

Additional context

If this seems plausible, I can give a hand and develop an example.

Record

• I have checked the existing issues
• I have read the Contributing Guidelines
• I want to work on this issue

Code of Conduct

• I agree to follow this project's Code of Conduct