Edytor kodu

Sercem platformy Tutor IDE jest profesjonalny edytor kodu działający bezpośrednio w przeglądarce. Uczeń nie musi niczego instalować — otwiera stronę, loguje się i od razu może pisać kod.

Edytor klasy profesjonalnej

Edytor w Tutor IDE to ten sam silnik, który napędza Visual Studio Code — najpopularniejsze narzędzie zawodowych programistów na świecie. Uczniowie pracują w prawdziwym, profesjonalnym środowisku, ale w wersji dostosowanej do nauki.

Podświetlanie składni

Kod wyświetla się w kolorach, które pomagają rozróżnić tagi HTML, właściwości CSS i instrukcje JavaScript. Dzięki temu łatwiej zauważyć błędy i zrozumieć strukturę kodu.

Podpowiedzi i autouzupełnianie

Edytor podpowiada nazwy tagów HTML, właściwości CSS i funkcje JavaScript w trakcie pisania. Automatycznie zamyka nawiasy, cudzysłowy i tagi — mniej literówek, więcej tworzenia.

Skróty klawiszowe

Zapis pliku jednym skrótem (Ctrl+S), cofanie zmian, kopiowanie i wklejanie — edytor obsługuje wszystkie skróty, które uczniowie znają z innych programów.

Podgląd na żywo

Obok edytora wyświetlany jest podgląd strony. Uczeń pisze kod po lewej stronie i od razu widzi efekt po prawej — każda zmiana w HTML czy CSS natychmiast pojawia się w podglądzie po zapisie pliku.

To pozwala eksperymentować i uczyć się metodą prób — „zmienię kolor na czerwony i zobaczę, co się stanie".

Drzewo plików

Każdy projekt ma przejrzystą strukturę plików i folderów widoczną w panelu bocznym:

• Ikony plików — HTML, CSS, JavaScript, obrazy i inne typy plików mają własne ikony, dzięki czemu łatwo je rozpoznać
• Foldery — uczniowie mogą organizować pliki w folderach, tak jak w prawdziwym projekcie
• Przeciągnij i upuść — pliki można przenosić między folderami za pomocą myszy
• Plik główny — index.html jest oznaczony jako punkt startowy projektu

Zarządzanie plikami

• Tworzenie plików i folderów — uczeń dodaje nowe pliki HTML, CSS lub JS jednym kliknięciem
• Przesyłanie obrazów — obrazy, ikony i inne zasoby można przesłać z komputera
• Usuwanie — niepotrzebne pliki i foldery można łatwo usunąć

Eksport projektu

Uczeń może pobrać cały projekt jako plik ZIP na swój komputer. Plik zawiera wszystkie pliki projektu z zachowaniem struktury folderów — gotowy do otwarcia w dowolnym edytorze lub do przesłania na inny hosting.