KwickerHub / KwickerHub/WebCraftifyAI

table Creator - Web design #32

Open
#383 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

first-timers-only good first issue hacktoberfest hacktoberfest2023
Dominant language
HTML
Stars
88
Forks
367
PR merge metrics
No merged PRs in 30d

Description

https://images01.nicepagecdn.com/page/87/27/html-template-87275.jpg Design a table like the above image

Create a file "table_NUM_by_(YourName).html" in the modules/table folder.

Use simple HTML and CSS and JAVASCRIPT to create the table animation. You can use the interface development https://kwickerhub.com/ (This project) or you can write the lines of code yourself.

Step by Step Guide.

Fork this project(Use the 'fork' button in the top right corner) and Clone your Fork.
git clone https://github.com/YOUR_USERNAME/frontend

Open your code Editor and Create a file "table_NUM_YOUR_NAME_.html" in the "modules/table" folder of this project you just cloned. No need to create head, title and body tags, Just Add a div tag with some embedded style(i.e use the style tag) and the script tag where necessary.

If you want to add an image resource, please add it in the folder ••
"modules/table/images_and_icons"
We recommend you use an svg for your image/icon.

Push your Code: You need to push your recent changes back to the cloud. Use the command below in the main directory of this Repository

git push origin dev

or use a GUI tool to avoid mistakes or complexity. LOL.

Then make you Pull Request...

Below is a example of the code structure we need:

'''

<style> /* YOUR STYLE */ </style> <script> // YOUR SCRIPT if any </script>

'''

For more examples:
modules->buttons
modules->cards
for examples of contributions or Pull request accepted in to the project.

And please do not wait for this issue to be assigned to you as we have limited hands but have a lot to do/cover. Please send in your PR.

Good-luck.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the reference image and the existing examples in modules/buttons and modules/cards, then create a named HTML file in modules/table. Follow the provided div, style, and script structure and use modules/table/images_and_icons for any assets. Done means the table matches the reference and its animation works in the project.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
design, frontend, web-dev
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.