so you want to make a website?

making a website in hand is very much like making a zine from paper and glue...

html is just a file that a browser can read..

all you need is a plain text text-editor (like notepad in windows or blablabla in mac and so on). open such a text-editor and write whatever you feel like.. maybe something along the lines of::

coDEE EXECUTE

fuck me, jesus?

you can then save it as poop and then open that file in your browser. your browser would render it as this, because your browser is smart and can read files, even though the file is just named poop.

to make a HTML document you need to declare that it is a HTML document. then it needs a <head> and a <body> tag. . exciting happens. what you would want to do tell browser that you are actually doing HMTL. a HTML document consists of a declaration that this is HTML, a head and a body.

cOdE EXECUTE

<!DOCTYPE html>
<html>
<body>
fuck me, jesus?
</body>
</html>

also, save it as index.html this time, becaus the first page of any website is usually that. open your new index.html and you have your first certified actual HTML document.

but so what?
well.... now we can do HTML stuff.. and CSS.

let's make the font RED and the background BLACK!!!

that is simply done by styling your elements. adding styles to your <body> tag will be global, ie. affect the whole page. in the case below we are chaning the background color and text color. very easy.

cOdE EXECUTE

<!DOCTYPE html>
<html>
<body style="color: red; background-color: black;">
fuck me, jesus?
</body>
</html>

is "fuck me, jesus" the title of your page? let's make it into a heading. headings are useful.

cOdE EXECUTE

<!DOCTYPE html>
<html>
<body style="color: red; background-color: black;">
<h1>fuck me, jesus?</h1>
</body>
</html>

you need to explain yourself, you can't just write "fuck me, jesus" without explaining.

how about adding a paragraph? that is just by adding the <p> tag. very easy!

cOdE EXECUTE

<!DOCTYPE html>
<html>
<body style="color: red; background-color: black;">
<h1>fuck me, jesus?</h1>
<p>"fuck me, jesus" is just the black metal way of saying "rock me, baby" or some crap like that.</p>
</body>
</html>

you could underline your statement by adding the text-decoration property to your <p> tag and set it to "underline double".

cOdE EXECUTE

<!DOCTYPE html>
<html>
<body style="color: red; background-color: black;">
<h1>fuck me, jesus?</h1>
<p style="text-decoration: underline double;">"fuck me, jesus" is just the black metal way of saying "rock me, baby" or some crap like that.</p>
</body>
</html>

why not also transform all text on your page to uppercase? that way you don't have to hold down shift while you spew your hatred on christianity. just add "text-transform: uppercase;" to your <body> style.

cOdE EXECUTE

<!DOCTYPE html>
<html>
<body style="color: red; background-color: black;text-transform: uppercase;">
<h1>fuck me, jesus?</h1>
<p style="text-decoration: underline double;">"fuck me, jesus" is just the black metal way of saying "rock me, baby" or some crap like that.</p>
</body>
</html>

your page is actually missing the <head> part. that's where all the cool stuff happens. let's add it.

cOdE EXECUTE

<!DOCTYPE html>
<html>
<head>
</head>
<body style="color: red; background-color: black;text-transform: uppercase;">
<h1>fuck me, jesus?</h1>
<p style="text-decoration: underline double;">"fuck me, jesus" is just the black metal way of saying "rock me, baby" or some crap like that.</p>
</body>
</html>

yeah, we should have done that to begin with. oh, well.

anyway.. we need the <head> because that's where out <style> tag goes! in that we put our styles, the CSS.

cOdE EXECUTE

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
background-color: black;
text-transform: uppercase;
}
p {
text-decoration: underline double;
}
</style>
</head>
<body>
<h1>fuck me, jesus?</h1>
<p>"fuck me, jesus" is just the black metal way of saying "rock me, baby" or some crap like that.</p>
</body>
</html>

that's clever!! and tidy!

CSS is more often than not called in from a seperate .css file, but it's fine just to do it the <head>. Also, now you can add pseudo-elements like :hover!

Let's do that to <p> and make the text color black!

cOdE EXECUTE

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
background-color: black;
text-transform: uppercase;
}
p {
text-decoration: underline double;
}
p:hover {
color: black;
}
</style>
</head>
<body>
<h1>fuck me, jesus?</h1>
<p>"fuck me, jesus" is just the black metal way of saying "rock me, baby" or some crap like that.</p>
</body>
</html>

now hover over your text!

it's getting kinda spooky, but it can get way spookier!!

what about rotating fuck me, jesus? part upside down?

cOdE EXECUTE

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
background-color: black;
text-transform: uppercase;
}
p {
text-decoration: underline double;
}
p:hover {
color: black;
}
h1 {
display: inline-block;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>fuck me, jesus?</h1>
<p>"fuck me, jesus" is just the black metal way of saying "rock me, baby" or some crap like that.</p>
</body>
</html>

thats proper spooky!!

note: in order for the transform property to work, your element needs to be defined by display. i chose inline-block, so it would rotate just the text and not the whole line.

now is time for putting an image on there!! for that we use a <img> tag.

<img> just needs a source, which is an image file.

how about pentagram.png?

cOdE EXECUTE

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
background-color: black;
text-transform: uppercase;
}
p {
text-decoration: underline double;
}
p:hover {
color: black;
}
h1 {
display: inline-block;
transform: rotate(180deg);
} </style>
</head>
<body>
<h1>fuck me, jesus?</h1>
<p>"fuck me, jesus" is just the black metal way of saying "rock me, baby" or some crap like that.</p>
<img src="pentagram.png" />
</body>
</html>

nice, but too big. setting the max-width to 100% on all images, by declaring that in styles.

cOdE EXECUTE

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
background-color: black;
text-transform: uppercase;
}
img {
max-width: 100%;
}
p {
text-decoration: underline double;
}
p:hover {
color: black;
}
h1 {
display: inline-block;
transform: rotate(180deg);
} </style>
</head>
<body>
<h1>fuck me, jesus?</h1>
<p>"fuck me, jesus" is just the black metal way of saying "rock me, baby" or some crap like that.</p>
<img src="pentagram.png" />
</body>
</html>

let's add a hidden 666 message in the heading.

we use :hover again, this time on the <h1> element, but here with ::before following it.

::before makes something happen before an element (there is also an ::after), we use it by setting the content property to "999".

cOdE EXECUTE

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
background-color: black;
text-transform: uppercase;
}
img {
max-width: 100%;
}
p {
text-decoration: underline double;
}
p:hover {
color: black;
}
h1 {
display: inline-block;
transform: rotate(180deg);
}
h1:hover::before {
content: "999 _ ";
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>fuck me, jesus?</h1>
<p>"fuck me, jesus" is just the black metal way of saying "rock me, baby" or some crap like that.</p>
<img src="pentagram.png" />
</body>
</html>

now for the scrolling HAIL SATAN!

for this we use a css animation. first we name and set the keyframes of the animation, then define on which element to use it. in this case we made a new headline - <h2> - that says HAIL SATAN and in the CSS properties of that, we control how our animation behaves.

cOdE EXECUTE

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
background-color: black;
text-transform: uppercase;
}
img {
max-width: 100%;
}
p {
text-decoration: underline double;
}
p:hover {
color: black;
}
h1 {
display: inline-block;
transform: rotate(180deg);
} h1:hover::before {
content: "999 _ ";
color: red;
font-weight: bold;
}
h2 {
animation-name: SATANANIMATION;
animation-duration: 4s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: linear;
position: fixed;
bottom: 0;
}
@keyframes SATANANIMATION {
from {left: -50%;}
to {left: 150%;}
}
</style>
</head>
<body>
<h1>fuck me, jesus?</h1>
<p>"fuck me, jesus" is just the black metal way of saying "rock me, baby" or some crap like that.</p>
<img src="pentagram.png" />
<h2><b>HAIL SATAN</b></h2>
</body>
</html>

correct way of doing that animation stuff would be to do it only on a specific element, as it is here, ALL h2 elements will be forever scrolling in a fixed position.

hope you enjoyed our quick satanic website build, check it out here