Web Development Tools Tools for Front-End Developers Writing HTML and CSS Code SoftUni Team Technical Trainers Software University

Table of Contents 1.Coding Tools  Text Editors  IDEs 2.Browser Tools 3.Drawing and Slicing Tools 2

Text Editors with HTML & CSS Support Notepad++ (Windows) GEdit (Linux) 3

4  Visual Studio / Visual Web Developer  Microsoft Web Matrix  Eclipse  Sublime Text  Brackets  Aptana Studio  WebStorm  Adobe Edge  Adobe Dreamweawer IDEs for HTML, CSS and JS

5  Emmet (formerly Zen Coding) is a shortcut syntax for speed-writing HTML and CSS, e.g.  Learn more at  Download plugin for your IDE Zen Coding / Emmet (div>dl>(dt+dd)*3)+footer>p <div> </div><footer> </footer>

6  Google Chrome  Web Developer Toolbar  Mozilla Firefox  Firebug  Web inspector  Internet Explorer  F12  Opera  Inspect Element  Safari Browsers and Browser Tools

7  Adobe Photoshop  Adobe Fireworks  Paint.NET  GIMP Drawing and Slicing Tools

8  Git  SVN Source Control Systems

? ? ? ? ? ? ? ? ? Web Development Tools

License  This course (slides, examples, demos, videos, homework, etc.) is licensed under the "Creative Commons Attribution- NonCommercial-ShareAlike 4.0 International" licenseCreative Commons Attribution- NonCommercial-ShareAlike 4.0 International 10  Attribution: this work may contain portions from  "HTML Basics" course by Telerik Academy under CC-BY-NC-SA licenseHTML BasicsCC-BY-NC-SA  "CSS Styling" course by Telerik Academy under CC-BY-NC-SA licenseCSS StylingCC-BY-NC-SA

Free Software University  Software University Foundation – softuni.orgsoftuni.org  Software University – High-Quality Education, Profession and Job for Software Developers  softuni.bg softuni.bg  Software Facebook  facebook.com/SoftwareUniversity facebook.com/SoftwareUniversity  Software YouTube  youtube.com/SoftwareUniversity youtube.com/SoftwareUniversity  Software University Forums – forum.softuni.bgforum.softuni.bg