Learning Goal #5
PART 1: THE SET UPRead More
Go into your “LG6_canvasjs” folder and create a new subfolder called “lesson2”. This is where you will keep all of your files for this lesson.
Open Notepad++ for the first time, go full screen, and wait for the teacher’s instructions on how to work with this new program.
With the teacher, you will create three new documents with Notepad++ called lesson2.html, style.css, and variables.js. All of these documents will be saved to your new “lesson2” folder. After saving these files, take a moment to look inside your “lesson2” folder and see the icons that make each file look different and unique.
By yourself, copy this HTML code and paste it into your “lesson2.html” file.
By yourself, copy this CSS code and paste it into your “style.css” file.
After pasting all three codes into all three files, click the SAVE ALL button at the top of Notepad++.
Open your HTML file with Chrome or Firefox and make sure you see a light blue canvas with a dark blue background.
Create a split screen between your Notepad++ and your browser display.
PART 2: DAILY DESIGNRead More
CHALLENGE #1 (Beginner):
- What happens if you remove Line #1 and Line #2?
- What happens if you change the ID?
- What happens if you change 2D to 3D?
- What happens if I change the “x” variable to “f”?
- What do each of the fillRect numbers represent?
CHALLENGE #2 (Beginner):
By copying Line 3 and pasting it into Line 4, you can create another square. However, with the same dimensions, that square will just be on top of the other one. Create a second square and move it somewhere else on the canvas by changing the left margin (1st number) and top margin (2nd number). Raise your hand when you’ve completed this.
CHALLENGE #3 (Intermediate):
Now that you have figured out how to set up new squares, try to recreate this example with four squares in four corners. Raise your hand when you’ve completed the challenge.
CHALLENGE #4 (Intermediate):
The teacher will explain how variables can be used as replacements for repeated numbers that you plan to use over and over. The challenge here will come directly from the teacher.
CHALLENGE #5 (Intermediate):
Variables with Color
CHALLENGE #6 (Intermediate):
RGB vs Hex
The teacher will explain how you can use RGB colors instead of Hex Values. Even more importantly, the teacher will show you how to use RGB for making transparent objects. The challenge here will come directly from the teacher.
CHALLENGE #7 (Advanced):
Creating a Pattern