by Sai gowtham

How to use Notepad in Browser with 1 line of Code

In this tutorial, we are going to learn about creating and using the browser as a notepad.

Creating the NotePad

  1. Open a new tab in your browser.
  2. Enter the below code and hit enter.
data:text/html,<body contenteditable>

This code will create a body element with its content is editable.

Now we can write our notes inside this tab.

creating-notepad

Adding Colors to our Notepad

Let’s add the colors to our notepad by using inline-css.

Now Open a new tab and enter the below code.

data:text/html,<body contenteditable style="background:black;color:gold;font-size:20px;">

This code will add a background color black, color: gold and font-size: 20px to body element.

adding to colors notepad

Adding a title to our Notepad

data:text/html,<title>Browser Notepad</title>
<body contenteditable style="background:black;color:gold;font-size:20px;">

adding title

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course