Git Product home page Git Product logo

web-templates's Introduction

HTML/CSS/JS Web Components

Overview

The goal of this project is to help the beginners with their contributions in Open Source. We aim to achieve this collaboratively, so feel free to contribute in any way you want, just make sure to follow the contribution guidelines. Provide a simple web component like input, title, heading, paragraphs, bottons, image, animation, responsive components, lists, tables, spans, etc.

Implementations ⚙

NOTE: Please attach a screenshot of the template/website/project you are providing.

Quick Start

Follow these steps below to get started with open-source contribution:

  • Download Git

    1. Go to this page here and download Git for you device.

  • Setup GitHub

    1. Create a GitHub account.

    2. Go to the Issue tab of this repository and find a issue which you can resolve and comment down I want to work in this issue. Please assign me!

    3. Now wait for the assignment of that issue to you. (This will depend on first-come first-server basis). You can also create your own issue and you will be assigned to it as soon as possible.

    4. Fork this repository by clicking on the Fork button at top right of this project's page. After this you will get a repository in your profile with name <YOUR_GITHUB_USERNAME>/web-templates

    5. Clone the forked repository you got by executing this command in terminal (Command Prompt for window users).

      git clone https://github.com/<YOUR_GITHUB_USERNAME>/templates.git

      replace <YOUR_GITHUB_USERNAME> with your GitHub's user name and press enter. And you may also be prompted to enter you github's username and password, enter those data and cloning will start. The above step will make a copy of this project in your local device.

    6. Make changes as per required by the issue you are assigned. 7. Run this command to see what changed in the project.

      git status

    7. Execute this command to save the changes in that branch.

      git add .

    8. Commit the changes (This will make a record that you have changed something in the project).

      git commit -m "what you changed goes here"

    9. Run this command to push the code to your forked repository.

      git push

      Now upto this point you have downloaded the project, made changed and pushed them to the forked repository. Now the pushed code is in your profile make sure it goes to the main repository. For that create a PR by clicking the Open Pull Request. Whenever you makes changes one more section got shown in the forked repository which says Contribute above the project files list. Click on that and you will see the Open Pull Request.

Hurray! You made your first open-source contribution. Congratulations! Keep It Up!

Code Format

  1. Whatever you are implementing let say Button. Create a new folder named Button inside Components/Light Mode.
  2. If it is in light mode do the above step index Components/Light Mode/Button folder else Components/Dark Mode/Button folder
  3. Add html file - index.html(required), in this folder. Rest you can add more css, js, html files as per your requirements.
  4. If your are adding a new website template like a utility website. Then add the whole project under Projects/Light Mode/<Your Project name>/<Your Project's Files>.
  5. Same applies for this if the website is in light mode add your code files inside Projects/Light Mode/<Your Project name>/<Your Project's Files> else Projects/Dark Mode/<Your Project name>/<Your Project's Files>.

Implemented Components

✔️ - Done ❌ - Pending (Not Implemented)

Components Dark Mode Light Mode
Alert ❌ ❌
Autocomplete ❌ ❌
Avatars ❌ ❌
Badges ❌ ❌
Backdrop ❌ ❌
Box ❌ ❌
Button ❌ ❌
Button Group ❌ ❌
Checkbox ❌ ❌
Chip ❌ ❌
Corner Dialog ❌ ❌
Dialog ❌ ❌
Divider ❌ ❌
Filepicker ❌ ❌
Form Field ❌ ❌
List ❌ ❌
Menu ❌ ❌
Pagination ❌ ❌
Popover ❌ ❌
Positioner ❌ ❌
Progress ❌ ❌
Radio ❌ ❌
Rating ❌ ❌
Search Input/Box ❌ ❌
Select ❌ ❌
Select Menu ❌ ❌
Side Sheet ❌ ❌
Slider ❌ ❌
Spinner ❌ ❌
Switch ❌ ❌
Tab ❌ ❌
Table ❌ ❌
Tag Input ❌ ❌
Text Input ❌ ❌
Textarea ❌ ❌
Toast ❌ ❌
Tolltip ❌ ❌

Directory Tree 👇🏻

Directory Tree 
.
|-- CODE_OF_CONDUCT.md
|-- Components
|   |-- Components.md
|   |-- Dark\ Mode
|   |   `-- Dark\ Mode.md
|   `-- Light\ Mode
|       `-- Light\ Mode.md
|-- LICENSE
|-- Projects
|   |-- Dark\ Mode
|   |   `-- Dark\ Mode.md
|   |-- Light\ Mode
|   |   `-- Light\ Mode.md
|   `-- Projects.md
`-- README.md

web-templates's People

Contributors

agraghav26 avatar dhanraj-patil avatar sobhanbera avatar ydixit007 avatar

Stargazers

avatar

Watchers

avatar

Forkers

dhanraj-patil ydixit007 agraghav26

web-templates's Issues

Spinner is Needed

Implement a Spinner/Loading Element using HTML, CSS, JS.

  1. Design should look good.
  2. Design should be responsive.
  3. Use #0F60B6 as the primary color. Or you can also choose the color by yourself.
  4. Center the element if possible.
  5. Curved Corner if possible.
  6. If Animated then also provide a non-animated element alongside.

Implement a Select Box

Implement an Select Element using HTML, CSS, JS to take gender input.

  1. Design should look good.
  2. Design should be responsive.
  3. Use #0F60B6 as the primary color. Or you can also choose the color by yourself.
  4. Center the element if possible.
  5. Curved Corner if possible.
  6. If Animated then also provide a non-animated element alongside.

Implement Textarea

Implement a Textarea Element using HTML, CSS, JS to take input.

  1. Design should look good.
  2. Design should be responsive.
  3. Use #0F60B6 as the primary color. Or you can also choose the color by yourself.
  4. Center the element if possible.
  5. Curved Corner if possible.
  6. If Animated then also provide a non-animated element alongside.

Button Component

Implement a Button Element using HTML, CSS, JS to show any alert.

  1. Design should look good.
  2. Design should be responsive.
  3. Use #0F60B6 as the primary color. Or you can also choose the color by yourself.
  4. Center the element if possible.

Input Box Needed

Implement an Input box Element using HTML, CSS, JS to take email and password input.

  1. Design should look good.
  2. Design should be responsive.
  3. Use #0F60B6 as the primary color. Or you can also choose the color by yourself.
  4. Center the element if possible.
  5. Curved Corner if possible.
  6. If Animated then also provide a non-animated element alongside.

Implement Button Component

Implement a Button Element using HTML, CSS, JS to show an alert.

  1. Design should look good.
  2. Design should be responsive.
  3. Use #0F60B6 as the primary color. Or you can also choose the color by yourself.
  4. Center the element if possible.
  5. Curved Corner if possible.
  6. If Animated then also provide a non-animated element alongside.

Implement a Select Box

Implement an Select Element using HTML, CSS, JS to take gender input.

  1. Design should look good.
  2. Design should be responsive.
  3. Use #0F60B6 as the primary color. Or you can also choose the color by yourself.
  4. Center the element if possible.
  5. Curved Corner if possible.
  6. If Animated then also provide a non-animated element alongside.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.