Creating a simple website using HTML and CSS is an excellent way to begin your web development journey. This comprehensive guide provides everything you need to build a sleek, functional website that will impress visitors and enhance your coding skills. Whether you are a novice or an experienced coder looking to refresh your knowledge, this step-by-step tutorial is perfect for you.
Why Choose HTML and CSS?
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are undeniably the fundamental building blocks of modern web development. HTML plays a crucial role by organizing and structuring content, such as text, images, and links, to create a well-organized webpage. On the other hand, CSS is essential for enhancing the website’s appearance by managing aspects like colors, layouts, and fonts. When used together, HTML and CSS complement each other perfectly, forming the backbone of web development. Consequently, they are indispensable skills for anyone looking to design websites.
By mastering these two languages, you gain the vital tools to not only craft visually stunning websites but also ensure they are well-structured and user-friendly. Additionally, learning HTML and CSS lays a solid foundation for further advancing your web development skills. As a result, it opens the door to mastering more complex frameworks and technologies that allow you to build dynamic and interactive web applications. Ultimately, gaining proficiency in HTML and CSS provides the essential knowledge to move confidently into the world of professional web development.
Key Benefits:
- Simplicity: HTML and CSS are easy to learn, especially for beginners.
- Flexibility: They allow for extensive customization and creativity.
- Compatibility: These languages are universally supported by web browsers.
Make A Simple Website using HTML and CSS | Video Tutorial
Setting Up Your Project
Before diving into the code, ensure you have a suitable text editor. The Popular Editor you can use are Sublime Text, Atom, and Visual Studio Code. These editors provide useful features such as syntax highlighting and auto-completion, making the coding process smoother.
Create Your Project Directory
Begin by creating a new directory (folder) for your project. Now, inside this folder, you have to create two files: index.html and style.css.
The index.html file will contain the structure of your website, while the style.css file will handle the styling.
You Might Like This:
Writing the HTML
In the index.html file, start by writing the basic HTML structure. This includes the DOCTYPE declaration, html tag, head section, title, and body section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="style.css">
<title>Website Design</title>
</head>
<body>
<nav>
<div class="logo">
<img src="logo.png" alt="">
</div>
<div class="links">
<a href="">About</a>
<a href="">Categories</a>
<a href="">Course</a>
<a href="">Blog</a>
</div>
<button>Get Started</button>
</nav>
<section>
<div class="content">
<h1 data-aos="fade-right" data-aos-duration="1500">Find the right instructor for you</h1>
<p data-aos="flip-down" data-aos-duration="1500" data-aos-delay="200">Various topics, skill levels or languages. Join Millions of Learners Around the World Who Have Benn Studying at SinauWOY!</p>
<div class="email" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="400">
<input type="email" placeholder="Enter you E-mail address">
<button>Sign In</button>
</div>
<div class="values">
<div class="value" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="600">
<h2>80K+</h2>
<p>APPRECIATIONS</p>
</div>
<div class="value" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="750">
<h2>5.5K+</h2>
<p>COURSES</p>
</div>
<div class="value" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="900">
<h2>100</h2>
<p>COUNTRIES</p>
</div>
</div>
</div>
<div class="image" data-aos="zoom-in" data-aos-duration="2000">
<img src="main.png" alt="">
</div>
</section>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>Styling with CSS
Next, we’ll style our simple website using CSS to make it visually appealing. Open the style.css file and start writing your CSS rules.
*{
padding: 0;
margin: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
background-image: url(background.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
nav{
width: 100%;
height: 10vh;
display: flex;
justify-content: space-evenly;
align-items: center;
backdrop-filter: brightness(94%);
}
nav .logo img{
width: 150px;
}
nav .links a{
color: blue;
margin: 0 20px;
font-weight: 550;
text-decoration: none;
font-size: 1.2rem;
transition: 0.2s linear;
}
nav .links a:hover{
color: #2aa3a5;
}
nav button{
width: 160px;
height: 6vh;
border-radius: 7px;
outline: none;
border: 1px solid #5fa6a9;
background-color: transparent;
color: #5fa6a9;
font-size: 1.25rem;
font-weight: 600;
box-shadow: 1px 1px 5px 2px #5fa6a9;
transition: 0.2s linear;
}
nav button:hover{
background-color: #5fa6a9;
color: white;
box-shadow: 0 0 10px 5px #5fa6a9;
scale: 1.05;
}
section{
width: 100%;
height: 90vh;
display: flex;
justify-content: space-around;
align-items: center;
backdrop-filter: brightness(94%);
}
section .image img{
width: 550px;
}
section .content{
width: 35%;
}
.content h1{
color: rgb(11,11,98);
font-size: 4rem;
}
.content p{
margin: 20px 0;
}
.content .email{
width: 85%;
padding: 0 3%;
height: 8vh;
margin-top: 40px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 10px;
}
.email input{
width: 70%;
height: 100%;
font-size: 1.6rem;
border: none;
outline: none;
}
::placeholder{
font-size: 1.2rem;
font-weight: 100;
color: gray;
}
.email button{
width: 25%;
height: 70%;
border-radius: 10px;
outline: none;
border: none;
color: white;
font-size: 1.1rem;
font-weight: 600;
background-color: #5fa6a9;
transition: 0.3s linear;
}
.email button:hover{
background-color: transparent;
color: #5fa6a9;
box-shadow: 1px 1px 5px 2px #5fa6a9;
}
.content .values{
width: 80%;
height: 10vh;
margin-top: 40px;
display: flex;
justify-content: space-around;
align-items: center;
}
.values .value{
width: 30%;
height: 100%;
text-align: center;
margin: 0 5%;
color: #5fa6a9;
}
.value h2{
font-size: 2.3rem;
color: #419a8d;
}
.value p{
margin-top: 3px;
}
Conclusion
By following this guide, you can create a simple website using HTML and CSS that is both attractive and functional. Whether you are showcasing a personal portfolio or starting a new project, mastering these foundational technologies is a crucial step in your web development journey.
So, dive in, experiment, and watch your skills grow as you build your own simple website using HTML and CSS. Happy coding!
Asking questions are in fact nice thing if you are not understanding anything
fully, however this post presents pleasant understanding even.
Nice weblog here! Also your website rather a lot up very fast!
What host are you the usage of? Can I am getting your associate hyperlink to your host?
I desire my website loaded up as quickly as yours lol