HTML CSS 3 Example VS Code

Here’s an example of an HTML and CSS3 code snippet that you can try in Visual Studio Code:

<!DOCTYPE html>
<html>
<head>
	<title>My First Webpage</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
	<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">
		<div class="skills">
			<h3>My Skills</h3>
			<ul>
				<li>HTML5</li>
				<li>CSS3</li>
				<li>JavaScript</li>
				<li>Bootstrap</li>
				<li>jQuery</li>
			</ul>
		</div>
	</main>
	<footer>
		<p>&copy; 2023 John Doe</p>
	</footer>
</body>
</html>

And here’s the corresponding CSS3 code in a separate styles.css file:

body {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	background-color: #f2f2f2;
}

header {
	background-color: #333;
	color: #fff;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

nav li {
	margin-right: 20px;
}

nav a {
	color: #fff;
	text-decoration: none;
}

main {
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

h1, h2, h3 {
	margin: 0;
}

img {
	display: block;
	margin: 20px auto;
	max-width: 100%;
}

.skills {
	margin: 20px;
	flex: 1 1 30%;
}

.skills h3 {
	margin-top: 0;
}

.skills ul {
	list-style: none;
	padding: 0;
}

.skills li {
	margin-bottom: 10px;
}

footer {
	background-color: #333;
	color: #fff;
	padding: 20px;
	text-align: center;
}

@media only screen and (max-width: 768px) {
	header {
		flex-direction: column;
	}
	
	nav {
		margin-top: 20px;
	}
	
	.skills {
		flex: 1 1 100%;
	}
}

This code creates a simple webpage with a header, navigation bar, main content area, and footer, and applies some more advanced styling using CSS3. It also includes a media query to make the layout more responsive for smaller screens. You can try modifying this code or adding new elements to create your own webpage in Visual Studio Code.

Leave a Reply