Logo

Video: Tools for HTML, CSS and JS (Bulgarian)

  • November 03, 2022
  • Nikolay Kostov (Nikolay.IT)

IDEs, or Integrated Development Environments, are coding tools that provide a comprehensive workspace for developers to write, test, and debug code. Some popular IDEs include Sublime Text, Atom, WebStorm, and Visual Studio. These tools typically include features such as syntax highlighting, code completion, and integrated debugging tools.

Browsers and browser tools are essential for testing and debugging web pages. Common browsers include Google Chrome, Mozilla Firefox, and Apple Safari. Browser tools, such as the browser's developer console, allow developers to inspect and debug HTML, CSS, and JavaScript code.

Drawing and slicing tools are used in web design to create graphics and convert them into web-friendly formats. Examples of drawing tools include Adobe Illustrator and Sketch, while slicing tools, such as Adobe Photoshop, are used to divide a design into smaller, web-optimized pieces, such as images and buttons. These tools are essential for creating high-quality graphics and user interfaces for web pages.

Topics covered:

  • Coding Tools (IDEs)
    • Sublime Text
    • Atom
    • WebStorm
    • Visual Studio
  • Browsers and Browser Tools
  • Drawing and Slicing Tools

Video (in Bulgarian)

Presentation Content

Coding Tools

  • There are many, many coding tools for HTML, CSS and JavaScript
    • They are cross-platform
    • Some of the most used are:
      • Sublime Text 2/3
      • Atom.io
      • Jetbrains WebStorm
      • Microsoft Visual Studio
      • Eclipse, Aptana, Komodo IDE, Notepad++

Sublime Text

  • Sublime Text is a sophisticated text editor for code, markup and prose
  • Free to use with unlimited trial version
  • Has two versions, currently used
    • Sublime Text 2
      • Stable
      • Less updates
    • Sublime Text 3
      • Regular updates
      • Can crash right-out-of-nowhere
      • Yet, the better choice
  • Sublime Text is a text editor with a little ready-to-use functionality
    • Yet, it is easily customizable
  • A ready-to-use portable version for HTML, CSS and JS development can be downloaded at

Atom.io

  • Atom.io is “A hackable text editor for the 21st Century”
    • Built with HTML, CSS and JavaScript for development of HTML, CSS and JavaScript
    • Small and fast
    • Good set of plugins
    • Open-source
      • free to use and extend
    • From the creators of GitHub

Jetbrains WebStorm

  • Jetbrains WebStorm is a ready-to-use IDE for JavaScript development
    • Including web development with HTML and CSS
  • WebStorm has most of the necessary features for web development
    • Code highlighting
    • Code completion
    • Not that many plugins
  • WebStorm is a paid software
    • Yet, JetBrains offer a discount (100%) for students or start-ups

Microsoft Visual Studio

  • Microsoft Visual Studio is a ready-to-use IDE for web development
    • Built-in
      • Code highlighting
      • Code completion
      • And more
  • Visual Studio Ultimate is a not a free software
    • A free community (or express version) is available for download
  • Install Web Essentials extension

Browsers and Browser Tools

  • Browsers
    • Internet Explorer
    • Google Chrome
    • Mozilla Firefox
    • Apple Safari
    • Opera
  • Browser Tools
    • Firebug
    • WebInspector
    • WebDeveloper Toolbar
    • F12 (IE)
    • Inspect
    • Console
    • Bookmarklets

Drawing and Slicing Tools

  • Adobe Photoshop
  • Adobe Fireworks
  • Gimp
  • Paint.NET

Share