KillerPHP Blog

Teaching Code

Classroom Activities for your Web Design Classroom

April 3, 2018

Hi!

The following classroom activities have proven to very helpful in StudioWeb web design classes. These ideas come from our StudioWeb QuickStart Guide for teaching web design.

#1. Note taking:

StudioWeb’s video lessons make heavy use of pop-up note takers: have students take handwritten notes while watching the video lessons for improved retention. Teachers could require that students hand in notes at the end of each week for extra marks.

#2. Student collaboration with paired programming:

Have students work in teams of two, where for each chapter, one student acts a ‘co- pilot’, while the other is answering quiz questions and code challenges. They rotate roles every chapter. This is an industry practice call ‘paired programming’ and is a part of the agile software development technique.

#3. Student collaboration with group projects:

Have students work in teams of 2-3 on the provided assignments.

#4. Student peer-to-peer tutoring:

Encourage advanced students to assist others with both the formative quizzing and projects. It is common to see StudioWeb classrooms with students helping each other out as they learn the material.

#5. Breaking the code:

A great way to learn how to code, is to break it once you have it working. It is very instructive to see how a web browser reacts to broken code, and in the case of JavaScript programming, to see the error message the browser displays in the browser’s console.

Have the students download the project files for each course (found on the homepage of each course) and have them make changes to the provided code and then break it to see what happens. For example:

  1. Have them mess up tags in a web page, and then fix it.
  2. Have students change values in the CSS code such as font colors and sizes. Have them move around braces to break the CSS code … and then fix it.
  3. Have students remove semicolons in JavaScript and change the case of variable names.

Breaking code after you get it working, is an excellent way to accelerate students understanding of code.

#6. Using the provided classroom assignments:

Within the ‘Course Documents’ download found under each course in the Teacher’s Dashboard, you will find a set of assignments/projects that you can assign to individual students or groups. These assignments are bound to chapters in each course.

#7. Using the provided video source files:

On the homepage of each course, you will find a download link to all the files (html pages, CSS pages, images etc) that are built in the videos. These are the files that students can use in classroom activity #5: ’Breaking the Code.’

If you want to use StudioWeb in your classroom, feel free to contact us!

Thanks!
Stefan Mischook

read more


Setting up a coding environment for the classroom.

April 2, 2018

One of the hardest aspects of getting a coding classroom up and running, is just getting the software installed on the workstation. After considering a many options, we decided to go with the web coding languages, since all computers already have the software you need.

To teach HTML5, CSS3 and JavaScript, all you need is a  web browser (Chrome, Firefox etc …) and the built-in simple text editor that comes with Windows, Macs and Chromebooks.

… No need to install software!

HTML5, CSS3 and JavaScript, have all you need!

Another advantage of teaching code with the web languages, is that they are the most important languages in coding today. With the web languages, you can teach students to all the major coding / programming concepts, as they learn the most popular languages used in industry today.

With HTML5 and CSS3, students learn what is called ‘client side’ coding. They will learn how the visual parts of programs are created. These concepts are universal; so once they learn user interface creation with HTML5 and CSS3, they will know how it is done in just about all programming languages.

JavaScript in 2018-19

JavaScript is arguably the most important programming language in the world. JavaScript is used in so many areas of programming (client-side web apps, server apps, ML etc …), and its popularity is only increasing. For example, with JavaScript’s Node.js, Netflix is able to create their amazing video streaming software.

If you want your students to learn real-world programming, JavaScript is your language.

StudioWeb’s Turn-key Code Curriculum 

We’ve been working for schools for over 6 years now, and the StudioWeb program and curriculum has been refined based on what teachers and students have taught us. Our code curriculum makes it fun, and easy for both teachers and students:

  • Over 300 short video lessons.
  • Over 1400 engaging quiz questions and coding challenges.
  • 57 assignments and grading rubrics.
  • Auto grading by course, chapter and lesson – teachers don’t need to know code!
  • Gamified engaging learning.

With as little as 20 minutes of prep, teachers with no experience with coding can have their classroom up and running!

Give us a call to set up a demo … it only takes a few minutes to set up!

Stefan

read more


Great Alternatives to Dreamweaver for the Classroom

February 20, 2018

This is a common question I get from teachers:

When it comes to teaching web design, what is a good alternative to Dreamweaver?

A few things to consider:

  1. Most professional web designers DO NOT use Dreamweaver.
  2. Teaching web design with Dreamweaver introduces an extra layer of complexity for no good reason. You have to teach BOTH Dreamweaver and web design.
  3. Dreamweaver is expensive compared to many alternatives … especially considering the free software out there! 🙂

Side note: I’ve been teaching code and programming since 2003, and web design is a great vehicle that you can use to teach code with.

… Wed design is great (to teach code with) because it’s visual, easy to learn, and cross platform. Heavy tools like Dreamweaver try to hide the code from users, but that hides the most important aspect of learning web design: writing actual code!

Great code editors for your students

There are many great options to choose from that are free, and you have options for all types of computers:

  • Windows
  • Mac
  • Chromebook

Taken from the StudioWeb QuickStart Guide:

Sublime Text – for Windows and Mac:
https://www.sublimetext.com/

Notepadd++ for Windows:
https://notepad-plus-plus.org/

Brackets for Mac and Windows:
http://brackets.io/

Caret for Chrome and Chromebooks:
https://goo.gl/cm8WpV

TextWrangler for Mac:
http://www.barebones.com/products/textwrangler/

Thanks!
Stefan Mischook

read more


How to Teach Web Design

January 31, 2018

In the video below, I go over my top 7 web design teaching tips for teachers. Here are the bullet points:

1. Use the spiral teaching method
2. Self paced learning is best
3. Encourage students to use online training resources
4. Web Design software is NOT important

…. Watch the video to learn the rest.

The video:

Thanks!

Stefan
StudioWeb

read more


Middle School Web Design Courses that Teach Actual Code!

August 21, 2017

A teacher called yesterday looking for a web design course that teaches real web design coding skills. Like other teachers I’ve personally spoken to, she understood that dragging around blocks on screen, where the app writes the code for the student, is not nearly as effective as the student actually writing the code!

… Teachers quickly discover that students don’t learn much about coding with blocks.  🙁

So many code courses fallback on the misguided practice of using block-based teaching apps, thinking that this is helping students. As the teacher observed herself, with these systems, students quickly get bored and just follow the pattern.

Teaching code by having students write the code

Our experience has taught us that for students to actually learn to code, they have to write the code, make the mistakes, and get the feedback as they learn the languages of web design: HTML, CSS and JavaScript. The StudioWeb app provides instant feedback and hints, to help your students as they code.

Motivate your students!

Nothing motivates a student like seeing their code produce actual real-world results!

With the StudioWeb web design curriculum, your students interest levels will skyrocket, as they quickly see their code magically transform into websites that flex and flow on small smartphones, all the way up to giant 4k displays.

… Web developers call that ‘responsive’ design and your students will learn those marketable skills with StudioWeb.

If you would like to learn more, check out StudioWeb.com

Thanks,

Stefan

read more


Starting your Web Design Class

August 10, 2017

Getting your web design class up and running is easy with StudioWeb.

The steps are:

  1. We set up your StudioWeb classroom(s), where each student gets their own user ID.
  2. Teachers give students their IDs, and they log in and start with the HTML course.
  3. As your students watch the videos and answer quiz questions, the StudioWeb software tracks their progress auto generating grades for you by course, chapter and even the lesson!
  4. You have the option to assign them projects that we provide. The projects start on ch3 of the HTML course.
  5. We have a total of 57 projects between the HTML,CSS and JavaScript courses. Each project bound to a chapter in a course.
  6. We provide an easy to use grading rubric for the projects. Even teachers who don’t know code, can accurately assess student work with help of the grading rubric. Using the projects is optional, since the StudioWeb auto grading is very accurate.

It is practically impossible for students to get stuck on a lesson, given how the StudioWeb app and courses are designed. But, if ever a question should come up (and you don’t have an answer,) the course creator (Stefan) will be able to answer questions the same day.

… I make it a point to be in contact with teachers. I am able to do this since we get so few questions! 

Feel free to contact me if you have any questions.

Stefan Mischook
StudioWeb

read more


Coders code with code, so we Teach with Code

August 4, 2017

html course badge studioweb

There are many approaches to teaching code. Unfortunately,  many make the mistake of going with block-based coding, while others create code simulators, in an attempt to introduce coding to students.

We have a different and proven effective philosophy:

We teach code with actual coding … how radical!!  Our courses are real-world centric: coders code with code, so we teach students with code, and the tools that coders use. And the results are in – it works really well!

Neither do we try to replace teaching techniques with gimmicks and games: good old fashioned teaching (that my father taught me), combined with years of actually coding experience, is the foundation of our coding curriculum, and as such, we achieve amazing student outcomes.

Students learn from 360 video lessons, quizzing and assignments

With StudioWeb, students learn to code with video, supported by instant quizzing, and code challenges. The code challenges that come after the video lessons, have students write real code as our StudioWeb engine evaluates it instantly.

In addition, StudioWeb provides 57 assignments that allow students to build real things (web pages, responsive sites, animations in web pages etc …) with the coding skills they acquire in the StudioWeb app. We also provide a grading rubric for the projects with 3 levels of assessment that make it easy for teachers to evaluate student projects. It’s easy to use.

The secret to our success?

StudioWeb has been refined over the last 6-7 years. Built with feedback from many teachers, and data from ~200k students.

Contact us, and we will be happy to set up a demo classroom for you.

Stefan
StudioWeb.com

read more


What Yale’s Socially Assistive Robots and StudioWeb have in Common

August 2, 2017

I was reading an article on Yale University’s research with socially assistive robotics, that help to teach kids. The main points I got out of the article:

html course badge studioweb

  • Robots learn and adapt to individual student need.
  • Students are motivated when the learning process is turned into a game. A little competition is very motivating for many students. Otherwise known as gamification.
  • When students work one-on-one with a robot, they are not afraid to answer questions, since all the students are busy working with their own robots.
  • The robots look like fun toys.

This is interesting to me, because the StudioWeb app and curriculum, has been developed with an awareness of the above lessons.

StudioWeb’s experience reflects Yale’s:

StudioWeb’s software shares similar traits (if you will) with Yale’s socially assistive robots. StudioWeb is a gamified app where students learn to code, as they unlock levels, earn badges and score points. Students work on their own computers, at their own pace, and so they don’t have to worry about social pressures.

Understanding the importance of the emotional component of teaching, each of our courses are represented by fun and cool animals: two frogs, a sheep, a spider and a python. Each animal also becomes the course badge students can earn. Finally, we add to the learning process fun, with the gaming aspect, and good old fashioned humour.

… Students come away smiling and giggling as they learn to code.

StudioWeb does not replace teachers … but we help! 

From the article:

“You may have a public school where there are 25 to 30 kids in a classroom and the amount of time that the teacher can spend one-on-one with each child is relatively limited,” said Scassellati in an interview with R&D Magazine.

Socially assistive robots free up teachers time, so they can concentrate their efforts where it might be needed – say students who made need special attention. This is a far better approach than trying to teach a classroom as they did in Plato’s time.

In a nutshell: the core lessons need not be taught over and over again by the teacher. That’s where assistive technology (robots and apps) come into play.

StudioWeb provides the same benefit. We’ve designed our curriculum and app, in such a way that it is nearly impossible for students to get stuck on a coding lesson, whether it be theory or actual coding. As such, students happily work through the video based lessons, without having to ask the teacher questions that have been asked countless times.

Rather than using an Ai, we’ve been able to refine our lessons over the last several years, eliminating the common questions, by addressing them in the lessons themselves.

… Good old fashioned teaching my father taught me, combined with data from a few hundred thousand students and your courses start to get really good!

Stefan Mischook
StudioWeb.com

read more


Professional Development in Teaching Code

May 27, 2017

It is well known that code (HTML, CSS, JavaScript, Python) is now an essential subject for students of all ages. Many US states and countries around the world, are making code a core part of their curriculum.

… The challenge many schools are facing though, is finding teachers to teach the coding classes.

StudioWeb’s Professional Development in Teaching Code

After working with many schools in the US and abroad, StudioWeb has developed an effective and engaging professional development program for teachers who have never written a single line of code!

Learn to teach code as you learn the course material for your classes

Teacher’s are super busy, and so it makes sense for them to learn to teach code, with the course material that they will be using to teach their students with. It’s a two for one!! The StudioWeb program has proven to fit that role perfectly.

How does it work?

  1. Teachers do the StudioWeb courses on the subjects they will be teaching … like HTML, JavaScript, Python.
  2. As teachers learn to code, they will also be learning the structure of the lessons, quizzes, projects and the code challenges!
  3. Now teachers know how to code, and they know the courses they will be teaching with!

So rather than learning the coding languages, then having to find or develop a curriculum – professional development with StudioWeb means both are handled at the same time.

… Needless to say, teachers love it!

If you are interested in learning how to teach code with our teacher approved (and proven!) curriculum, you are invited to contact us.

Thank you!
Stefan Mischook
StudioWeb

read more


Teacher Facilitated Code Classrooms in 2017

March 21, 2017

About 6 years ago, I began helping schools bring code into the classroom. My app and curriculum (StudioWeb) was originally conceived from my own ideas and experiences … that took us about 70% of the way there. Over the last 6 years though, StudioWeb has been highly refined, with the help from many teachers and students.

… You can’t beat real-world feedback, especially from students who are not shy to tell you what they think!

A new way to think about teaching

StudioWeb represents one of the new strategies (of teaching,) that schools are starting to embrace all over the world. A way where teachers are NOT expected to be masters of many subjects. Rather, teachers facilitate classrooms, and proven interactive video based courses, do the actual daily teaching.

… The best tools though, provide much more than just a set of videos and lesson plans.

The best teachers (and courses) from around the world, in your classrooms

You can’t expect teachers to be experts in all subjects. So why not leverage the Internet, and bring in domain experts into the classroom?

For example, schools who want to provide coding (HTML, CSS, JavaScript, Python …) for their students, can use StudioWeb’s proven, fun and effective curriculum, that allows for say, the English teacher (who knows nothing about code,) to successfully lead a code classroom.

Conclusion

Unequal educational opportunities can be a thing of the past. There is no reason that students from poorer districts, can’t get the same quality of education, that wealthy districts provide. In fact, with modern technology, they can get the exact same curriculum and high quality teaching!

Some quick notes about StudioWeb:

• StudioWeb’s curriculum is designed around open ended lesson plans, for maximum flexibility.
• Our courses make heavy use of the spiral teaching method, since it works so well with teaching code.
• Our curriculum teaches: HTML5, CSS3, JavaScript, Python, SQL, PHP and more.

Feel free to contact us if you want to learn more, or try a demo classroom.

Thanks!
Stefan Mischook
Studioweb.com

read more