Create A Basic Website Using Html And Css (Very Basic Code)
Introduction:
Hello coders, a very warm welcome to code with random. Today we shall see the building of the simple website. A website is a tool that helps a person to grow his/her business digitally so that people across the globe at least visit and checkout. For creating a website at the basic level we have to use html for the attributes and css for styling. Let us see the building of this simple website.
Html code:-
Html stands for hypertext markup language.Html is used for creating the layout of the website. Here we are using the basic concepts of html like div, span, and anchor tag. Here we are integrating the other pages in the href attribute of the anchor tag. For that, you need to create different html files having the same name.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
media="only screen and (max-width: 1922px)"
type="text/css"
href="responsiver.css"
/>
</head>
<body>
<div class="header"><h1>Phenomenal</h1></div>
<div style="overflow: auto">
<div class="menu">
<a href="home.html"><div class="menuitem">Home</div></a>
<a href="Profile.html"><div class="menuitem">Profile</div></a>
<a href="About.html"><div class="menuitem">About</div></a>
<a href="Contact.html"><div class="menuitem">Contact</div></a>
</div>
<div class="main"><h1 align="center">Welcome to Mumbai</h1></div>
<div class="right">
<h2>Watch More</h2>
<p>Visit here</p>
<a href="https://www.youtube.com" target="blank"
><span>Hit Me Up</span></a
>
</div>
</div>
<div class="footer">© Copyright Phenomenal</div>
</body>
</html>
In this html code, we have defined the header. Created a menu and linked an html file. Gave some labels in the center with the help of <div>. And defined a footer that is there on every website to show the user that the copyrights are secured themselves. Let us see the html output. Before writing css for a simple website.
100+ Front-end Projects for Web developers (Source Code)
Html output:
Css code:-
Css is used for styling any layout/html of the webpage. For styling instead of plain/pure css, you can use css frameworks like sass,scss, bootstrap, or tailwind which makes it more convenient to style rather than choosing plain css for styling. Here we are using some basic concepts of css like border-box,flex-box,css id selectors and class selectors, etc.
We are also using the media query
What is a media query?
Media query is a css technique introduced in css3.
It uses the @media rule to include a block of css properties only if a certain condition is true.
* {
box-sizing: border-box;
}
body {
background-color: red;
font-family: Arial;
color: orange;
}
.header {
background-color: black;
text-align: center;
color: orange;
-webkit-text-stroke: 1px black;
box-shadow: 2px 2px 4px black;
border-style: solid;
border-width: 2px;
border-color: black;
}
.menu {
float: left;
width: 20%;
text-align: center;
}
.menu a {
text-decoration: none;
}
.header img {
float: left;
}
.menuitem {
background-color: #d5ffa5;
margin-top: 7px;
padding: 8px;
border-style: solid;
border-width: 2px;
border-color: black;
box-shadow: 2px 2px 4px black;
text-decoration: none;
color: black;
}
.menuitem:hover {
background-color: lightgreen;
font-weight: bold;
}
In this snippet of code, we have styled the heading color for the menu. Add a hover over the menu button for an effect for the button. Padding the menu bar and right class so that every set is in a systematic order and nothing gets mess.
.main {
float: left;
width: 60%;
padding:0 20px;
margin-top: 7px;
margin-left: 5%;
}
.right {
background-color: #d5ffa5;
float: left;
width: 15%;
padding: 15px;
margin-top: 7px;
text-align: center;
border-style: solid;
border-width: 2px;
border-color: black;
box-shadow: 2px 2px 4px black;
}
.footer {
background-color: #d5ffa5;
text-align:center;
padding: 1px;
border-style: solid;
border-width: 2px;
border-color: black;
box-shadow: 2px 2px 4px black;
position:fixed;
bottom:0;
left:0;
}
.main img {
display: block;
box-shadow: 2px 2px 4px black;
border-style: solid;
border-width: 2px;
border-color: black;
}
@media only screen and (max-width:620px) {
/* For mobile phones: */
.menu, .main, .right {
width:100%;
}
}
In this final snippet, we styled the footer by adding text color and right-side content to look attractive. Let us look at the output.
Dark/light Mode Sidebar Menu Using Html, Css And, Javascript
Final Output:
Summary:
We have created a simple website using html & css. In html, we used the necessary elements which were required and then we styled them in the css. If you loved it do comment as it boosts our motivation to bring new projects for you guys. If you face any difficulty while performing you can reach out to us with the help of the comment section.
Happy coding
Written by @harsh_9 & Himanshu Singh
