Hello and welcome.
This is going to be the first lesson where are we going to start setting up the structure of the page?
We're going to need to add in the few elements.
So I'm starting out with a basic indexed HTML page, and I'm going to be writing all of the script content
in here as we're not going to have a lot of HTML and then link out to a stylesheet with a little bit
of styling and style properties that we can use with JavaScript code.
So we've got basic HTML page and opened up on the right hand side within the browser.
The browser that I'm using is Chrome and I've also got dev tools opened on the bottom right hand corner
and on the on the big side.
On the left side I've got brackets, which is the editor that I'm using opened up.
So we've got the source code and then we can view what the code is doing on the right hand side.
So let's start by creating a few HTML elements, and these are going to be the ones that we're going
to use in order to update and add content into.
So we want to start by adding in and creating an area to track the score so we could just give it a
name of score and then creating a span so that we have something to select and update.
So a class and this can just be a score and then one more where we've got lives and we want to decrease
the amount of lives that the player.
So every time that the ball goes off screen, it will do one of these lives.
And again, we're grabbing it.
We're going to grab it by the class name lives and update it via JavaScript.
And then one more element and the rest we will do with JavaScript so this one can be our main container.
So this is where all of the gameplay is going to happen and all of the dynamic content is going to update
using the script.
So let's also create our stylesheet and link to a stylesheet.
So this is going to be just the basic styles that we're going to have.
So some for the container and we're making the content dynamic so we can just call this dialog success
and link out to that.
And I'm going to create that style.
And within the stylesheet, let's set up a few properties.
We've got container.
So this is our main gameplay container and this is going to be dynamic, but we're going to set some
default ones.
So whatever it adjusts to our JavaScript should adjust as well.
And I'll make this one fluid.
So it's 80 percent.
And again, we're only applying some basic styling in order to get started.
And you can customize this as needed.
The overflow will hide the overflow, give it a border so that we can tell where it's located.
For now, I'm going to move it slightly off the top.
So margined top, it will set position to relative and also will set for score as well as for lives.
I won't make the font really big.
And we're going to also need to set up a class for the bricks so we can just call this one brick and
I'm going to add some default properties in here.
So position and this is important.
We need to position at absolute.
So that makes us that gives us the option to position it anywhere on the screen.
And we need that with JavaScript.
We're setting the top and the left position dynamically with JavaScript.
So for now, let's set them to zero.
Also setting the width, we're going to adjust the width of the dynamically as well, height and width
for this.
Add in a little bit of padding and the default color of white.
We're going to set a default background color as well.
So this is all going to be done with JavaScript.
We're going to do as much as possible JavaScript.
I want to have a basic one as a starting point for US border of white font size one point eighty and
then one last one will do a line height of forty pics.
So that should be pretty good and we'll just save that.
And of course, we're not going to see anything yet.
And until we introduce the JavaScript.
So that's coming up next, where we're going to build out the game over the ball and the paddle, all
using JavaScript.
So this is going to be creating all of the elements using JavaScript.
And that's coming up in the next lesson.
Create the basic gameplay area.
You can apply your own styling.
You've got score and lives.
So those are the containers we're going to drop information into about how the gameplay is going.
And then the main container area, this is where we're going to be adding all of the gameplay.
So make sure that you have all of the elements ready to go and we're going to connect to them using
JavaScript.
And coming up in all the following lessons are all going to be just JavaScript.
So that's still to come.