| layout | default |
|---|
Now we are going to write some code outside of Codecademy.
You should have a projects folder in your home directory, it's good practice to create all your different projects in one place on your PC that you can find easily.
In your projects folder:
- create a folder called RedAndGreen
- change into the folder RedAndGreen using
cd RedAndGreen - initialize it as a git repository using this command
git init
In GitHub create a new repository called 'RedAndGreen':
- to do that click on the + sign left from your profile name
- now select 'New repository'
- enter the repository name 'RedAndGreen'
- now click 'Create repository'
You will be presented with a few different setup options, you need to follow the instructions under:
...or push an existing repository from the command line
the parameters will be specific to your environment and you can copy and paste them into your RedAndGreen local directory in the terminal.
The command would look like this, with your own git username:
git remote add origin git@github.com:<username>/RedAndGreen.git
As you do each task create the files in the 'RedAndGreen' folder.
After each task remember to commit your changes using git.
We'll be making some web pages with HTML, CSS, and JavaScript. Have a quick look at the web triangle for some information about the structure of web pages.
Your first task is to create red and green blocks using HTML and CSS, and push your work to GitHub. For task 2 you'll write some JavaScript to colour the squares when you click buttons. For task 3, you'll build on that by using two buttons and having one square changing colours.
- Task 1: create red and green blocks
- Task 2: colour the block
- Task 3: one block changing colours
Let's publish your code to a website using GitHub Pages, so that you can easily demo your work.
Add a file called index.html. Inside it, make a list of links to the pages you made from task 1, 2, and 3. Add some CSS to make it look more interesting. You might want to look at list-style and list-style-type. In task1.html, task2.html, and task3.html add a (hyper)link back to index.html.
Let's learn a bit more about another part of git: ignoring files.
For task 4, you're going to use one button to change the square's colours back and forth. For task 5, you're going to (by writing more code!). For task 6, you're going to write JavaScript in a slightly different way, and test changing colours.
- Task 4: one button to change the blocks's colours
- Task 5: test your function
- Task 6: test changing colours
Update your index.html to link to your task 4, 5, and 6 pages. Remember to add a link to task4.html, task5.html, and task6.html that links back to index.html.
Now let's republish your work to the web using GitHub Pages.
In Task 7 you'll be adding blocks to the page using JavaScript. For task 8, you're going to start writing a framework to make testing your code easier, and you'll write code that lets you display test results. For task 9, you'll expand on your framework and end up with your own Unit Testing Framework.
- Task 7: add blocks to the page
- Task 8: display test results
- Task 9: Unit Testing Framework
Now head over to 53 functions and write some functions. You should be using the Unit testing framework you created in Task 7 & 8 to test the first 5 functions.