Wednesday, March 11, 2015

How to Customize Pages and Blog Posts With HTML, CSS, and Javascript


Hover mouse over red bars for a simple animation.

--------------------------------------
Code for the red bars in this post:

<style type="text/css">
.barstyle{width:500px;height:20px;background:red;transition:width 1s;-webkit-transition:width 1s;}
.barstyle:hover{-webkit-transition: width 1s; background: lightblue; transition: width 1s; width: 700px;}
</style>

<div class="barstyle">
</div>
--------------------------------------
I find the real trick is just to find examples of code and tweak them for what you need.
There's tons of tutorials out there, but here are some I find I refer to the most:

Here are some resources for learning how to code stuff into your web pages, including in blog posts like this one:


This one I use the most often now, especially for example templates of code.  You can just Google "w3" and it should come up as the first result.  If you're looking for something you thought of and want to search quickly, just Google "w3 [what you want to find]".  For example, you might want to find out how to create a custom table for your blog post.  For that, Google "w3 table".  The first link should take you to this page, which also links to a few interactive, modifiable template examples, like this one.

Google:  "w3 [what you want to find]". 

For example, to create a custom table, Google:  "w3 table". 

And to create an image with a link when you click on it, Google:  "w3 image link".


This is one of the first sites I used to use to learn and test creating a webpage and see the results in real time.  The step-by-step prompts and checks are nice, and remind me of the more recent khanacademy coding tutorials and interactive hour of code.



Similar to w3schools above, and is more lessons-based.  Good for detailed explanations.  But if you just want a refresher or the gist of things, I recommend w3schools.com.  Just Google it.



Some larger templates/examples than those given at w3schools.com.



http://www.kompozer.net/
The download-able program can be used to make and edit an html file just like a word document.  Easy-to-create pages, but you'll likely stick to using this program if you want to make changes to the same file in the future, especially for complicated files, because the code that Kompozer automatically generates isn't always very neatly organized.


An old website I found, from the University of Toronto.  I personally don't use this one, but it goes to show how much free information is out there on the web.  Looking up course materials posted online, such as problem questions (with answers) from courses similar to yours can be a big help to studying beforehand.  Or in this case, nice free information.

No go on a make your own custom pages!

You can see some of my own coded examples at the end of almost all of my "Many Homomnems" posts. (Look for the button for self-testing.)

Here's a field of animation for you to play with:

----------------------------------------------------------

OTHER LINKS: