Happy boo-lated, err, "belated" Halloween! Did you notice the 6 cool Google Doodles and Google + photo editing "halloweenify"? Check 'em out.
Code.org also got into the spirit, posting spooky css and html code snippets ready to add to your own html code, which you can find in your blog html widget or Weebly css/html edit code element. For those of you who've taken my app building class, remember how we embedded your Scratch project into the Weebly mobile app? Or when we took a look at adding "feeding the fishes" code from this website?
The "spooky" code snippets take you one step further; rather than "embedding" html code, you need to do a little programming, to modify the existing html/css code on your blog or Weebly project. I do really like the Weebly code editor, so I'm stepping you through this project using it to build this example, starting from the Design>edit html/css section.
For steps 1, 2, and 4, you'll copy and paste the code snippet in the "CSS>main style - css" section of the code (remember, look for the "comments" within the code that tell you what section is what). Step 3 requires you create an actual Javascript file that you will call within the code from Step 4. To note: when you copy and paste from Scratch or the Bowman site, the embed code already contains a link to the reference js file. Now, you get to create your own! To do this, copy the code from Step 3 into a Notepad file (text file), and "save as", adding .js to the end of the file name. When you do this, you'll see that you'll get a file with a large "JS" icon on it! Then, you go into your Weebly code editor (design> edit html/css), and on the Left side bar, click on add new file, then import this new js file. You'll see in Step 4, it "calls" (references) as js file:
: <script src="main.js"></script>
Play around with it! I plan to work on a Thanksgiving project to add to this blog, so stay tuned ;)
No comments:
Post a Comment