This tells the browser to go to the startGame function in the game. Next, go the tag, and change it so it looks like this. This tells your browser to go into the js folder, and find the game.js Javascript file when it loads our HTML page, because our HTML needs to use it to do its job.
You do this in the tags – paste this bit of code between the head tags. You need to add a line of code to tell your html file to go look for your Javascript file when it starts loading. That’s because you need to link your html file with your Javascript. Now that the javascript file is in place, refresh your webpage. I’ll explain what is in here a little later, but let’s get our game working first! This file is where all of the functionality for the game will go.
We can add all sorts of functionality to our web pages by adding Javascript functions.įrom the ‘code’ folder in your zip file, I want you to take the ‘ game.js ’ file and put it into the js folder in your project. We do this using another language, called Javascript ! Javascript is what we use to make web pages interactive. That is because we need to add the code that makes all the magic happen when we click these buttons. Refresh the page, and you will see that buttons and text will appear on the page.Ĭlick these buttons, and nothing will happen. This will create the buttons that we want to use for our game – which are tags.
Now that we know our website is working, create our game…ĭelete all the text between the body tags, and paste the following (if you can’t copy this, it is in a text file called ‘button.txt’ in the ‘code’ folder of the zip file you downloaded. Now you will see this! Hurray! You have made your very first webpage!! Go back to your browser and refresh Index.html (or open it again if you closed it). This will open Index in your browser and you will see a blank webpage. Type the above code structure into your Index.html file (without the ‘(comments)’, and then go back to your project folder and double click your index.html file.
Whenever you have a there must be a corresponding or your webpage won’t render correctly and you will have errors. These tags identify the start and / end of a block of code and tell the browser what to expect inside that block of code.
You’ll see that all of the have a matching with a slash. (This is where your content goes that you see on your site.) (the head is like the brain of your file. (every html file must start and end with these tags) This is where you will be designing your first webpage, using a language called HTML! Your browser will read the HTML in your file, and that will tell the browser what controls should be on your page, and what they should do.Įvery HTML file takes the same basic structure to start with: Then open the file in your text editor (NotePad or TextEdit), I use an application called Notepad ++ which is pretty cool. Right click your Index.html file, select ‘Open With’. Now your project folder is set up and should look like this: Step 2: Create your first webpage If your file does not have a browser logo then that is because it was saved as a text document and not a HTML document, just open it up and go to file -> ‘Save as’ and save it again as ‘all files’ as Index.html. Below, my Index file has the Chrome logo because this is my default browser, but yours might look like the Safari, Edge or Firefox logo if you use these. Once your file is saved as a HTML file, you can open this file in your internet browser.
If you are using Windows, you need to save this as type ‘all files’, and on a Mac it will ask you what file type you want to save the file as. Open Notepad (Windows) or TextEdit (Mac) on your computer, and save an empty file with the name ‘Index.html’. Inside this folder, create three more folders (y ou can use keyboard shortcuts to do this, press CTRL+Shift+N on a windows, or CMD+Shift+N on a Mac to create a new folder ) Create a new folder on your computer for your first project, you can name it anything you like.
The first thing to do is to get your project structure ready, and this is how we always start when creating a new website. Don’t worry if that makes no sense to you right now, everything will be explained below – so just follow the steps and create your first Flappy Birds game ! Step 1: Set up your project folders Welcome to the StephMyLife Coding Challenge ! Today you’re going to create a HTML webpage with a Javascript game that’s styled using CSS.