In today’s digital age, having a stunning and responsive website is crucial for businesses and individuals alike. Whether you’re showcasing your portfolio, promoting your products, or sharing your thoughts through a blog, a well-designed website can leave a lasting impression on visitors. In this article, we’ll explore the key steps to create a beautiful and responsive website using HTML and CSS.
1. Plan Your Website
Before diving into code, it’s essential to plan your website’s structure, layout, and content. Consider your target audience, the purpose of your website, and the overall look and feel you want to achieve. Sketch out a rough design or wireframe to visualize the layout and arrangement of elements.
2. HTML: The Structure
HTML (Hypertext Markup Language) is the backbone of your website. It defines the structure and content of web pages. Start by creating an HTML document and structuring your content using HTML elements like headings, paragraphs, lists, and links. Ensure that your HTML is semantically structured, making it accessible and SEO-friendly.
HTML code :
<!DOCTYPE html>
<!-- Coding By Codingdung - www.codingdung.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Website Homepage HTML and CSS | CodingDung</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<nav class="navbar">
<h2 class="logo"><a href="#">CodingDung</a></h2>
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" id="hamburger-btn">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M3 12h18M3 6h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</label>
<ul class="links">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div class="buttons">
<a href="#" class="signin">Sign In</a>
<a href="#" class="signup">Sign Up</a>
</div>
</nav>
</header>
<section class="hero-section">
<div class="hero">
<h2>Mobile App Development</h2>
<p>
Join us in the exciting world of programming and turn your ideas into
reality. Unlock the world of endless possibilities - learn to code and
shape the digital future with us.
</p>
<div class="buttons">
<a href="#" class="join">Join Now</a>
<a href="#" class="learn">Learn More</a>
</div>
</div>
<div class="img">
<img src="img/moden2.png" alt="hero image" />
</div>
</section>
</body>
</html>3. CSS: The Style
CSS (Cascading Style Sheets) is used to style your website, making it visually appealing. Create a separate CSS file and link it to your HTML document. Define styles for elements, layout, colors, fonts, and more. Make use of CSS frameworks like Bootstrap or Flexbox for responsive design.
Style Css :
/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
* {
margin : 0;
padding : 0;
box-sizing : border-box;
font-family: "Open Sans", sans-serif;
}
body {
height : 100vh;
width : 100%;
background: linear-gradient(to bottom, #175d69 23%, #0d373f 95%);
}
.header {
position: fixed;
top : 0;
left : 0;
width : 100%;
}
.navbar {
display : flex;
align-items : center;
justify-content: space-between;
max-width : 1200px;
margin : 0 auto;
padding : 20px 15px;
}
.navbar .logo a {
font-size : 1.8rem;
text-decoration: none;
color : #fff;
}
.navbar .links {
display : flex;
align-items: center;
list-style : none;
gap : 35px;
}
.navbar .links a {
font-weight : 500;
text-decoration: none;
color : #fff;
padding : 10px 0;
transition : 0.2s ease;
}
.navbar .links a:hover {
color: #47b2e4;
}
.navbar .buttons a {
text-decoration: none;
color : #fff;
font-size : 1rem;
padding : 15px 0;
transition : 0.2s ease;
}
.navbar .buttons a:not(:last-child) {
margin-right: 30px;
}
.navbar .buttons .signin:hover {
color: #47b2e4;
}
.navbar .buttons .signup {
border : 1px solid #fff;
padding : 10px 20px;
border-radius: 0.375rem;
text-align : center;
transition : 0.2s ease;
}
.navbar .buttons .signup:hover {
background-color: #47b2e4;
color : #fff;
}
.hero-section {
display : flex;
justify-content: space-evenly;
align-items : center;
height : 95vh;
padding : 0 15px;
max-width : 1200px;
margin : 0 auto;
}
.hero-section .hero {
max-width: 50%;
color : #fff;
}
.hero h2 {
font-size : 2.5rem;
margin-bottom: 20px;
}
.hero p {
font-size : 1.2rem;
margin-bottom: 20px;
color : #c9c7c7;
}
.hero-section .img img {
width: 517px;
}
.hero-section .buttons {
margin-top: 40px;
}
.hero-section .buttons a {
text-decoration: none;
color : #fff;
padding : 12px 24px;
border-radius : 0.375rem;
font-weight : 600;
transition : 0.2s ease;
display : inline-block;
}
.hero-section .buttons a:not(:last-child) {
margin-right: 15px;
}
.buttons .join {
background-color: #47b2e4;
}
.hero-section .buttons .learn {
border : 1px solid #fff;
border-radius: 0.375rem;
}
.hero-section .buttons a:hover {
background-color: #47b2e4;
}
/* Hamburger menu styles */
#menu-toggle {
display: none;
}
#hamburger-btn {
font-size: 1.8rem;
color : #fff;
cursor : pointer;
display : none;
order : 1;
}
@media screen and (max-width: 1023px) {
.navbar .logo a {
font-size: 1.5rem;
}
.links {
position : fixed;
left : -100%;
top : 75px;
width : 100%;
height : 100vh;
padding-top : 50px;
background : #175d69;
flex-direction: column;
transition : 0.3s ease;
}
.navbar #menu-toggle:checked~.links {
left: 0;
}
.navbar #hamburger-btn {
display: block;
}
.header .buttons {
display: none;
}
.hero-section .hero {
max-width : 100%;
text-align: center;
}
.hero-section img {
display: none;
}
}4. Responsive Design
With the growing use of mobile devices, ensuring your website is responsive is crucial. Use CSS media queries to adjust your website’s layout and design for various screen sizes. Test your website on different devices and browsers to ensure compatibility.
Reponsive :
@media screen and (max-width: 1023px) {
.navbar .logo a {
font-size: 1.5rem;
}
.links {
position : fixed;
left : -100%;
top : 75px;
width : 100%;
height : 100vh;
padding-top : 50px;
background : #175d69;
flex-direction: column;
transition : 0.3s ease;
}
.navbar #menu-toggle:checked~.links {
left: 0;
}
.navbar #hamburger-btn {
display: block;
}
.header .buttons {
display: none;
}
.hero-section .hero {
max-width : 100%;
text-align: center;
}
.hero-section img {
display: none;
}
}5. Test and Optimize
Regularly test your website to check for any layout or functionality issues. Optimize your images and code for faster loading times, as slow websites can deter visitors.
6. Launch Your Website
Once you’re satisfied with your website’s design and functionality, it’s time to launch it. Choose a reliable web hosting provider and upload your HTML and CSS files to make your website accessible to the world.
Creating a beautiful and responsive website in HTML and CSS may take some time and effort, but the results are worth it. Your website will be a reflection of your brand and a valuable platform to connect with your audience. Keep updating and improving your website to stay relevant and engaging in the digital landscape. Happy coding!
Free download code here:
