U3 Challenge Decision

Exploring Computer Science Unit 3 Best Practices
41

I am going to work on the intro HTML lesson. Students will go through the different tutorials and eventually create a multiple page “about me” “web site”. We’ll also focus on using the basic HTML to edit pages on the cookie-cutter sites.

42

I am going to do Unit 3 Day 6-7 Images.

43

Honestly, I am having trouble trying to figure out how to use the one page template on line. I printed it out to follow the outline. If I could get written instructions it would be a tremendous help. I did it for Unit 1.

, but it is not registering for me for unit 2.

44

Hi Lerah

Are you just asking how to get your own copy of the template? If you go back to the original file you can to File->Make a Copy and then you will end up with your own copy in your google drive. The overview is just meant to give a more detailed outline to help another teacher who might want to use your lesson resources.

If you still have questions please let me know. Happy to help!

-Dani

45

I will be working on Day 14 - HTML links
Day 14-HTML Links.docx (176.9 KB)

46

1: Open the file from the link in the Challenge Description. It should be in Goolge Docs in View Only mode.
2: Go to File–>Make a Copy. You should have a file called Copy of Challenge - 1 Page Lesson Overview Template" in your Google Drive.
3: Make any necessary changes to file in Google Docs or download the file and open in Word.
4: If using Word - Reply to a Forum post and use the upload icon on the menu bar to upload your file. TestofTemplate.docx (695.3 KB)

If using Google Docs, get a sharable link from the share button in your document. Reply to a Forum post and use the link icon to insert the hyperlink. test file Make sure you share in view only mode so no can make changes to your original.

Hope this helps!

Andrea

47

Day 3-4,5: Basic HTML - Paragraph, Header, Strong, and EM Tags

48

Thanks Andrea. I will try it soon. Be blessed.

49

I did mine on the final unit project (day 22-25). It made sense logistically but also was where my students showed a variety of knowledge/skills. I didn’t work with anyone but would be open to it last year.

50

HTML Lesson will begin with teaching the basic tags and I will progress to teaching the image and link tags hoping to develop interest in seeing how linking pages creates a website…

51

I have limited experience with HTML, and haven’t used it in years (since college), so as a refresher, I will do Days 3-5.

52

Lesson ~ CSS Instructional Days 8-10: Inline CSS vs. Embedded CSS
UNIT3 Overview
Students will learn how to apply inline CSS coding to format an existing page they have previously created. They will learn fundamentals such as margin-left, margin-right, text-indent, font- face;, font-size, color, font-weight, and alignment of images by adding coding with

tag or tags, even

tags.
We will start off learning the vocabulary and syntax as a large group-teacher led (Day 8) then on (Day 9) students will apply these formatting rules to a practice assignment. (see handout butterflys)
(Day 10) students will learn to move the coding to the head portion of their coding and creating a section where all of the CSS coding will be placed. (Embedded) The students will than work on assignment titled “Animals” – see attached

Students will be assigned a (Challenge Activity) to apply both inline and embedded CSS to an existing page. This place will also require the adding of “classes”. (See handout titled – Thanksgiving)
Lesson Summary
● Journal Entry: Explain the difference between Inline CSS and Embedded CSS. How are they different the HTML coding?
● Assignment: -Students will write three paragraphs together as a class and change the formatting style – hence being introduced to the new vocabulary of CSS. (Students will also be referred to the Appendix of the text book where all of the syntax information is located as a resource- HTML5 and CSS – seventh edition by Shelly Cashman Series)
● Further Practice: -Students will create a six paragraph page on an animal of their choice.
● Students will add classes to their animal page.

CS Content
Students will use critical thinking skills (inquiry) to add CSS coding to format an existing page they have previously created.

Students will practice coding conversions taught from the previous day by completing a teacher led discussion and completing a newly formatted web page thus demonstrating their understanding of the difference between Inline CSS and Embedded CSS

		Objectives

Students will be able to:
● Format existing web pages
by adding Inline CSS coding
● Format existing web pages
by adding Embedded CSS
coding
Materials and Prep
● Journal Writing, and Discussion (lecture notes)
● Text Book
● Animal Worksheet
● Notepad++
Resources
Student Documents
● CSS Handout
● Text book – HTML5 and CSS – Shelly Cashman Series
● W3schools.com
● Khan Academy
● CodeCademy
● JSFiddle
● HTML Dog

Assessment
● Butterfly Page
● Animal Page – Classes
● CSS Worksheet –W3C
Notes

The information in this lesson is difficult for students to grasp. Recommend teacher lead.
Note: One syntax error will cause the page to crash

53

Challenge-3lesson.docx (23.8 KB)

Thanksgiving.docx (57.7 KB)
Butterflys.docx (41.1 KB)
reflections questions.docx (14.1 KB)
ANIMAL.docx (20.6 KB)

54

I am working on lesson Day 6-7 HTML - images. I need some review prior to showing students.

55

I grouped days 3-5, 8-10 and 14 together to teach just the HTML separate from the other styles. Then gave extra credit for them to research the other styles and codes to teach something new to the students. Do to the fact I myself felt overwhelmed (not being a “CS major”), and some students already knew a lot more than I did. So maybe in the following years after I feel better I will add that in to this introduction course. But attached are the handouts I gave and created.

This didn’t take 7 days… it is just the notes of what we went through together in class, and what I posted for kids that missed class or needed to hear explanations again I had handouts for them… so I wouldn’t label any of theses as day 1, day 2 material… it is just the flow of things. But I will insert them into this document the order I went in. If there is any questions that you have that may not be spelled out in the documents let me know. We did a gallery walk at the end and students graded each others work, left post-its on the computers with suggestions and accolades. Then students handed into me a snap shot of their HTML page(s) and also the code file (txt)… so I could keep it on record for samples next year and it was an easy way for me to look up codes on CSS and what they did to create things for those that have been working on computers a lot long than me :persevere:

Unit 3-basic HTML
https://drive.google.com/file/d/0Bx-QmM1Gz8UvQzRqLXI1XzE4VXc/view?usp=sharing

Unit 3-basic HTML first print out
https://drive.google.com/file/d/0Bx-QmM1Gz8Uvcks4bF9vZTFLSG8/view?usp=sharing

Basic HTML part II
https://drive.google.com/file/d/0Bx-QmM1Gz8UvZ09jUEFWVWRrXzA/view?usp=sharing

HTML #3 picture insert
https://drive.google.com/file/d/0Bx-QmM1Gz8Uvb05KeFJ3NWQ2U0U/view?usp=sharing

Intro page for final project #3
https://drive.google.com/file/d/0Bx-QmM1Gz8UvQUxSUmk0by1xbUU/view?usp=sharing

first page add on’s
https://drive.google.com/file/d/0Bx-QmM1Gz8UvM3VGRTZKNEd1NEE/view?usp=sharing

Table This
https://drive.google.com/file/d/0Bx-QmM1Gz8UvMzNtNGV5ZUkzbnM/view?usp=sharing

56

I am going to work on the lesson Day 14-HTML &CSS Create Your Own Web Page.

57

Day 14- HTML and CSS: Create Your Own Webpage

58

Here is my lesson for days 15-16

1 Like
59

I combined CSS into multiple days since I am not as familiar with it and needed extra practice myself. I made it very clear to my students that we were learning CSS together. Some students were frustrated because they wanted an Expert to just answer their questions and solve their problems and move on. When they got stuck, I used that as an opportunity to remind them of the problem solving process. They began using the web to find answers to their issues more and started relying on me less. I explained to them that this is what real programmers do as well when they are stuck; they look at sample code and try to figure out their problem. Since I had my students coding their webpages in WordPad, they received excellent practice creating and managing a separate CSS document. A colleague of mine introduced me to Editey (http://www.editey.com/) and this has made life much easier for me and my students since you can A.) Use Google Docs to write HTML B.) see your changes in a preview pane AND see your CSS and JS and HTML together in one place. C) Makes it super easy to publish their work to the web, essentially it turns Google Drive into a Web Server. The URL’s it generates are gross and super long, but you can teach them to fix that with tiny url.

1 Like
60

Great connection to Unit 2! As students realize they have the tools for learning, they will be more independent and take more academic risks. This will transfer to other units in ECS and other content areas.

Andrea