So for this demo website here,
I'm in a brand new folder, an empty folder again,
just with this gitignore file,
which you won't have and which you don't need.
And in this folder, I now wanna add all these files,
all the code that we need for this website.
And of course, as mentioned, we'll need HTML,
CSS and JavaScript
and JavaScript will be the focus
and the brand new thing in this project here,
because that's what we learned about
in the previous course sections,
but we will get started with HTML and CSS,
because I wanna start with preparing the page
and the different elements that we need on the page
before we then add JavaScript to add interactivity
to that page.
I guess that makes sense.
And therefore, I'll start by adding a brand new file,
index.html file, which will hold our general page structure
and content, as it always did in this course,
I will also already add a folder, a styles folder here,
which will hold my different CSS style files,
because I wanna split my styles across multiple files,
even though I only have one HTML file in that website,
to make the individual CSS files a bit smaller
and easier to maintain.
Not something you have to do,
but something which often is useful
in bigger projects and websites
to have an easier time going through your code
if you ever need to make changes and so on.
And that's why I add a separate styles folder,
so that we can put all the CSS files in there.
But let's get started in index.html.
As always, we need a base HTML skeleton
and for this, we can use this shortcut
this built-in snippet here in Visual Studio Code
and type an exclamation mark
to get that auto-completion overlay
and hit TAB to then get that base skeleton.
And we can keep that base skeleton as it is here
and give it a more fitting, a more suitable title
and I'll choose a title of Tic Tac Toe here,
because we're building a tic-tac-toe game.
Now, I'll keep all the other elements here,
especially all of this meta element,
which sets the viewport,
so that we can also build a responsive site here.
While CSS is not the focus of this module,
I of course do want to ensure
that this page looks at least decent
on different device sizes and hence,
we should keep this metadata
to make sure that the browser does adjust our scaling
and set the page scaling correctly.
Now let's focus on the body though,
because for the moment that's it
when it comes to the metadata,
of course later we are going to add links
to our CSS files and script elements
to import and link to our JavaScript files though.
But for the moment, let's focus on the body.
Now, in this body, if we recall the finished page
and what we wanna build, we have various parts
that make up our page.
For example, we have this main header
which introduces us to the game
and therefore I'll use this header HTML element here
to wrap some header content
that should sit at the top of the page
and that should introduce visitors of this page
to this page and to our game.
And in this header, I simply wanna have my main page title,
a h1 element therefor, where I say Play Tic, Tac, Toe,
because that's the title of my page.
And then below that,
a paragraph where I wanna say built with HTML,
CSS, JavaScript
and of course, lots of love, because we love what we do.
And that's then my main header.
Of course, this has nothing to do with the game itself,
with the core game logic,
but it's describes our website
and tells the user what this website is all about.
It's a great introduction therefor.
But the main part of our page is the game
and the configuration area for that game
and that's why I'll then add my main element here
to wrap that main content.
And here in that main content,
I, in the end wanna have two main sections.
And for this, we have that section element,
which is very fitting.
That's a great HTML element,
which we wanna use if we wanna group different pieces
of content and different HTML elements together,
because they make up a part of our main content,
a part of our website.
And here I wanna have one section for the game configuration
and then one section for the game itself,
and therefore, as a little annotation,
which we then also could use for styling,
I'll add an ID here, the ID attribute to this section
and give this an ID of game-configuration
and then I'll add a second section,
which should contain the actual game field
and I'll name this active-game.
So I'll give this an ID of active-game.
And of course these IDs are not technically required,
but we can use them for styling
and they can also help us as a developer
or other developers looking at that code
with understanding that code
and with understanding our content here.
Now, in this game configuration section,
I want to actually not get the player's configuration
for this game, but just output the chosen configuration,
because the actual configuration
should be fetched with help of a little overly,
which we present.
Now, I'll add the structure and the HTML code
for the overlay in a second,
for the moment, let's just output the information
that we fetched and for this,
I'll use an ordered list
and it's an ordered list, because I have player one and two,
and whilst we also could use an unordered list
and it really doesn't matter too much here,
if we think about it, if we have a player one and two,
then we have some kind of logical ordering
and hence, a ordered list instead of an unordered list
makes more sense to me.
And we'll then have to list items, one for every player.
And the first list item is about the first player of course
and to describe this player,
I'll wrap it into an article, which is not required,
and that's true for a lot of HTML elements as you learned,
but which is semantically a bit more correct in my opinion,
since we can now clearly wrap a standalone piece of content
on our page with such an article,
because we wanna use the article element
whenever we have some content
that basically works standalone
that could describe an entity.
And here we are describing a player and hence,
wrapping this data into such an article
is something we can do here,
but it would also not be horrible or wrong
if you don't add this extra article wrapper,
but here I will add it.
And then in there, I'll add a h2 element
as the main title of this article.
So not of the overall page, that's this h1 tag,
but of this article.
And in here, we wanna say player one
and then below that, output the actual player name
and for this, I'll add a h3 free element here
and that should be the player name.
And for the moment, I'll just put player name
as a placeholder here.
Later, this will of course be populated
with the actual data entered by the player.
So it's always player one as a title for this article,
so that here we have to data about the first player,
but then part of that data is the name,
which is wrapped in this h3 element and then below that,
I also wanna have a paragraph
where I just output the symbol of that player,
and it doesn't have to be a paragraph.
We could maybe also just use a div here
or anything like that,
but I'll use a paragraph and then just output the symbol,
which for the first player is a cross, is an X.
And for the second player, it will be a circle.
Speaking of that, we can now copy that article
and add that into the second list item,
and then here we say, player two
and still have player name as a placeholder,
which will be replaced later,
and then a circle, O, in this case, a capital O as a symbol
that will be used for representing that player
in the game field later.
And that's now my list with all that player data
that we have.
Let me zoom out a bit
to have a bit more content on the screen.
Now, I also wanna have a button here
that should start the game
and I'll add a button there for a button element,
but please note that I'm not inside of a form here,
because this button is not about submitting a form somewhere
and about handling some user input,
because here we have no user input fields.
Instead here, we just output some data
that was entered somewhere else
and this button should then only be there
to start the actual game based on that entered data.
So to confirm that data, so to say
and then start a game and hence,
I'll add a label of Start New Game on that button.
So that's the text that should show up here.
And speaking of buttons,
I actually also wanna have a couple of other buttons,
because the data for these players should be editable,
you should be able to change your name.
And therefor, I'll actually also add a button here
in my player one article, where I just say edit,
and I'll add the same button for the second player.
So that we got two buttons
for editing the different players
and then one button for confirming the entered data
and starting the game.
And of course the idea behind the game, by the way,
is that you play it together with a friend
on one of the same machine,
because it runs in the browser only
and we have no multiplayer game server behind the scenes
that would synchronize data.
So this is a game which you play together on one PC
on one loaded website.
So both players added their data on that loaded website
and then once you know that you're ready,
you start playing that game.
Later in the course, we will also learn
how you can submit data to a server
and how you can add a web server
that serves the same page to different users,
but here, it's two users on the same machine
with the same website.
And that's now the configuration area,
but one crucial element is missing here,
and that would be the overlay
where you actually enter the player name.
We have the edit buttons here
for triggering that overlay later,
but of course we also need the overlay itself.
And for this there, again, as always in HTML,
would be different ways of writing this in HTML,
but since that overlay in the end belongs
to the overall game and to that main area of the game,
I'll add it here as an aside element,
which is a good HTML element
whenever you have some complimentary content
or interaction elements that you wanna have on your page,
which is not your main content,
but which instead offers some extra information,
like a sidebar with some extra navigation
or also an overlay, which is used by parts
of your main area of content,
then the aside element is a good choice,
because as you also see here in that tool tip,
it is great for content that is a bit related to the content
around the aside element.
So it is often used for sidebars or something like that,
but we can also consider using this for an overlay.
Alternatively, we could also just use a div,
you can always fall back to a div, I guess.
So now here we have the aside element
as a wrapper for the overlay.
Inside off that overlay,
I wanna describe to the user what he or she should do
and for that, I'll add a title, a h2 element in that aside,
which marks a new section.
And here I'll just say, choose your name.
And then below that, I wanna have a form.
I want to have a form,
because I want to fetch some user input.
Now, I'll actually delete this action attribute here,
which was added automatically for me,
so that I have an empty form,
because we will, later in this module,
handle that form submission with JavaScript
and that will be something we haven't done before,
but you will learn how you can do it
and that it is fairly easy in this module.
It's one of the new things we'll dive into in this module.
Hence, at the moment, no action
or method attribute on the form
and instead inside of that form,
I know I wanna have one form control.
For styling reasons, I'll wrap it with a div,
which will become important later
or which can help us with styling later,
and in there, I then wanna have a label for my input,
where I say player name and then the input element itself
and it should be of type text,
because I wanna fetch some plain text
because I want to fetch the name of the player.
And hence, I'll also add that name attribute
and give it name as a name here,
but of course here, you could also use username
and let's maybe use that to avoid confusion
and I'll give it an ID to then also connect this input
to the label for accessibility reasons, as you learned.
And here, I'll also use username
or maybe player name, that's even more fitting.
So let's also use that here for the name attribute,
though you also could have different identifiers
for name and ID.
The two attributes are not related.
And that's now my input and now on the label
to establish that connection between label and input,
I'll add the for attribute and point at player name.
So at this ID so that we connect these two elements here
through the ID.
Now that's the input in this form
and it's the only input here,
because this form will only be
about fetching the name of a player.
Later in the course, we'll of course also see slightly
more complex forms, but here that is what we need.
And then I will add another div here
which should hold my buttons for this form
and I'll just add a div as a wrapper around these buttons
so that we can then later use the div for styling.
And then I'll have two buttons in here
and one button of course, should be for submitting the form,
so I'll add a label of confirm to it
and give the button the type, submit,
which would be the default type anyways,
but I'll still add it to make it very clear
that this is the button that should submit the form.
And the other button will receive a type of button
to overwrite the default, which again,
is that this button would also submit the form,
so that this button does now not submit the form.
If you set the type to button,
then the button, if it's inside a form,
won't submit the form.
And I'll do that,
because this button should actually just cancel
this form here, it should just basically close that overlay.
That's what I wanna do here.
And with that, we also have the general structure
of that overlay that should be presented.
Now, the last, yet extremely important thing that's missing,
is the game field itself.
Because now we spent a lot of time
on all of the configuration content,
but ultimately we wanna play a game.
And for this, we have this active game section.
Now in this section here, I wanna have my game field
in the end and for that, I'll use an ordered list,
because if you think about the tic-tac-toe game field,
it, in the end, is just a list of fields.
And it's a ordered list, because the order matters.
We need to keep track of the order to know who won.
So it's a ordered list and it's then a ordered list
with nine list items.
So here I'll then add nine list items,
maybe in blocks of three, separated by a blank line
to make it easier to read.
Other than that, this blank line has no effect.
It's just there to improve readability
and now we have nine list items here,
which we'll then use in our game.
So that will be our actual game field
and above that ordered list,
I'll add a paragraph where I wanna say, it's your turn
and then I'm gonna output the name of the player
whose turn it currently is.
And for that, I'll add a span here,
so that we have an element
which we can target with JavaScript later
to change that player named dynamically.
And after that span, I'll add an exclamation mark,
so some plain text, but an exclamation mark as a character,
and then in there, I'll have to player name
and that player name should change with every turn.
That's why we have that span.
And to then be able to select
the span conveniently in JavaScript,
I'll add an ID and set the ID to active-player-name
and then we'll be able to get access,
to get hold of that span through JavaScript
and update the value, the name inside of that span
whenever the turn changes.
Ultimately, we also wanna be able to end the game.
We wanna have a winner eventually.
And for this, I'll already add a little extra article here
above my game field,
which should say, you won, like that
and then below that, I'll add a paragraph where I say,
Click Start New Game above,
to start a new game.
And of course, when I say you won here,
then I also wanna output the name of the player.
So I'll say you won and then I'll have another span,
so that I can easily target that player name
and update that player name.
So here, I'll then also say player name
and give that an ID off winner-name, something like that.
And that's now the general content.
It's not 100% done, we'll add a couple of classes,
a couple of class attributes,
maybe a couple of IDs and other parts to this content,
but for a start, that's what we need.
Now we can also start our development server,
our live server here by right clicking on that file
and loading that into a browser
and then we should see something like that in the browser.
Again, I'm zoomed in a bit here,
otherwise it would look something like this,
but to make it a bit easier to read here on the screen,
I will zoom in.
And that is the general content,
obviously what's missing, besides all our logic,
is the styling and hence, that's what we'll do next.