HTML For Beginners: Cool Stuff You Can Do With HTML Only

Hey there web developer. Hope you doing good. In this short article we will take a look at a few cool things that you can actually achieve with HTML only. I'll try to keep this article short and brief. Lets jump right into it!

1. Creating an Accordion with HTML only.

Yap! This is possible. An accordion is mostly used in FAQ section of a website. Let's take a look at simple code snippet we can use to create this:

<details>
  <summary>I am an accordion</summary>
  <p>I am the accordion body. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis fugiat quia provident cum laudantium nobis minus magni a ex officia! Ab ex nemo tenetur nihil?</p>
</details>

2. Progress Bar with HTML only.

This is mostly used by developers in their portfolios to show their their level of expertise in a certain field as a percentage. Below is a code snippet for achieving this:

<label for="progressBar">Web Dev: </label>
<progress id="progressBar" value="95" max="100"></progress><span> 95% </span>

3. Autocomplete with HTML only.

Autocomplete is a feature in which an application predicts the rest of a word a user is typing. Let's see how we can achieve this. As you type in the provided input field, you will see a list of the options defined in the datalist.

<input list="programmingLanguages">
<datalist id="programmingLanguages">
  <option value="JavaScript">
  <option value="Python">
  <option value="PHP">
</datalist>

4. Color Picker with HTML only.

This is self explanatory. It is used to pick a color 😂. After picking a color, it gives you the option of picking a colors rgb, hex or hsl value. To set a default color that is not black you just need to specify the value attribute. Let's see how we can achieve this:

<label for="colorPicker">Select a color: </label>
<input type="color" id="colorPicker" name="colorPicker" value="#ff0000">

5. Simple Calculator with HTML only.

This has some JavaScript but its pretty basic and beginner friendly. And of course I wanted to include it in this list 😁. All the JavaScript in this code snippet does is just convert the value entered by the user from a string to an integer Let's take a look at how we can do it:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
      <input type="number" id="b" name="b" value="10" /> +
      <input type="number" id="a" name="a" value="10" /> =
      <output name="result" for="a b">20</output>
 </form>

Conclusion

And that is all for this article my friends. Hope you enjoyed it and learn a few things. See you in the next one. Peact out!✌️