Playing with HTML - Part 2 (Nuts & Bolts)

smoore5
Community Participant
2
1557

So, I got my module page set up and looking the way I wanted it to look

and I thought I would show just how easy it is to do something similar. For starters, I am leaning very heavily on the awesome blog post "Using JQuery without Custom Javascript" by  @jperkins ‌ and the "Ed Tech Showcase Series" by snufer‌. 

Getting Started

First thing you need to know about programming is that by and large, programmers hate to reinvent the wheel. That means that snippets of code are shared freely and serve as building blocks to creating bigger and better things. As teachers, the sharing culture is (hopefully) an integral part of your teaching experience. 

So to get started, I really liked the tabbed page example that Jeremy Perkins shows in his blog post, so I grabbed the snippet of code and got started. 

This video is currently being processed. Please try again in a few minutes.
(view in My Videos)

Now I have the tabs framework added to the page, Huzzah! But it is a small victory because it isn't really mine yet. So now to get in under the hood and start modifying. First things first, I need 5 tabs, not just 3. And I want to change their labels to Intro, Part 1, Part 2, Part 3, and Conclusion. 

This video is currently being processed. Please try again in a few minutes.
(view in My Videos)

In the next post, I'll go into how to change text colors, tab colors, and content area background colors. 

2 Comments
ysmalls
Community Champion

 @smoore5 ,  

I'm very interested to see how you got all this done, I'm a big fan of tabs but would love to see how you added color and all that other fun stuff.

smoore5
Community Participant
Author

Hey ysmalls‌! I've been deep in the weeds learning R and trying to wrangle EVAAS data for my department, so I've been a little slack on writing up the third part of this tutorial. Thanks for the nudge!