Teacher Takeaways from a Novice Coder

What I was thinking…

I love Web 2.0 tools. I know how to blog and make websites, but until last semester, I had absolutely no idea about how web pages actually worked. I know you don’t need to be able to code to make a lot of awesome stuff online. That doesn’t mean I wasn’t curious. So, when I saw my MLIS program at San Jose State offered a beginning CSS class, I signed up.

What I Learned…

Like any discipline of study, the more I found out, the more I knew I would never know. That makes sense, right? This one little class made me see there is a big world of coding out there. I only had a tiny glimpse of it.

Before I get into it, let me explain why I think a bit of coding knowledge is useful to teachers. I’ve occasionally used the HTML button available on most content management systems, such as WordPress, Blogger, or Google Sites. There is even an HTML button on our district’s learning management system, NEO. However, in my regular teaching life, I didn’t have much use for it. I could change the size of an image, and I could paste the code I copied from other places. That was about it.

edit_post__read_write_wonder_-_wordpress_com

Now, I have more tools to help me customize my web pages. Also, I have a better chance of fixing the inevitable glitches.  At least I know the vocabulary if I need to turn to Google to help me with a problem.

NOTE: Even though the class I took was about CSS, we started with HTML. I’ll save the CSS highlights for a different blog post.

Practical HTML Tips for Neophytes

1. HTML vs. CSS: HTML provides the structure of the page. You use HTML code to decide things like what you want in the sidebar and the content of the footer. HTML is where you type what you want your page to say. CSS (Cascading Style Sheets) is the code you use to make the page look the way you want. CSS is where you get to be artistic and choose the colors, fonts, shapes, etc.html-vs-css

2. How to Find the Source Code of a Page: Using Google Chrome, you can see the source code of almost any web page you are visiting. Simply right click (or control / click) and select View Page Source. Go ahead and give it a try right now!
screen-shot-2017-01-05-at-6-41-36-am

Honestly, much of the code in the Page Source is still out of my range, but I can at least figure out most of what I need. I find that rather thrilling (nerd alert).view-source_https___amyjmcmillan_wordpress_com_2
You may also want to try selecting Inspect—directly below View Page Source. Inspect allows you to select specific parts of the web page to see particular sections of code. You can also see the CSS and the sizing options for mobile devices. Even cooler, you can make temporary modifications to the code to see what happens to the page.

Right Click and Inspect (in Chrome)

screen-shot-2017-01-08-at-5-21-59-pm

3. Helpful HTML Elements to Remember:

<p>and</p> show the opening and closing of a paragraph.

<br> allows you to put a space between chunks of text.

<h1>and</h1>are structural markers to organize text as header 1. They happen to make the text large and bold but that is not the purpose. You change the way the text works with CSS. The same goes for <h2>and</h2> and <h3>and</h3> and so on.

<li>and</li>signal the beginning and ending of a list.

<ol>and</ol>stand for an ordered list, as in numbers.

<ul>and</ul>stand for unordered list, as in bullet points.

<img> means an image is linked here. I like to note the height and width (see above screenshot) as a way to understand why it is too big or too small (or just right).

Important: If you want to adjust the size of an image, do it on your computer, not in the code. With a Mac, download the image and use Preview to adjust the size. Of course, it is better to go smaller. When you try to make an image bigger, it might get distorted.

<a> means something will be linked here:

The full code for a hyperlink looks like this:
<a href=”https://amyjmcmillan.wordpress.com”>Read Write Wonder</a>

If you want the link to open a new page, add target=”_blank” after the URL:

<a href=”https://amyjmcmillan.wordpress.com&#8221; target=”_blank”>Read Write Wonder</a>

If you want people to be able to hover over the link and see text describing what they will find there, add title=”Name of Site” after the URL:

<a href=”https://amyjmcmillan.wordpress.com&#8221; target=”_blank” title=”Read Write Wonder”>Read Write Wonder</a>

A Real-Life Example

If you are interested, here is the site I created for my final project: EdTech for ELA  It probably took me 150 hours to code. I was dreaming it by the end. Far from perfect, it is still pretty good for my first attempt. Without apologizing for the site too much, it is more about its functionality and aesthetics than the actual content. The content came last, even though that hurt my writing teacher’s heart.

Screenshot from a Web Page I Built for class

screen-shot-2017-01-08-at-4-07-35-pm

Take a Look at the Code

screen_shot_2017-01-08_at_4_00_12_pm_1

By the way, the images in the above screen shot are list items because that allowed me to make a dynamic slide show. The image in the screenshot above is one of four.

You can see how I added links to the right sidebar in the code below:

screen_shot_2017-01-08_at_4_00_24_pm

Recommended Resources

  • w3schools.com: I could not live without the tutorials on w3schools. From simple HTML to thorny CSS issues, w3schools will continue to be my go-to place for help.
  • Fillerama.io: You know how websites use Latin filler as a placeholder for your content? Fillerama.io has filler text from popular (nerdy) shows like Futurama, Arrested Development, and Dr. Who. Fun stuff like this goes a long way to combat the tedium of the coder’s life.

Most of the time, you can simply Google the coding question. The Internet will answer, often with a YouTube video included.

Next Steps

I hope to find the time to write another blog post on this topic. I didn’t have time to even bring up what I learned about CSS, most importantly, how to choose colors, images, and fonts on the web.

In regard to teaching, basic knowledge of both HTML and the CSS has already helped me—pretty much daily—with the work on I do on our learning management system. I expect I will be able to teach my students a few things when we start blogging and building digital portfolios in the spring.

In Support of Lifelong Learning: Last week, one of my students was using Chrome’s Inspect tool to play around with the code on my Studying The Outsiders website. I didn’t panic because I knew what he was doing. In fact, I was able to compliment that student on his coding knowledge. Talk about looking surprised—the student was speechless!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s