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

<!DOCTYPE html>
<html>
<head>
	<title>How to make a website using notepad</title>
	<style>
	*{
	margin:0;
	padding:0;
	}
	header{
	height:60px;
	background:#262626;
	padding:0 50px;
	}
	.logo{
	width:30%;
	float:left;
	color:#fff;
	font-weight:bold;
	text-transform:uppercase;
	line-height:60px;
	font-size:35px;
	font-family:sans-serif;
	}
	nav{
	width:68%;
	float:right;
	}
	nav ul{
	list-style:none;
	float:right;
	}
	nav ul li{
	display: inline-block;
	}
	nav ul li a{
	text-decoration: none;
	color:#fff;
	font-family:sans-serif;
	font-weight:bold;
	margin:0 10px;
	line-height:60px;
	text-transform:uppercase;
	}
	.banner{
	height:100%;
	}
	.banner img{
	width:100%;
	height:90vh;
	}
	.content{
	padding:5%;
	}
	.content p{
	font-size:18px;
	line-height:1.7;
	font-family:sans-serif;
	margin-bottom:25px;
	}
	footer{
	background:#000;
	color:#fff;
	padding:15px 50px;
	text-align:center;
	}
	   
	   
	   @media (max-width: 600px){        

	header {
	 width: 100%;
	 height: 100%;
	 padding: 0;
	 text-align: center;
	}
	.logo {
	 width: 100%;
	 float: none;
	}
	nav {
	 width: 100%;
	 float: none;
	}
	nav ul li {
	 display: block;
	}
	nav ul {
	 float: none;
	}
	   }    
	</style>
</head>
<body>
	<header>
		<div class="logo">
			Logo
		</div>
		<nav>
			<ul>
				<li>
					<a href="#">Home</a>
				</li>
				<li>
					<a href="#">About</a>
				</li>
				<li>
					<a href="#">Portfolio</a>
				</li>
				<li>
					<a href="#">Services</a>
				</li>
				<li>
					<a href="#">Contact</a>
				</li>
			</ul>
		</nav>
	</header>
	<div class="banner"><img alt="" src="https://i.postimg.cc/mg7z92hr/1.jpg"></div>
	<div class="content">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</div>
	<footer>
		<p>All Right Reserved By Your Website</p>
	</footer>
</body>
</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.

7 Comments

Please Do not Enter any spam link in the comment box

Funbuzz by ZainabDecember 22, 2020 at 9:15 PM
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?
tripJanuary 8, 2021 at 11:17 PM
bro how to change the img i cant understand that code
UnknownJune 25, 2021 at 11:12 PM
tyy
GoogleOctober 24, 2021 at 8:09 AM
great website. I'll make my own website soon.
UnknownNovember 29, 2021 at 9:47 PM
give some more like that
UnknownFebruary 26, 2022 at 12:48 PM
umm..where can i get the images and all

7 Comments

Post a Comment

About Us

Contact Form

How to make a website using Notepad

You might like

7 Comments

Post a Comment

Contact Form