Create a Horror Website with a Creepy Animation HTML & CSS & JS | Safak Kocaoglu | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Create a Horror Website with a Creepy Animation HTML & CSS & JS

teacher avatar Safak Kocaoglu, Computer Engineer. Front-end Developer.

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (34m)
    • 1. Introduction

      0:55
    • 2. Preparing before coding

      2:17
    • 3. Creating main container

      4:44
    • 4. Creating left container

      5:57
    • 5. Creating right container

      1:59
    • 6. Additional HTML elements

      5:03
    • 7. Adding Scary CSS Animation

      3:43
    • 8. Adding Movie Trailer Popup

      3:16
    • 9. JavaScript Basics and Scary Video Intro

      6:33
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

35

Students

--

Projects

About This Class

If you want to improve your HTML, CSS, and JavaScript skills, let's create a scary web page with a CSS animation. During this class, you will be learning a real-world web design project. You will be able to use trend HTML tags such as video and audio, CSS flexbox, CSS animations, and Vanilla JavaScript basics. 

After the course don't forget to share your own project with us :) For further information about the project please check the Class Project section.

You can find all resources (including code, images, video, and audio) in my GitHub Skillshare repository.

Meet Your Teacher

Teacher Profile Image

Safak Kocaoglu

Computer Engineer. Front-end Developer.

Teacher

Hello, I'm Safak. Here are a few things you might need to know :)

I am a full-stack web developer has 5 years of experience. My job is creating well-designed interactive web and mobile applications and sharing my experiences with the students. If you are interested in web design,  web animation, front-end development, and creating useful web APIs, I recommend you to check my courses out. 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hi. Today we are going to be building this scary horror movie website. There will be a creepy animation first and then does minimal content or will be appeared. It's really easy and really creative. It's a good opportunity to do something different to your portfolio. Okay? If you're ready, let's get started. 2. Preparing before coding: Okay, Before starting, I'm going to show you which resources we are going to be using. There are three buttons here. And this is going to be our background image for trailer image. And it's going to be movie title. And it is intro video, and it's going to be a child here is going to pop up the screen. And all these files are in my folder. So I can close it and create my first document here. I can change this name, horror movie. And I'm going to link this style CSS here. I will say link and style CSS. And we are going to be using two different font families. I will write here, Oswald. And this one will be the first one. I will choose all of them. We are not going to use all of them but in any case. So I'm going to come to the homepage and here the second family, Roboto. And for this one I can choose 300, 45. And like this. So I'm going to copy this style sheet. And after link or before, doesn't matter. I will just paste it. To use them. I'm going to come here and choose this one. It's going to be our main font family. So here, inside body, which includes all elements inside it. I will paste here. Okay? If I write something here, it's going to be in our font family. 3. Creating main container: So firstly, I'm going to create some container here. It's going to be our main container. And inside this, there will be two other containers, left and right. Let's resize this container first. I will say with 70% are all secret is a 100 percent and it's going to contain just solely. And for height, I will say Perfect. I will give some background color. And we can see where it is, something like that. So how am I going to ascend to this item here? Basically I'm going to use flexbox. Display flex. If I say here, align items center. It's going to center this container vertically. To center this horizontally, I will say justify-content center. Perfect. For I1. I give some border-radius for these ages. Border-radius, and it's going to be 20 pixels. So we can give this background image inside. Instead of background color, I will say joust background. And to add this image, I will say URL and bg dot PNG. Let's see. Okay, to prevent any overflowing, I will write here background size. And it's going to be covered. Right now. It covers hold this container. But it looks really light. I will make this a little bit darker. To do that, I'm going to add here a filter. How I'm gonna do that? I will say here linear gradient and RGB I and 0, 0, 0, 0, 0, 0.7. And it's going to be same thing again. And between this URL will be comma. Let's see. Okay, It's better for horror website. So I'm going to split this container into two pieces. This is left and here is right. So I'm gonna write here display flex. And for left part and the right part, they are going to contain only half of this container, which means V is 50 percent. And height is going to be a 100 percent of this container. Let's give some color for them and we can see better. For the right. It's going to be something like this. Okay? If I write here 50%, for example, the outcome and contain only 50 percent. Good. So I'm going to delete them. You don't need any background color. Before adding elements. I'm going to write here before container, H1 and paragraph and any lists. And I don't want any default margin. So I will say margin 0, padding 0. So they're not going to use any default spaces. And for the body, I can give black background leg. Okay, so let's do some items inside this left. 4. Creating left container: It's going to contain a title, description and trailer frame here. So it's going to be display flex, but this time not horizontal. It's going to be a vertical line right here, first one and class name will be title. Okay? For the paragraph, I will say class name, description. And here I'm going to create some Jewish sentences. To do that. I'm going to write here lorem. And then I enter. It's going to generate some random sentences. And after that, it's going to be trailer container, which contains our trailer background. And inside this, I'm going to use this Play button. Image. Les dot PNG. And class name will be just play. Something like that. Let's do this Flexbox and column think. For the left. Flexbox and this time is going to be vertical. Flex direction will be column. And I will center them, align items center, something like that. So I will send to them here also. Justify-content center. Absolutely. I will change font size for this. Title. Title, and font size can be 40 pixels, and color will be white. Group. That's to something quote description also. It's wheat is too much here. I will just reduce a little bit, maybe a t percent. Like this is better. And color will be light gray. Let's say cray and arrange here. Maybe something like that. Maybe lighter. Okay, but I want to change font family. I don't want to also out here. So I will come here and choose this one. For description. Are font-family will be Roboto. Okay? And I will give you font-weight. It's going to be 300 because we choose here, as you remember, 300, we will use this one. And I will give some margin between this title and trailer. So I will come here and margin. I can give these in one line. For top 10 pixels, far right, 04, bottom to any pixels, and left also 0. Let's see right now. Okay, it's much better. Let's make this trailer frame. Trailer container. I will do again, background here. And URL. What was the name of this trailer? Let's see. Okay, we should resize this. I will say with 80% and highs, maybe 40. Okay? I will give border-radius for ages. It can be ten pixels. And of course I will give background size. And it's going to be a coward, aka. Okay, So how I'm going to move this icon to here? I'm going to make this position absolute. And let's go to play and say position absolute. To center this, I'm going to write your top 0, bottom 0, left and right 0. And here, if I say margin auto, it's going to center this. But as you can see, it's not centering this container. It goes to this big container. Because when you use absolute positioning, you have to give relative position for parent, which is trailer container. Position relative. As you can see, it works now. Because if you don't queue and the relative, it will go to parent automatically, which is body here. So you have to use relative for parent all the time. So I will cursor pointer here. So we can click here. Okay, Let's add some 24 right side also. 5. Creating right container: Right deal. I will add just titled here. Image. These texts PNG and class name will be title image is going to be a really big as you can see. So there is some scroll bars here. Also. To fix that, I will go to buddy, say overflow hidden. Okay? It's not problem for this because we will reduce this font size. But here, when we use this image is going to overflow. So we already fix this. So far, this title image, I will say with a 2% like this. So I don't want to center this, so I will not use Flexbox for this right side. And instead, I'm going to use position absolute here also. And as I said before, if you use absolute for child, you have to go to parent and say position relative. So I can position this right now. I will say top 50 pixels and write 50 pixels. Let's see right now. Okay, Perfect. So I will give some items here. And here. It's going to be our minimum. And this is going to be our pi button. 6. Additional HTML elements: And after these left and right gives icon right here, let's say by or by container. So it's going to contain our arrow button here. And it's going to be a text image. Ro dot PNG. And class name will be R0. And after that, I will add a text span and class name. Let's say by text and Pi now. And after that, it's going to be a mini UL and className about information, whatever you want, and some list items inside this class name About item. And I can write here our menu items, let's say about. And I will duplicate this. And video. Calorie, cast and crew. And here by reduced by here, I can say get movie. Okay, Let's see. So I'm going to use this ROM by here, and these minuss will be here and horizontal. Let's begin with this pi button. I will go to CSS. And here for by container, it's going to be a position absolute. And top 10 pixels left, 10 pixels. It's going to be somewhere here. And this is our relative mistake because we didn't give relative for container position relative. And right now it's here. I will make this display flex and center these items inside it. Let's do that. Display flex align items center. Perfect. I want to make this text white, also, color white. And cursor will be pointer like this. I will make this arrow a little bit smaller and give some margin between arrow and this text. I will say with 280. 280 and margin-right five pixels like this. So what about this list? That was to our class name about? And here, first, I will get rid of these dots. List-style. By default, it adds these dots. So if I say none, perfect. So how I'm gonna make these items horizontal? I can say here, display flex. Or I can go to about items. And I can say display inline, 1000 matter. I just want to show you, if you say display nine, it's going to be in one row. Okay, I can give some margin between these items. Margin right, ten pixels. And color white again. And cursor pointer. Okay? So let's move this here. So I'm going to make this about position absolute. We already make this container relative. So we don't have to worry about this. So here I will say bottom ten pixels and write ten peaks as perfect. I can give font weight here, 200 Maybe. Okay, good. Or here, it doesn't matter. 7. Adding Scary CSS Animation: It's inside this list. So let's add this creepy Quito here. I will go to index. And after that, I will say image and className. That's a kid. And here I will say position absolute. Again. It's going to contain whole screen, but it's not gonna inside container. It will be inside just body. Like this. If I make this absolute, it's going to own this deal. So position absolute, like that. I will make this bigger. It's going to contain whole screen. A 100 percent height, 100 percent, something like this. It's really scary. So it's not going to stay here. I will give some animation in area 50, 60 seconds is going to show up. So I will say animation. Ooh. It's our animation name. And it's going to take six seconds. And linear and infinite. If you are not familiar with animations, you can check out my animation course at me, explain them in a way. This is our animation name. This is our animation duration, and this is our animation timing function which arranges speed. So speed is going to be linear. It's not going to be slow down or speed up. And this is repetition of the animation and I will stop. And after this, I shall cure some keyframes. And animation name. For the beginning and the ending of the animation. 0 plus T will be 0. And between 49 percent and 50 percent is just a moment, it's going to show up. So positive will be a one. If I write like this, it's not gonna work properly. Because as you can see, it starts from 0 and coming to 49 percent slightly. So what I'm gonna do is before 29 percent, it's going to be 0, AKA for here, 48% and 51 percent also, it's going to be 0. So during 048, it's going to be 0. And suddenly it's going to change to one. And after 51 is going to be 0 again until a 100 percent. Let's see right now. Absolutely. For I'm going to create trailer container here. This big one, which contains our YouTube iframe. 8. Adding Movie Trailer Popup: So I'm going to come here and after this kid, I will say we deal container. And inside this, I'm going to add YouTube, iframe. This one, a new tube. If you press the share button, you can see this ambit IFrame code. So you can choose any video. And after that, I'm going to add these close button. Image, closed dot PNG. And class name will be cos. For here with a container. It's going to be really big. Like here. We it night percent and height night 2%, and it's going to be a position absolute. I will center this. So it's not centered. If I write here, background color, say yellow, it's centered. This video is not. So I will center this also like this. So I can delete this yellow. Okay. So I will now Moody's, I'll come here. It was claws and position, absolute. And top 10 pixels, right time pixels. Like this. I will say a cursor pointer. Okay, so at the beginning, this container will be known. When I click this button, it's going to be flex again, like this. So when I click this one, it's going to be a non-negative. And there is a, some problem here. I can't click this one. I can't see your cursor pointer. And here also because of the background image is Quito. So what I'm gonna do is coming about this and Z index to right now. I can't see. And I will do the same thing for play. Right now it works. And for this button also by, okay here, set index, it's going to be two. And right now this codon behind these buttons. Okay. 9. JavaScript Basics and Scary Video Intro: Before this, I will say container display none. It's going to be our intro first. After intro animation, it's going to be flex again. So I'm coming to index file again. After everything or before 1000 meter. I will create a widow attack here. And this we do, is, we do here, we do MP 4. And here I will say auto-play. So when I refresh the page, it's going to play automatically. And as you can see, it's really big. I will add some animation for this. But before that, I will create a class here. B del S go to style. And for this video, it's going to be just an animation. And for animation name video, it's going to take, Let's look here, 18 seconds. I can use all of this or you can crop. And speed is linear. So here I'm going to create keyframes. Again. We don't know. If you want to learn more about these keyframes and animations, you should definitely check out my other course. So 0%, it's going to be with 0 and 4, 0, 2 animation. It's going to be, let's say 100, 100%. Let's check. It's really creepy. It's going to zoom like this. 18 seconds. And after that, I'm gonna make my container flex again. To do that, I will go to app.js. And here I will choose my container and this video const container. And again document query selector. And I'm going to choose my container. And for the video, I will create here setTimeout, which will provide us some delay. What I mean by that, it's going to be some function here. And if I write here specific moment, which is 18 seconds, this function will fired after 18 seconds. It's really useful. So for this video, I will say style and display will be not. It's going to be disappeared. So what about our container? I will copy and paste here. And I will not say 18, maybe 22 seconds. It can be some space between this animation and container. I will make this flex again. It was known here. After animation. It will wait four seconds and it's going to be a flex. Again. I should write here dots also, of course, because they are class. We did hear about, we forgot here. Let's try. This. Kilo is really awesome, really scary. And after this video, it's going to end up four seconds. And our container is here. Perfect. So let's add some song here. And after we do, I will create all do your talk. And inside it's going to be our song. Oppose name. Oh, I forgot adding here. Okay, I add this BG. I will say this one and I don't have to give any class. I will just say autoplay. When I refresh the page, it's going to play now, so it looks really, really good. So we've finished our project. I hope you enjoyed this. If you want to check more project like this, you can visit my profile and you can find something guests there. So goodbye, I will see you in the next lesson.