June 5th – W3Schools

In your brief time as a Web Developer you’ll come across an awesome resource called W3Schools – bookmark it.  W3Schools has been embed into all my students heads as a great resource to look up when struggling or looking for inspiration.  A general Google search of HTML will get you here, but unlike some sites – this deserves to be at the top.

June 5th – W3Schools

W3Schools.com was something I stumbled upon years ago and it has withstood the test of time.  When I first logged on, it was a basic reference with a little guide, but now they’ve created a curriculum that students (young and old) can venture through and achieve a certificate for completion at the end.  W3Schools progresses from HTML to CSS to JavaScript and goes even higher into JSON, jQuery and server side PHP.

The website has a built in code editor that you can use for simple HTML and internal or embedded CSS.  Take a look and earn a certificate or two!


June 4th – CodePen

Back on March 11th I wrote about Thimble, a great product from Mozilla that you can include CSS and JavaScript files.  Recently I found out about another such product with a few added features – CodePen.

June 4th – CodePen

CodePen is a simple online editor that allows you to create HTML, CSS and JavaScript all on the same page.  CodePen comes with a few more options, in the example it shows you how to include SCSS – the use of variables in CSS, but really you just need to play with it to see if it suits your needs.

This slideshow requires JavaScript.

In addition to the SCSS you can change the layout, see the individual html, css and js pages and a dozen other smart design things that help budding web designers.

CodePen is free to sign up (might need to scroll down the page to see the free option) so sign up, copy and paste some of your existing HTML pages in and see what CodePen can do for you!

March 13th – A Week With Google Slides Day 2

As we continue in the “A Week With Series…” with Google Slides, I’m going to discuss a tool that isn’t specific to Slides, but has the capability in all presentation programs.  Not only that, but this tool can teach students about website design and help them to organize and storyboard a website for themselves (and for you if you can’t start HTML right now!)

March 13th – “A Week With…” Google Slides

7 years ago, as I was teaching elementary school, I wanted to teach them about HTML, but never found they had the attention spans, nor was it the right time.  The iPhone had just come out so websites were part of our everyday life, but not in our hands constantly.  Plus I had only had these students for a year or two so I didn’t know what their tech skills were.  I jumped into TextEdit on the Mac and talked about brackets and opening and closing, correct line spacing and hyperlinks – the kids loved it, but when it came time to do it, they struggled.  Again, there were a lot of factors so I stepped back and decided to look at a tool that they knew, PowerPoint, and how we could use hyperlinks to teach website design.

In every product available you can select (or highlight) a word or phrase and create a hyperlink to another page (and in another “A Week With…” series we could do that within Google Docs), but it doesn’t feel like anything is changing.  With presentation programs you feel like things are shifting because you are jumping to a new slide with new information.

Hyperlinks in Google Slides
Links within Google Slides

To create a link within your presentation, simply select (or highlight) the word and create a hyperlink like you normally would, but notice the “Slides in this Presentation” option.  You can select the next slide, previous slide or the title of certain slides.

In my class 7 years ago, I had the students develop an “About Me” project with 3 slides about themselves, a “home page” and a landing/navigation page.  It was simple enough for the students to use the tool and helped me find a common language for when we moved on to more complicated HTML.

This is also a great tool for presentations with adults and having a “table of contents” so they can easily jump around, they’ll thank you for being prepared and know that you’ve thought about the lesson/training you’re about to deliver.

March 11th – Thimble

The Internet can be very powerful.  If we are being honest with ourselves, it is the greatest source of information for young people today.  Wikipedia and YouTube seem to be the most visited sites, then students will “Google It” to find out more.  There is a lot of teaching into vetting resources and being able to discern good from bad when you are dealing with the Internet and the information posted.  A lot of great organizations are involved in teaching our children about Internet safety (like Common Sense Media) but I have found that even at Grades 4 and 5, students have the ability to create a basic HTML site, and often that leads to great conversations about “if you can create a website, so can everyone else, so think about what is being posted!”

January 6th I wrote about the power of HTML and how it is a new skill that everyone should learn.  February 21st I wrote about a cool hack to use Google Drive as a host for websites.  Today I’ll introduce you to a great product from Mozilla, the makers of Firefox.

March 11th – Thimble

Mozilla makes some really solid Internet awareness stuff (I’ll talk about a few of those later) – but with them being involved in Web Browsers and Internet Safety, they make a really powerful Web Editor as well.  Thimble is free to use and has the ability to use Javascript and CSS in your basic HTML file to add some style and interactivity.  Thimble is simple, easy to use and has some great examples.  Using W3Schools.com as a guide, you can do some great stuff and just like on January 6th – teach yourself a new skill and allow your students to express themselves in a brand new way!

This slideshow requires JavaScript.

January 21st – A Week With Google Docs Day 5

One of the Great things about Google Docs is that the document itself is a website which you are essentially editing with a automatic save feature, then able to share.  The next two post are going to be about making the Document more of a webpage and being able to create a table of contents like Wikipedia.

January 21st – “A Week With…” Google Docs and Headings

I can safely assume most people have been to a wikipedia page.  Wikipedia is the famous online encyclopedia that anyone can edit, but everyone quickly learned the structure of the page with the Table of Contents at the top of the page (after the introductory paragraph) which you could click and it would take you down to the selected section.  Well, it’s not so hard to do in Google Docs and have your students create a Google Doc of a topic with a similar structure and create your own Wikipedia (just be aware of copyrights…)

You may have noticed a section on the menu bar that is listed as “Heading 2” or “Normal Text” or “Title” – those are actually HTML tags that Google Docs built in and you can link to.  Most things will be labeled as “Normal Text” but highlight (or select) the heading in your paper, then select Header 2 (for a higher level) or Header 3 (for one step in, etc…).  In HTML <h1> through <h6> give a default boldness, size difference and anchor to the page – The Table of Contents, when you insert it, automatically finds those headers and creates one for you.  My suggestion?  Be creative with it!  A Google Doc can be really helpful to share for class resources and has the semester goes along, you can easy create other headers as Units or whatever your class structure might be!

Headings in Google Docs
Wikipedia Entry from Denver Broncos to show Headers and Table of Contents

January 7th – Exploring Computer Science

Computer Science in high schools in 2015/2016 looks very different than Computer Science in high schools in 2005.  Seems like a silly statement, but even in 2005 the future was somewhat uncertain.  Now students need to be prepared for the future and the future is in their hands (I’m talking about Smartphones of course, not getting philosophical).

With the pushes by Code.org and CSTA, their are a dozen “canned curriculums” for Computer Science teachers (and others) to choose from.  If you’re in a big city there is also the possibility of organizations that will partner with your school to teach some basic concepts.  These are all great, but remember, every student and student community is unique and you have to unpack the “canned curriculum” to meet your students.

January 7th, 2016 – Exploring Computer Science

Exploring Computer Science (ECS) is one of the original national CS curriculums available.  Sponsored by Code.org, ECS was born from the book Stuck in the Shallow End by Jane Margolis.  The book was a research project of three LA School District high schools to find out why more women aren’t involved in Computer Science, and they found that women AND minorities aren’t getting involved and decided to change that.

Screen Shot 2016-01-12 at 11.53.08 AM
Exploring Computer Science (ECS) Homepage taken January 12th

Exploring Computer Science focuses on Inquiry, Equity and Computer Science concepts to reach a new generation of students.  It’s a great starting point for people who are new and would like some guide to teach Computer Science to their students.  The first 2 units can be largely done without computers so you can figure out the computer lab schedule or raise the funding in the meantime.  The third unit is focused on HTML and the fourth on Programming in Scratch.  The units afterward are Data and Robotics, but the focus is really on the first 4 units and that builds a nice foundation for students of any level.  As I’m constantly telling my students – “you are in kindergarten again, you are developing new skills and that takes practice” and of course “we have to start somewhere!”

January 6th – HTML

The power of HTML cannot be understated.  The constant conversation in Computer Science is what “language” do you start with?  Scratch is an easy answer for elementary school age students, but what about a high schooler that is way beyond that kiddie stuff?

The conversation I have 18 times a day with staff members is that “kids grew up with this technology”.  I have teachers shocked how I’m able to guide students through projects using Google Sites or Drive (something they might struggle with).  Well, although students are a lot more adapt at using Facebook and other social media sites, there are certain things that they inherently have picked up from years on the internet.

January 6th, 2016 – Basic HTML

There are a dozen ways and even more opinions on how to teach HTML, the fact is all of them are basically correct, we just need exposure to HTML.  Sites like w3schools and codecademy  teach the basics but all in their in-page editors (inside of their webpage) but you can work with HTML on any computer with NotePad (PC’s) or TextEdit (Mac’s).  However, this post isn’t about that (maybe a future one will be) but this is encouraging people to reach out and connect with their students.  Meet them where they are and within a few minutes of trying to figure out a basic webpage, it will appear in your browser and your students will have the very same excited look on their faces.  Think about having that 10 page paper be a website with multiple webpages as the themes – it’s all just organization and quality of writing.  Have that history essay mimic a wikipedia page with dozens of sources as links.  In our foreign language class, have students make <tables> on conjugating verbs.Hey, you might learn something too…

Screen Shot 2016-01-12 at 11.38.51 AM
Homepage of W3Schools taken January 12th