Codepen out put looks complete compared to my Visual studio Code. Why?

Codepen out put looks complete compared to my Visual studio Code. Why?
0.0 0

#1

I am used to working on codepen.io and forgot the basics of formatting properly.I am now working on Visual studio code. Right now I am trying to just move everything over to the center and change my color. I noticed when I ran the code in here everything came out good. So, I am not sure what I am missing when i preview it in visual studio code.

Whenever i preview the code with visual studio code i get my image like this: imgur.com/RXDvQqG but whenever i look at my code though my code pen project it looks great. What am i missing?


#2

Looks like your CSS file isn’t linked to your HTML file in VS maybe? You have to manually set it up with link rel.


#3

hmm, i was missing that but that didn’t work either… Here is a screen shot https://i.imgur.com/T3mXkNS.png

this is my css
`*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
font-family: cursive;
text-align: center;
min-height: 100vh;
min-width: 370px;
background-color: #18181A;
background-size: 200%;
}

h1 {
padding: 20px 10px;
letter-spacing: 0.2em;
color: white;
}

form * {
background: rgba(256, 256, 256, 0.3);
color: white;
}

form.search form .btn {
padding: 10px;
border-radius: 2px;
font-size: 16px;
border: 1px solid white;

}

::placeholder {
color: white;
}

form.search {
width: 40%;
min-width: 200px;
max-width: 600px;
}

form.search:focus {
outline: 0;
color: #333;
background: white;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3),
}

form .btn {
cursor: pointer;
width: 90px;
}

.giphy {
padding: 20px 0px 15px 0;
}

.giphy img {
width: 200px;
max-width: 800px;
margin: auto;
display: block;
}

.giphy img.gif {
width: 50%;
max-width: 600px;
box-shadow: 0 0 1px 1px rgba(256,256,256,0.3);
}

footer {
padding: 5px;
font-size: 14px;
color: white;
}

footer a {
color: #333;
text-decoration: none;
}
footer a:hover {
color: white;
text-decoration: underline;
}
`


#4

Codepen imports/links your css and js automatically but you need to do that yourself when working in a text editor.

Link css like this:

<link rel="stylesheet" href="styles.css">

Where “styles.css” is the name of your css file and it’s file path.


#5

I tried that and i was missing it but i am still getting the same output.


#6

Another issue is Codepen doesn’t make you put all the required HTML tags when you start working. Check out this link.

https://www.w3schools.com/html/html5_intro.asp

You need DOCTYPE and HTML tags.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>

</html>

#7

Check your browser console, to see for any 404/missing links/file not found error messages.

Looks like a missing CSS file problem to me.


#8

ok i got this:

Failed to load resource: the server responded with a status of 404 (Not Found) styles.css
Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico
Failed to load resource: the server responded with a status of 404 (Not Found) styles.css


#9

Is the file path correct when you import it?

i.e. if the css file is in a different folder you’d have to adjust the path accordingly.


#10

my main.css is saved in the same path as my html.
Do i need to place a direct file path E:\Documents\M.App\Html\main.css for CSS?


#11

No, but if it’s called main.css then you need to change “style.css” to “main.css” in the link rel.


#12

You’re importing styles.css when your file is called main.css and that’s causing the error. You don’t have a file called styles.css


#13

I must have mixed it up because i thought i had that already fixed. Thank you so much for your help!