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:
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:
Have them mess up tags in a web page, and then fix it.
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.
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!
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.
… No need to install software!
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.
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!
When it comes to teaching web design, what is a good alternative to Dreamweaver?
A few things to consider:
Most professional web designers DO NOT use Dreamweaver.
Teaching web design with Dreamweaver introduces an extra layer of complexity for no good reason. You have to teach BOTH Dreamweaver and web design.
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:
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
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.
Getting your web design class up and running is easy with StudioWeb.
The steps are:
We set up your StudioWeb classroom(s), where each student gets their own user ID.
Teachers give students their IDs, and they log in and start with the HTML course.
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!
You have the option to assign them projects that we provide. The projects start on ch3 of the HTML course.
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.
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.
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:
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!
… 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?
As teachers learn to code, they will also be learning the structure of the lessons, quizzes, projects and the code challenges!
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.
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?
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.
Feel free to contact us if you want to learn more, or try a demo classroom.