Code Monkey home page Code Monkey logo

html-tips-tricks's Introduction

html-tips-tricks

HTML5 is not a new thing. We have been using several features of it since the initial release(October 2014). As part of #100DaysOfCode initiative, I have taken time out to revisit the feature list again. See what I found? I haven't really used a bunch of it!

In this repo, I am listing down such HTML5 features that I haven't used much but, found them useful. I have also created a working example flow and hosted on netlify. Hope you find it useful.

https://html5-tips.netlify.app/

To read more about this:

10 useful HTML5 features You may not be using

Many Thanks to all the Stargazers who has supported this project with stars(⭐)

Stargazers repo roster for @atapas/html-tips-tricks

html-tips-tricks's People

Contributors

alidhuniya avatar atapas avatar ummeq avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

html-tips-tricks's Issues

Add more tips

add figure and tooltip folder also want to change its ui to make it more attractive

I want to add a Progress Tag folder

Progress tag is HTML5 feature. The progress tag helps users check the progress of a task during the execution. Users will need to define the dynamically changing values of the progress bar with the scripts (JavaScript).

Kindly assign me this issue

[Feature]: Adding audio and video tags

Is your feature request related to a problem? Please describe.
HTML5 supports embed of audio and video tags.

Describe the solution you'd like
I would like to create a new section for audio and video tags on this list.

Add a color picker input tag feature.

Is your feature request related to a problem? Please describe.
It is a feature. I want to add a color picker tag option.

Describe the solution you'd like
I want to add color picker input tag feature.

Additional context
Add any other context or screenshots about the feature request here.

Language popup appearing for Dialog section

On checking out the dialog tag page, the language is detected as Dutch and this hinders the user experience as the user gets distracted every time or is felt compulsive about choosing an option to move further.

image

Strikethrough text without CSS, using native HTML5

Is your feature request related to a problem? Please describe.
Perhaps less well known, is that you can strikethrough text using HTML rather than resorting to CSS, which before researching about this, I would use CSS text-decoration property. A use case could be for displaying old product/service prices with strikethrough, next to the new discounted price. I would like to add this feature as a part of the HTML tips and tricks.

Describe the solution you'd like
Put a demo for the <s> tag in the repo. Note the <strike> tag is deprecated.

Please can you assign this to me?

Just want to improve favicon is only added to index.html and i just want to add favicon to all the html pages

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Feature: Adding Ifram tag to the list

Is your feature request related to a problem? Please describe.
I would like to add one more Input tag iframe

Describe the solution you'd like
iframe interesting feature by HTML, we rarely used it.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Screenshot of feature Iframe
image

add drag and drop feature

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Page Refresher

I will like to add a web-page refresher trick using HTML5 meta tags. Kindly assign this issue to me.

on clicking it should come at centre

whenever i click on any options in the image then the next image should come at the centre
thus the screen will be occupied fully and will not look blank like this

Capture 12
kindly assign me this under hactoberfest

i just want to add some features to your website and that will be : if we click on this buttom then the color will be changed.

Screenshot (9)
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[Feature] Adding <abbr> tags that show the description of an abbreviation

Is your feature request related to a problem? Please describe.
It's pretty hard to find the description of an abbreviation while reading a webpage but HTML has a tag that shows the description of an abbreviation when the mouse hovers above it.

Describe the solution you'd like
When we hover the mouse above an abbreviation we get a tiny pop-up that shows the description.

Additional context
I would like to work on this feature for this repo and would like to do my first pull request, So please assign this to me.

Add tabIndex feature in the app

Is your feature request related to a problem? Please describe.
Add TabIndex in html form

Describe the solution you'd like
Add TabIndex in html form

Describe alternatives you've considered
Add TabIndex in html form or access DOM from js which can be unnecessary lengthy

Additional context
Add TabIndex in html form

Bug: when we remove value from input NaN comes in Output Tag

Hello Tapas Adhikary,

I am not sure this is a valid bug or not. Please review the description.

Steps to reproduce.

  1. On page load remove 0 from any of Input tag.
  2. Equal sign gives NaN, please find the attachment

When we remove any of value from Input NaN will come in Output tag
image

If its valid bug then please assign me.

File Input

I would like to add an HTML file that will demonstrate the file interaction in HTML using file input.

Request for adding code snippets with examples on netlify app

I would like to implement the code to not just display the output but also the specific line(s) from the code that implement the functionality.

For example:
current implementation for required input:
image

suggested implementation:
image

This will give the readers more clarity on what is the real thing that is making the difference from the app itself without the need to refer to the source code multiple times.

Additionally, I would like to do the same under Hactoberfest'22 if possible.

Adding a Checkbox feature

Is your feature request related to a problem? Please describe.
I just want to extend the functionality of this form. Can you assign it to me and mark it as Hacktoberfest 2022?

Describe the solution you'd like
I wish to add a checkbox feature which would contain three(3) Programming language options

Describe alternatives you've considered
I considered a button option which is also a common input type.

Additional context
Add any other context or screenshots about the feature request here.
without checkbox
Original - Without Checkbox
with checkbox
Updated - With Checkbox

Addition of feature in Datalist

I was thinking of adding a feature, which will display the selected the option form drop down menu.
Presently, fruits can be selected from the dropdown datalist.
I will add images to it, and based on response from user, it'll display that respective fruit.

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.