Welcome to my website Uptodate Academy. In this website I teach tutorials and share source code on some programming (HTML, CSS & JavaScript) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "How to Build a Website Using HTML and CSS | Step by Step Tutorial", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Go to FontAwesome and embed their cdnjs library link to your main file
- Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="/font-awesome.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create A Complete Website</title>
</head>
<body>
<section>
<nav>
<div class="logo">
<span>U</span>
<span>Academy</span>
</div>
<div class="nav-anchor">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="nav-search">
<input type="search" placeholder="Type to Search">
<button>Search</button>
</div>
</nav>
</section>
<section>
<div class="website-body">
<div class="body1">
<span>my first</span>
<span>website design &</span>
<span>development course</span>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil illo neque a facilis maxime voluptas non voluptatibus sapiente dignissimos quo numquam vero ipsam distinctio quas velit, odit eligendi rerum aperiam?</p>
<button>join us</button>
</div>
<div class="body2">
<form>
<span>Login Here</span>
<input type="email" placeholder="Enter Email Here" required>
<input type="password" placeholder="Enter Password Here" required>
<input type="submit" value="Login">
<div class="sub">
<span>Don't havae an account?</span>
<a href="">Sign up</a>
</div>
<div class="sub2">
<span>Login in with</span>
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
</form>
</div>
</div>
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--text-color: rgba(255,255,255,0.95);
--web-color: #BDB5D5;
}
body {
position: relative;
min-height: 100dvh;
width: 100%;
background-image: url(background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
nav {
width: 90%;
margin: 0 auto;
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
& .logo {
font-size: 1.9em;
font-weight: 700;
font-family: sans-serif;
& span {
color: var(--web-color);
&:nth-child(2) {
position: relative;
left: -5px;
color: var(--text-color);
}
}
}
& .nav-anchor ul {
list-style: none;
& li {
display: inline;
padding: 10px 15px;
margin: 0 15px;
& a {
position: relative;
color: var(--text-color);
text-decoration: none;
text-transform: uppercase;
font-family: Open Sans, sans-serif;
font-weight: 550;
&::before {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 3px;
background: var(--web-color);
border-radius: 50px;
transform: scale(0);
transition: 0.5s;
}
&:hover::before {
transform: scale(1);
}
}
}
}
& .nav-search {
display: flex;
align-items: center;
& input {
background: transparent;
border: 2px solid var(--web-color);
outline: none;
font-size: 1em;
color: var(--text-color);
padding: 8px 15px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
&::placeholder {
color: var(--text-color);
}
}
& button {
padding: 10px 15px;
color: #000;
background: var(--web-color);
border: none;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
cursor: pointer;
font-weight: 550;
}
}
}
.website-body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-45%);
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
& .body1 {
& span {
display: block;
font-size: 3.4em;
font-weight: 700;
font-family: system-ui;
/* font-family: serif; */
text-transform: capitalize;
color: var(--text-color);
line-height: 1.3;
&:nth-child(2) {
color: var(--web-color);
}
}
& p {
color: var(--text-color);
line-height: 1.5;
font-size: 1em;
max-width: 650px;
}
& button {
padding: 10px 20px;
text-transform: uppercase;
background: var(--web-color);
font-weight: 550;
border: none;
margin-top: 10px;
border-radius: 3px;
cursor: pointer;
}
}
.body2 form {
background: #111;
width: 350px;
padding: 10px 25px;
& > span {
display: block;
text-align: center;
color: #111;
background: var(--text-color);
padding: 10px 0;
font-family: Open Sans, sans-serif;
font-weight: 550;
border-radius: 5px;
margin: 20px 0;
}
& > input {
display: block;
width: 100%;
margin-bottom: 30px;
padding: 10px 0;
border: none;
outline: none;
color: var(--text-color);
font-size: 1em;
border-bottom: 1px solid var(--text-color);
background: transparent;
&::placeholder {
color: var(--text-color);
}
}
& > input[type="submit"] {
background: var(--web-color);
font-weight: 550;
font-size: 1em;
border-radius: 5px;
cursor: pointer;
border-bottom: none;
}
& .sub {
display: flex;
justify-content: space-between;
color: var(--text-color);
& a {
color: var(--web-color);
text-decoration: none;
}
}
& .sub2 {
text-align: center;
margin-top: 30px;
& span {
color: var(--text-color);
display: block;
margin-bottom: 20px;
font-weight: 550;
font-family: Arial;
}
& ul {
list-style: none;
& li {
display: inline;
margin: 0 10px;
& a {
color: var(--text-color);
transition: 0.5s;
font-size: 1.5em;
&:hover {
color: var(--web-color);
}
}
}
}
}
}
}
0 Comments
We are happy to hear from you.