How to make a website using notepad

byCodingFlicks -September 23, 2020

0

Among all the other apps on Windows computers, Notepad is one of the simplest yet most effective apps that we use to write down important things. This app or text editor is very lightweight and can be run using minimal system resources. If beginners who have started learning web design are looking for a simple text editor, then I would tell them to use this Notepad text editor. Because It strips away distractions. It will let you focus purely on writing clean HTML, CSS, or JavaScript code. Today we have created a simple web layout using Notepad, the code of which we are going to share with you. You will understand better by watching the video tutorial below.

Video Tutorial:

We hope you enjoyed the tutorial on creating a web design layout above. Notepad text editor offers a clean slate. This clean slate helps learners understand the main structure and syntax of code without interference. To learn web design, you first need to learn to type code manually. Notepad is a powerful tool for teaching discipline, clarity, and attention to detail at the beginning of your web design journey. Today we created a simple website layout using Notepad that has a header with a logo, a homepage with menu items. Then there is a homepage with banner text, a body area, and a simple footer.

You May Also Like:

How to make a responsive website using Notepad[ Source Code ]:

To create the HTML CSS web layout snippet, we have to create an HTML file. We have used internal CSS in this snippet, so you don't need to create a separate CSS file for it. Now, copy the code from the code box below and paste it into your file. After saving the code, open it in your browser and see if there are any problems. If the problem persists, you can download the code from the download button below the blog post.

Source Code:

  <!DOCTYPE html>
<!-- codingflicks.com -->
<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;
}
nav ul li a:hover {
    color: deepskyblue;
}
.banner {
	height: 100%;
    position: relative;
    height: 100vh;
    background-image: url(1.jpg);
    background-size: cover;
    background-position: center center;
}
.banner h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	text-align: center;
	font-size: 50px;
	text-transform: uppercase;
	color: #fff;
	font-family: montserrat;
}
.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 {
		float: none;
	}
    nav ul li a {
        margin: 0 2px;
        line-height: 44px;
        font-size: 10px;
    }
    .banner h2 {
        font-size: 25px;
    }
}    
</style>
	
</head>

<body>

    <header>
		<div class="logo">NEDUZONE</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">		
        <h2>website design</h2>
	</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><!-- lorem90 -->
        
		<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>

Notepad can be considered a simple yet powerful companion for beginners to learn web design because it focuses on the fundamentals of code and builds a foundation for solid coding habits. It would be better to code by watching a video tutorial than downloading today's snippet. Because today's snippet is mainly for beginners and coding by hand is better for them. For more, visit our homepage and click on the Load More button. Thank you for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.