KillerPHP Blog

Teaching Code

Teaching Web Design with StudioWeb

November 30, 2018

You are looking for a curriculum for your web design course … how can StudioWeb help?

… You need to know the course outlines, lesson plans, handouts and classroom management tools that StudioWeb provides.

In a nutshell:

Course outlines can be found here:

https://www.studioweb.com/courses/

Projects are bound to the chapters in each of the courses. They start simple, and build up in complexity as your students progress. For example, by the end of the CSS course, your students will be building production ready websites that work on desktop and mobile. One of StudioWeb’s unique qualities, is that it is vocational. Students learn real-world web design and coding, that is used in the workplace.

We currently have 57 projects/assignments for the HTML, CSS and JavaScript courses.

Lessons plans are designed around a self-paced teaching model. We have found over the last 7 years, that self-paced learning is best way to teach code and web design. StudioWeb curriculum and software is designed around that model. That said, StudioWeb’s software and curriculum is flexible enough to work with whatever lesson structure a teacher prefers.

Handouts: we provide all the source pages and code from the 300 video lessons. These can be used as a teaching tool and optionally, for extra assignments. For each project in the CSS and JavaScript courses, you are provided with handouts that contain the template and instructions for students.

 Classroom management: StudioWeb makes managing a classroom easy! The video based lessons with quizzing, frees up teacher’s time since the StudioWeb software tracks and grades student progress in real-time. The StudioWeb training platform is fun and gamified, students are engaged and motivated.

 If you would like to try a demo, please feel free to contact us.

 Thanks!

Stefan Mischook

read more


How to install Python on a Chromebook in 2018

September 10, 2018

There are few options for Python coding on Chromebooks. It is not as easy as doing it with Windows, or a Mac, but it is doable.

Doing a quick check out the Web, I found 2 options, one is easy, while the other takes more work.

Option #1:

Use a browser based Python code editor. There are a few out there. I found http://pythonfiddle.com/ and it works pretty well. I don’t know if you can run Python gui based programs with it, but you can write lots of Python code and even save it.

Option #2:

Install Python on your Chromebook. This will require more work but I imagine, you have much more flexibility since you can run the Python code directly on the Chromebook. Here is an article that will give you the step-by-step:

https://wsvincent.com/install-python3-chromebook/

Option #3:

The StudioWeb program includes a code editor that works with Python. In our Python course, your students will have many guided Python code challenges, where they will be writing actual Python code while getting instant feedback.

Hope that helps,

Stefan
StudioWeb

read more


Should you have Detailed Lesson Plans for Coding Courses?

August 20, 2018

I’ve been helping schools teach code over the last 7 years, and that experience has allowed us to refine the StudioWeb platform.

The StudioWeb curriculum is ideal for middle school, high school and college level students. One important lessons we have learned, is that an open-ended lesson plan, is by far the best approach to teaching code in the classroom.

Open-Ended Lesson Plans are Flexible

Our video based curriculum engages students, as they answer concept reinforcing quiz questions, and code challenges. This interplay of video and hands-on interaction with the content, produces amazing learning outcomes. Your students will not only understand the core fundamentals concepts of coding and programming, they will be able to demonstrate actual real-world skills.

… Something we have not seen in any other coding platform.

Video based Learning Supported by Projects

In addition to the many video lessons + quizzing, we provide 57 projects and classroom activities, for groups and individuals. You will have a lot of material.

Lesson Plans

Our lesson plans are open ended, to give teachers flexibility, to easily manage a classroom with students of varying abilities.

Most teachers simply start students on StudioWeb, allowing them to work at their own pace – the videos make this natural. When they complete chapter 3 of the HTML, you have the first projects you can assign. With each chapter in each course, you have new more projects you can assign.

… Don’t worry, grading the quizzes is handle by StudioWeb. For the hands on projects, we provide a super easy to use grading rubric, that makes it easy to assess students assignments.

StudioWeb’s lesson structure keeps students busy, and your classroom running smoothly. Your better students will not get bored, and students who need a little more time, will not feel left behind.

If you are interested in trying out StudioWeb, please feel free to contact us.

Stefan Mischook

read more


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