Tag: CSS

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.

VS Code HTML/CSS Code Example

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>&copy; 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.

Setup VS Code for HTML

To set up Visual Studio Code for HTML development, you can follow these steps:

  1. Download and install Visual Studio Code if you haven’t already done so. You can download it from the official website at https://code.visualstudio.com/.
  2. Open Visual Studio Code and create a new HTML file by selecting File > New File or by using the keyboard shortcut “Ctrl+N” (Windows) or “Cmd+N” (Mac). Then, save the file with a .html extension.
  3. Install the HTML extension for Visual Studio Code. Open the Extensions sidebar by clicking on the Extensions icon in the sidebar or by using the keyboard shortcut “Ctrl+Shift+X” (Windows) or “Cmd+Shift+X” (Mac). Search for “HTML” in the search bar and choose the HTML extension developed by Microsoft. Click on the “Install” button to install the extension.
  4. Start editing your HTML file. Visual Studio Code provides syntax highlighting, autocompletion, and many other helpful features to make HTML coding easier and faster.
  5. Use the Live Server extension to preview your HTML pages. The Live Server extension allows you to see the output of your HTML pages in real-time as you make changes to your code. To install Live Server, open the Extensions sidebar, search for “Live Server” in the search bar, and choose the Live Server extension developed by Ritwick Dey. Click on the “Install” button to install the extension. Then, right-click on your HTML file and select “Open with Live Server” to start a local server and view your HTML page in a web browser.
  6. You can also use other extensions like Emmet, Beautify, and Bracket Pair Colorizer to help you write cleaner and more organized HTML code.

These are the basic steps to set up Visual Studio Code for HTML development. As you become more familiar with the editor and its features, you can customize it to suit your needs and preferences.