Building a very ON POINT website for Brooke Lynn Heights! (Beginner HTML/CSS/JavaScript)

Hi I’m Anna Lytical, and today we will be
building a very “On Point” website. We’re gonna be using some of the concepts that
I demonstrated in the opulence coding tutorial as well as things that I
use in the Yvie Oddly website. Those links will be in the description below. If you’re new
here, welcome!! We are very beginner friendly. This is a very beginner
tutorial, but we’re still gonna do some really fun stuff. Before we dive in, be
sure to LIKE the video, subscribe and ring the bell to be notified of all my
upcoming videos. Now, let’s dive in! I want to make a website dedicated of Brooke Lynn
Heights On Point mummy look. I thought it was so chic, so cool that she was on
point. I’m gonna build it from scratch and show you all the stuff I do here. The
first thing I want to do is just grab a few images. Okay,
so here’s the whole runway, so I’m gonna grab some screenshots from this, and I
think I’ll go for this one. I’m gonna edit this in GIMP to remove the
background and I’ll speed things up so you can follow along with what I do but
this is not an image editing tutorial channel. Now, we just export it as a PNG. Really it
doesn’t have to be super perfect you can have a few danglies here and there. Just you need something to get the job done. Great. Now, let’s get into some of the coding!!
Let’s create a new folder on my desktop we’ll call this Brooke dash on dash point.
Now, we’re gonna go to our text editor. Let’s do as our normal, save this as
index.html. You could save this as whatever you want, but because I’m gonna
be uploading this to firebase, so using index.html makes things a lot easier. Let’s also
create a new one for CSS styles dot CSS. We’re good to go! So we start our
HTML, just give this a title I’m gonna throw the code on the left side today
and the browser on the right. I feel like it’ll be a little easier to make sure my
head is not getting in the way of your code. Now let’s just open this in here. So,
my idea for this website is to have Brooke Lynn moving around the screen on
point and maybe the more times you click, the more times Brooke Lynn goes
around or we add more Brooke Lynn to the screen every time. We’ll just start with one,
keeping it simple. It’s always best to figure out what’s the simplest part of
your programming project and how can you get that part done and then once you get
that done then you can move on to the next step.
You don’t want to tackle every problem at once or you’re not gonna get anything done!
Great, fabulous! We’ll give it the class Brooke and set the width and be sure to
link in your styles otherwise they are not going to do anything at all. Now, it’s an
appropriate size to work with. I think I just kind of want to do another keyframe
animation. We’ll do @ keyframes and then let’s just call this brooke. So at 0%
let’s start at bottom zero and right zero. You have to remember to do
position:absolute since we’re going to be using bottom and right and then we’ll
add the animation name. It’s not going because it doesn’t have the end position.
Okay, it took us a minute but we got there. Now she’s going one side of the
screen to the other. I wanna have her make a spiral around the screen up and
get smaller as it goes on. Let’s set the final width so she’s gonna
shrink ee-dee-beedy-teeny-tiny small. We really just want this to be the first
part of the animation, so maybe we’ll have her go right to left, bottom to top etc. Let’s
use like 8 splits actually let’s do 10 so it’ll be easier to work with. And we’ll
take the width and we’ll make it 10% smaller each time. I’m gonna finish this
up quickly and then we’ll come right back. Oh she’s going off screen. Instead
of 100%, we’re gonna use Calc. We can just subtract pixels from percentages, so
we’re mixing our units and Calc helps us out with this.
So going all the way off screen it goes 100% and then goes back. We actually want
this width to match up to the width our unit here. We’ll have to remember to use
different variables for the height as it’s shrinking down, and you can really just estimate these. whatever you want to do. I think some of my numbers got messed up a little bit, so let me go fix that well I have a tasty
snack of some tater tots! be right back okay much better!!
Well that’s it for now back for you later! Let’s also add in some rotation
because why not! we have Brooke Lynn’s toe always facing
the direction she’s moving.We just need to add transform rotate. We’ll just add 180 to
this every time. And who thought knowing you’re multiples at 180 was gonna be
useless? not me! Now mama, this is what I call gay Math *attempts to okurrr* my *okurrr* is not there at the moment
because I quite possibly have pneumonia but, we’re gonna get through this together,
and then save. love love that, and I think I am done. actually let’s throw this on
so she’s ending in the right position. look at all these numbers Stunning! okay
so now what I want to add is when you click a button or click somewhere on the
page we want to just get more of these because I think that would be so fun so
cute. We’re gonna add our script tag. We know how to do click listener so in our
body, actually, let’s just use an HTML on click get on point call that bar
function will just define it here. Now we need to know how we
add new HTML elements to the page when we pick something in the opulence video we
were just hiding and showing the same elements so that was a little bit easier
but we can always go to our trusty w3schools when we are not sure what to
do. It looks like we have to select an element that we’re gonna append this
into so we’ll use the body and we’ll add an ID body to this so we can select it
with classes we can have multiples of this image element with the class Brooke
and that’s okay but we can only have one element with an ID. They have to be
unique across a page when we add body here as our ID it makes it a lot easier
to select a var image equals document create element IMG we set the source by
doing image dot source equals, and if we want to add a class to this, we’ll just
do image class list add, and Brooke is the class we need. S o this should be all
we need to add this element so let’s comment out this first Brooke and see if
this works. *sigh* You are testing me today oh I forgot to append it to the body let’s do
that after body dot append child image now let’s try this again OhHONEYY. this is exactly
what I wanted. Now we’ve also had this Brooke Lynn Heights Miss Vangie romance
happening it would be really funny to have a photo of them kissing maybe appear in the background the more times you click this and we aren’t able to
make a background image transparent so we’re just gonna throw an image the same
size of the screen on here so image source equals kiss dot JPG. let’s add an
ID for this also because why not kiss To style an ID we use the hashtag
instead of the period.  let’s set this to 100.. Cute! so we’ll deal with those
margins later I will probably go in and do a bunch of cleaning up don’t you
worry now opacity to let’s set it to .05 so you can kind of see it you see
there’s something there you might know it’s but you’ll figure it out
and now every time we click let’s select this. create a new variable called kiss let me
actually get the element by ID here now kiss dot style dot opacity will
set this to 0.5 just to test that it’s working and great we know it’s working
so let’s keep track of this number so we’ll store it outside of the function
similar to what we did with audio in our Monique Heart sound board. We need to start this out by .05 and here we’ll set it to the opacity here we’ll
increase the opacity by 0.05. Every time this is clicked we’ll set the
opacity here to that. And it’s okay if we go over 1 it will just stay visible.
No problems there and now, as we add more clicks the love emerges!! All right I’m
gonna clean this up a little bit more from here and then wrap things up! Ok! a few things here. Let me show you the
final product, for the moment at least. I will probably go even more HAM on this
because it’s Drag websites we got add everything we can to them. And now we’ve
got Brooke Lynn coming in from both sides of it creates this lovely like mystical
trance of all this Brooke Lynn. I cleaned up some of the margins on the page, added my Google Font, I even have a little click counter for yourself because I
know so you like to get wild. One thing I want to show you that I was doing while
editing this, if you go to inspect you get a whole suite of editing tools. so in
elements you get the HTML of the page so you can hover over each of these
elements and then on the right of this you see their style. So you want to
modify them at all, so if I want to make this font size 100 pixels or something
you can see what it will look like on the page without having to save and
refresh and all that stuff then you can copy this into your style CSS file and
you’re gonna know exactly what you’ll get. It is a great tool if you’re
changing a lot of things at once and you can quickly see what your final result
will be. I added a new set of keyframes going from the other direction for more
fun that way. Then I added this little if statement
so Math.Random() returns a value between 1 and 0. half those numbers let’s do one direction and the other half to the other and this is a
great way to do something different every single time, I noticed that my page
was getting a little slow so I added this timeout after 7 seconds so when the
animation is done I will also just remove that image because it’s only one
pixel people are probably clicking on it so many times they won’t even notice
it’s disappearing. And then their page will be a lot faster and we love that!
And then I also just did this clicks counter.
I added an element up here and we select the element I keep track of the
count of clicks over here and then I set the innerHTML so that’s setting any of
the text in that HTML or I could even have a new tag in here so I could set
the P tag or something. Don’t want to do that, no thanks! Set clicks that
I have to count to that and this is really the majority of what I’m gonna do
for this website. So I’m going to say goodbye to you for
this lesson! I hope you learned a lot I really would love to see it any of you
try building a website on your own or try to follow along the steps please let
me know I am here to help and the best way to got my help is to
leave a comment if you have any questions and while you’re down there
like the video subscribe ring the bell you know the deal thanks for watching

Add a Comment

Your email address will not be published. Required fields are marked *