A simple editor for HTML + CSS tutorials

ব্যবহার করে বানানো হয়েছে জাভাস্ক্রিপ্ট, HTML5, সিএসএস৩, ড্র্যাগ এন্ড ড্রপ, ফাইল,

  • 630 বার দেখা হয়েছে
  • 6 টি মন্তব্য

এই ডেমো সম্পর্কে প্রস্তুতকারকের বক্তব্য

Tutorializr is an HTML + CSS tutorial maker (in the future I'd like to add more languages and features).

I have been inspired by websites like Codecademy, Learnstreet and their tutorials, which I very much like, and I thought that everyone willing to teach should have the possibility to do something similar, something interactive, to enhance the learning experience of their students!

Tutorializr simply provides a predefined layout and guides you through the making of your programming tutorial. First, you give a title to your tutorial and set how many lessons you want it to have; then you provide the solution (you can either write code from scratch or upload an HTML and a CSS file using drag and drop), save, and then erase the parts that the students are supposed to add as an exercise.
If you want to preview the result as if you were executing your code on a web page, just switch to the tab "Preview".
Finally (or you could do this first, your choice) you add the explanation for your lesson and the instructions for the assignment, and save.
Repeat until the last lesson!

When you will have finished the tutorial, you will get to download the source code and all you have to do is include the files as they are in your website (NB: it won't work in locale, you must upload the folder to your website; you may run the tutorial on your pc only if you have a server installed - and if that's the case you must, of course, put the downloaded code in the appropriate folder first). The url will be path/to/your/website/template.html
Just share your page on Twitter, Facebook or any social network you are on, or write a blog post about it, and you're done!

I hope you enjoy this demo! Happy teaching!

Tested on Firefox 21, 22 and beta 23, and on Google Chrome

External libraries and frameworks used:

-JQuery: http://jquery.com/
- Twitter Bootstrap: http://twitter.github.io/bootstrap/
- JSZip: http://stuk.github.io/jszip/

এ পর্যন্ত 6টি মন্তব্য করা হয়েছে

Log in to add your own.

  1. Tadey বলে,

    Hey this is very nice. I tried it.

    The thing is that if you write down the solution for code, the user has to write down exactly the same solution, which means if he writes a single letter more or less, he'll get an error.

    Codeacademy could be the example for you in this case too.

    Can you fix this? You really made good piece of software, but this one thing would really make it be wonderful.

  2. dantepregal বলে,

    Great work! I agree with you Tadey, maybe instead of an string comparison let the teacher write a test to validate the answers.
  3. wily123 বলে,

    Great script idea;
    Why don't works?!

    (after downloading lessons )
    It says 35% Completed before starting, and dont work
  4. Florian17 বলে,

    Ein gutes Demo nur wenn man es in einem neuen Fenster öffnet dann kann man nicht mehr an dem gleichen code weiterarbeiten.Könnte man das vielleicht mit einem Cookie debuggen?
    A good demo only when it opens in a new window is unable to continue work on the same code man. Could you debug with a cookie perhaps?
    (English from Google Translator)
  5. oleczka6690 বলে,

    Very nice.
  6. goldsoft25 বলে,

    thanx for ur work

About this Demo

সোর্স ডাউনলোড করুন 206.03 কিলোবাইট · জিপ ফাইল

Browse the Source

এই ডেমোটি GPL লাইসেন্স এর অধীনে উন্মুক্ত করা হয়েছে।