Playing with HTML - Part 2 (Nuts & Bolts)

4 2 638

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‌ 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. 

Community Advocate
Community Advocate,  

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.


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!

About the Author
I have been in education for 20 years. My career started as a middle school math and science teacher and then moved to teaching science at the high school level. After 10 years, I went back to school and earned my Master's Degree in Education Media with a focus on Instructional Technology. Now I'm back in the (virtual) classroom for the start of the 2020-2021 school year!