Whats wrong with my code? Following a toturial

HTML-CSS
1

I’m following a toturial on youtube. I copied the code but my red nav bar isn’t showing up. Why is this? Here is an image and link to the toturial.

[Album] Imgur

https://www.youtube.com/watch?v=OqIzBuov1VY 5:19

My code:

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<title>Website</title>
</head>
<body>
<header class="bg-image"
	<div class="header">
		<div class="sub-header">
			<ul class="left-menu">
				<li><a href="#">Events</a></li>
				<li><a href="#">CONTACT US</a></li>
				<li><a href="#">ABOUT US</a></li>
			</ul>
			<div class="logo">
				<a href="#">Webscribe</a>
			</div>
				<ul class="right-menu">
				<li><a href="#">HOME</a></li>
				<li><a href="#">GALARY</a></li>
				<li><a href="#">NEWS</a></li>
			</ul>
		</div>
	</div>
</header>
<p class="para">
Lorem upsum doro Lorem upsum doro Lorem upsum doro Lorem upsum doro Lorem upsum doro Lorem upsum doro Lorem upsum doro Lorem upsum doro Lorem upsum doro Lorem upsum doro Lorem upsum doro Lorem upsum doro Lorem upsum doro Lorem upsum doro 
</p>
</body>

</html>


* {
	margin:0;
	padding 0:
	padding: 0;
}
.bg-image {
	background: url('leaves-pattern.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
}
.header {
	position: fixed;
	width: 100%;
	height: 70px;
	background: red;
	
}
.sub-header {
	position: relative;
	width: 1200px;
	height: 70px;
	background: green;
	margin: 0 auto;
	}
	.sub-header .left-menu {
		float: left;
	}
	.sub-header .logo a{'
	position: absolute;
	font-size: 30px;
	left: 50%;
	transform: translateX(-50%);
	text-decoration: none;
	color: white;
	top:15px;
	}
2

It loos like you’ll just need to close this header element with a >

It should look like this:

<header class="bg-image">
3 
* { 
  margin:0; 
  padding 0: 
  padding: 0; 
}

Grammar mistakes. No colon before the padding and a colon (instead of a semicolon) after the second 0. And why two paddings?

And of course the extraneous single quote towards the end.

4

Things like linters and validators are great at catching stupid mistakes. If you aren’t ready to install one that checks while you type, then you can use them online, like here and here.

5

Hi Kevin, Do you have any suggestion for an embedded html validator ?

6

Not specifically. I’m mainly doing React Native now so there’s no need. I’d take a look at what is available for your editor and try some out.

7

Thank Kevin for the answer. I am in the middle of the Responsive Web Design Certification. I have decided to go all in and give this HTML editor a try: https://www.coffeecup.com/free-editor/ I remember trying it almost 20 years ago! I have decided to rewrite all the code of each lesson in an HTML editor. I will absorb the lesson better if I type all the code and not just what is needed to answer.

8

I might consider a more generalized editor, like Atom or VSC. They will handle all of your coding needs and come with lots of plugins for just about any language.

1 Like
9

Thanks for the replies. Now I shall continue teh toturial.

10

Thanks Kevin, I have downloaded and playing around with VSC. There is a way to have a live preview of the code I type: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer I will play with this.

11

Yeah, VSC is a good one. It is the most common editor used by coders, and it’s free. I used Atom for a long time, but switched to VSC at the new job because most people are using that and it has some nice features. The others I see a lot of are Sublime and Web Storm. But VSC is a great place to start.