Here’s an example of an HTML and CSS code snippet that you can try in Visual Studio Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to my webpage!</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>About me</h2>
<p>Hi, my name is John and I'm a web developer.</p>
<img src="profile.jpg" alt="My profile picture">
</main>
<footer>
<p>© 2023 John Doe</p>
</footer>
</body>
</html>
And here’s the corresponding CSS code in a separate styles.css file:
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
h1, h2 {
margin: 0;
}
img {
display: block;
margin: 20px auto;
max-width: 100%;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
This code creates a simple webpage with a header, navigation bar, main content area, and footer, and applies some basic styling using CSS. You can try modifying this code or adding new elements to create your own webpage in Visual Studio Code.