How to make a website using Notepad

In this blog, I share a simple snippet based on How to make a website using notepad. This snippet is for the absolute beginners trying to make a website on their own using HTML and CSS. Do you know that instead of using other IDE like brackets, sublime text, visual studio code, you can make a website using a simple notepad app that you have on your computer? 


In this program, I have made one of the websites where you have to copy and paste the code below and save and drag the index file to an empty browser and release there and see what happens. I have tried to make the website responsive so that it fits in the smaller devices. Before going further, I will suggest you follow the below tutorial from start to finish to have an idea of this snippet's necessary coding.



I hope you have watched the entire video. Let's starts with the HTML markup. First, I have taken a header tag with a div name 'logo' and a nav element inside it. In the nav element, I have taken five nav elements. After that, I took a 'banner' div element and put an image inside that. This image is for the banner image of the website. After the banner image, I have taken another div element named 'content' and add some random text to it. In the end, I have added a footer tag and wrote a random copyright text in it. That is all for the HTML markup.

You May Also like:

Let's move to the CSS code. First of all, I eliminate the default margin padding of the document. For that, I gave a margin padding of 0 to the universal selector. Then I gave a height, background, and padding to the header element. I applied some basic CSS techniques so that the logo remains in the top-left and nav items go to the top-right side of the project. After that, I gave the banner class a 100% height and the image width and height of 100% and 90vh, respectively. I gave the 'content' div padding of 5% and later styled the content inside that div. In the end, I gave the footer a black background with a custom padding to it. Although it is not shown in the video, you have just seen I applied some extra CSS to the project to make it responsive. I have changed some elements of some elements using CSS media queries to look responsive in small devices.

Simple website using notepad (Source Code):

to make this snippet, you have created a notepad file named 'index.html.' you don't need to create a separate CSS file as we are using internal CSS here. Please copy the entire code below and paste it to the index file you made. Then in the notepad, go to file and click the save from there.
Now drag and drop the file to an empty browser and see how it looks.

ADD HTML




I hope you liked this simple yet exciting project. Please follow my social media profiles and subscribe to the 'divinector' youtube channel for more like this. Thanks for vising the blog, and keep visiting.

5 Comments

Please Do not Enter any spam link in the comment box

  1. hi! nice tutorial, does really work great yet simple. i copied your code and decided to change the things such as text to my liking. i changed the title and body text and they did work. but the logo div tag text doesn't show after it is changed. can you tell me what might be wrong?

    ReplyDelete
  2. bro how to change the img i cant understand that code

    ReplyDelete
  3. great website. I'll make my own website soon.

    ReplyDelete

Post a Comment

Please Do not Enter any spam link in the comment box