U3 Day 3-4: PD Discussion Topic

U3 Day 3-4: PD Discussion Topic

I’m definitely NOT going to use jsfiddle until my students are more comfortable with html. Once they have the basics, I can see where this format would be useful in showing how web pages are no longer just html documents that link to other pages, but an interactive, dynamic environment where anything is possible. I’ll also be using Khan Academy’s video tutorials for students who want a video to learn by.

Students can incorporate their culture as they create web pages. I plan to have specific items they need to include (like headings, paragraphs, list, line breaks, etc.) but allow them to choose their specific topic or content. the jsfiddle looks very confusing to me and I would be interested in working with this during a Saturday session with people who have used it before. But then again, I have never worked with html either…:frowning:

I think I will ask the students to develop a web page about their culture. We can discuss as a group suggestions for what the home page might contain.

When my students completed this assignment, they had specific guidelines to complete when creating their HTML. I first used a journal entry for them to express their personal choice of what kind of web page the would create. Then they had to create a storyboard of that and reiterate what their website was about. Finally, they have to create that, based off of their journal entry and storyboard drawn. Then I made them print out their code and find the required elements by looking for the corresponding tags of each requirement. (a href tag - find it in their code and highlight it)

1 Like

I will have the students choose a topic for their webpage based on their interests.

I’m not sure what I’m going to do, but wish there was more content available for me to learn more about the subject matter. I feel like there are a lot of teaching strategies, but very little content to help teachers teach. Maybe I’m missing something, so please point it out.

I like the idea of letting the students work through Code Academy for a portion of the lesson as they get used to working with HTML. I especially like this idea for my students with accommodations as it would be a great resource for extra practice. I would like to have the students create a simplified resume using HTML, this way they can include culture/information about themselves.

1 Like

hi @dzulkiewski. I felt the same way when I first looked at the lesson. I then realized that the “Supplies” section of this page: https://studio.code.org/s/ECSPD3-Unit3/stage/5/puzzle/3
listed a few different sites that were great for me to dig deeper into understanding html.
I got my students onto Codecademy and they were racing through the lessons!
Hope that helps! =D

Agreed @ablair! My students with accommodations told me that they loved using the site!

I have just been building a page with the students about getting to know them, allowing them to express themselves. I came up with questions and each day they have changed their information to include the tags.

Im feeling the same way. I have reached out to a local tech person that has given me email tips and tricks to create lessons…but I was super frustrated with CSS. Don’t feel confident with that one AT all.

I introduced the unit with KWL. They were given post-its to write down their responses to the K and W. We made a chart and put it up on the board. Then we went through the basic tags and created a sample webpage. Students were instructed to go to http://w3schools.com/ and read the tutorials.
They did the "Try it "with every example. I gave them a rubric to use for creating their own website with required tags. I gave extra credit for those who could incorporate CSS. We will have a gallery walk at the end of the lesson and then to close it out we picked up the L from the KWL chart that we prepared. Wach student was given the opportunity to do a topic of their choosing,

1 Like

I think I will use a video I found on powermylearning.org that teaches html.

I would do some sort of an “about me” page with a focus on their interests.

After laying the foundation using some of the activities in the ECS booklet, I have decided that my main focus for teaching HTML is the actual coding portion. I am having a hard enough time getting them to understand how HTML works, and I am leaving it up to the students to develop their own content based on their interests as long as it is school appropriate, but my main focus is on the code. Once they learn that, they can substitute whatever content they wish.

Because of scheduling and calendar concerns in my building, I had to adjust the timeline for teaching the HTML portion out of sequence. I started kids off using the html tutorials of their choice for two weeks. Here is a list of what I allowed them to use:

For the first intro to HTML, be sure and check out the Erase All Kittens activity. It’s free for the moment, but they are adding licensing and more levels and content. I have used this with Grades 2-12, and even the jaded HS students really like it:


Then we formalized things a bit and kids did online, self-paced tutorials from the following sites:

HTML & CSS for Beginners | Codecademy

Intro to HTML/CSS: Making webpages | Computer programming | Khan Academy

Code Avengers: course descriptions and pricing

HTML5 & CSS3 Fundamentals: Development for Absolute Beginners

After this, I did demos and mini-lessons during class using MS Wordpad and taught them how to use code snippets from W3 schools and Quackit. Kids are building their final project using real code in Wordpad and linking to HTML pages on their computer rather than having to publish a site on the internet. My school uses Google Apps for Education, so I do plan to show them Google Sites and actually have them import their code to publish at that point, or allow them to build a different site using a template.


I plan on giving my students a lot of leeway about content as long as it is appropriate to share in class. Whatever they choose, it has to be suited for “mark up.”


Some different topics for students to select could be the following:

  • Favorite food
  • Favorite subject in school
  • Favorite place visited and the place you want to visit
  • Plan to save the world
  • Plan after high school
  • Plan during high school
  • The most important issue they have
  • The least important issue
  • Who are their hero and heroine

To encourage students to add their culture I would ask them to use any of the topics listed above and their own to create a biographical webpage

1 Like

I don’t see the need to use js fiddle vs notepad. I may play with it a little for wxternal style sheets.

Hi Victoria,

JSFiddle is just a recommendation for teachers that may not know where to start. You can use whatever editor you would like. I would suggest checking out the collaborative feature of JSFiddle though its pretty cool for group projects where students might have to work at home for some part of the project.