I have found flow in teaching html and css to my students.  It’s taken a few years, but now I feel that my students really get an in depth understanding of the basics of css and html through this unit of study. What’s more is they get life lessons of the growth mindset and troubleshooting their errors. Recently when a student was stuck on a problem with his code, I quickly went over and guided him through the process of troubleshooting his code. He looked at my astounded and asked, “How do you know so much?!?” He said his question loudly to the whole class, and so all eyes were fixed on me when I responded that I have made more mistakes than all the people in the room, and every time I make a mistake, I learn from it. I also learn from the mistakes of all of my students.” I was pleased that I got the chance to share with my students that I make mistakes often while also teaching a life lesson that it is because of mistakes that I have become competent at this craft.

This past month my students created the most amazing websites. I have found a great method in teaching html and css– thanks to Khan Academy and Microsoft’s Choose to Code. This year Microsoft generously donated Azure passes to my middle school students so that their websites were actually live. This helped create a sense of ownership and pride. In past years, students created websites but they were not actually live on the internet. Having the web page on the net, helped authenticate their learning.

Khan Academy’s Picture Perfect Trip Challenge

After going through basic lessons in Khan Academy, I introduced students to Choose to Code and gave them Azure accounts in which we made an actual website. After about a week learning Choose to Code, students began coding their own websites. After which they scored themselves on their very basic websites, and then asked questions on how to improve their sites. The project wasn’t finished though, it really was just beginning.

Visual Studio Code as an extension in Azure makes coding visual.

Students were excited that their projects were live and wanted to keep working on them. So I designed a 4 week unit based on continuing to learn new material, and using the learned material on their websites. Khan Academy has a long series of small 4-10 minute video lessons followed by a challenge. Every day we would watch a video lesson together as a class. Then students would work on the challenge. This took less than half the class period each day. After they finished the challenge they were to include that element in their coding for their actual website. After which they could learn on their own to make wonderful websites.

Student’s example of her code: html on left, css on the right.

Students had questions about coding, and instead of telling them their answers, I gave them resources to go find. Some students went to Dash by General Assembly to learn on their own. Their incentive was having an incredible website. These students made paragraphs with padding so the text didn’t span the entire webpage and also learned how to create excellent banners which are resizable on their sites. Other students looked up coding online or watched Youtube videos on how to improve their websites. One student figured out how to code the small icon on the upper tab of webpages, and within a week, most of my students in the class followed suit, either because he taught them, or they questioned how and looked it up themselves. I’ve never seen a class so engaged before.

Tim has capsules & internal links.

Dylan’s site has multiple pages.

Students in this class have been in computer classes for the past 3 years. When interviewed 5/6 students said that learning to code websites was their favorite thing they learned in this program. The websites speak for themselves and are quite impressive considering that my students are 13 years old and only spent 5-6 weeks learning coding and site design. My students loved coding their websites. Here are just a few student testimonials about how much they learned and how much they enjoyed the unit:

c

A few students’ websites:

Categories: Coding