A couple of weeks ago, I posted a code.org Halloween html project for you to try. Playing around with it some more myself, I wasn't super happy with the instructions provided, assuming some of you had no prior html programming experience. So, I decided to create my own series of html tutorials, where I'll give you a link to my sandbox blog as well, include the code snippet in blog posts here. You'll see from this sandbox site, an explanation why it's good to get into the habit early, of always creating some sort of practice environment, especially when you're first learning, so you have safe ways to change code, while still keeping your original effort that may work, but you want to add new code to it that you aren't sure will work or how it will affect your earlier programming.
Back to this week's html project I posted to the sandbox, I made a simple Thanksgiving e-card that includes an image I downloaded and posted to imgur and I created an html link reference to a past Google Doodle. The biggest challenge when html programming is making sure you have a good html editor where you can execute your code to test as you go along in your web browser (I use Sublime -- it's free!) and somewhere to "host" images and files you want to reference by url link within your html code (in this case, I used imgur and I'll use github for future javascript projects).
And finally, the original Halloween code.org project came from a site, Thinkful, that digging around, I found had a link to a pretty nice css, html, javascript tutorial
Hope you have a great Thanksgiving break -- here's the html code I used to build my sandbox card that all you need to do is copy and paste into your weebly or blogger html/css/javascript gadget (blogger) or element (Weebly). Try updating the <p> text, "img src" and/or "a href" references (tags) to other url image/video links to make it your own!
<!doctype html>
<h1> Happy Thanksgiving! </h1>
<img src="http://i.imgur.com/KcJDVRz.jpg" />
<p> Spread the love, all creatures great and small! </p>
<a href="https://www.youtube.com/watch?v=oGspoOoK69s" target="_blank"><div>click here to get your present</div></a>
</!doctype>
No comments:
Post a Comment