Code Editing Lesson 2

Learning Objectives The learning objectives for this lesson are: Identify code editors that work best for Web development Compare cross-platform code editors Analyze the Brackets code editor Develop a code editing environment by installing the Brackets code editor and extensions related to HTML and CSS code Create a screencast that shows your editor, the extensions that are installed, and how the editor is used to write HTML and CSS code. 2/11/2017 Lesson 2, Code Editing

Resources Use these resources to achieve the learning objectives: Wikipedia page on "Comparison of Text Editors" Web search for plain text, non-IDE, cross-platform code editors Brackets – Get Brackets from their website Brackets extensions – These are installed from within Brackets after you have it installed My Brackets playlist on YouTube Screencast-o-Matic – for getting help when you have trouble WBU Online Library 2/11/2017 Lesson 2, Code Editing

Terminology You need to understand the following terms for this lesson: Code editor Code editors are computer applications (like Brackets) that enable the user to write code for computers in a variety of computer languages. The only languages that are important for this class are HTML, CSS, and JavaScript. WYSIWYG "What you see is what you get" (WYSIWYG) editors are full-featured, Integrated Development Environment (IDE) code editors that enable Web developers to build websites without having to know all the details of the code being used. WYSIWYG editors may not be used in this class. (Example: Dreamweaver) 2/11/2017 Lesson 2, Code Editing

Terminology Terminology (continued) Plain text File extension "Plain text" describes code that is both meaningful to a computer as well as being readable by a human. Coding languages like HTML, CSS, and JavaScript are simply plain text files that are saved with a special file extension. File extension A "file extension" is a short string of characters that follows the last period after a file name. The purpose of a file extension is to tell the computer what program to use to run that file. (Example: index.html) 2/11/2017 Lesson 2, Code Editing

2/11/2017 Lesson 2, Code Editing

Terminology Terminology (continued) Cross-platform Screencast Refers to a computer application that runs about the same on Windows, Mac, Linux, or other computer operating systems. Screencast A screencast is an audio and video creation of something occurring on your computer screen. (Examples: Screencast-o-Matic for PCs, QuickTime Player for Mac) Screencasts are much better than simple screen shots. Using a microphone, you are able to both describe and show what is happening on your computer and share this with another person so he/she can understand the full context of a problem or question. 2/11/2017 Lesson 2, Code Editing

2/11/2017 Lesson 2, Code Editing

Collaboration There are two discussion forums for this lesson: Due by Wednesday night at midnight Do some research using the suggested resources and compare three free, cross-platform, non-IDE code editors. The length of your posting should be about 100-200 words. Be sure to cite your sources. Post 2 messages. (Learning objectives 1, 2, & 3) Due by Sunday night at midnight Peer-to-Peer Support. Support and learn from one another by posting questions about problems and solutions you have with this week's lesson. 2/11/2017 Lesson 2, Code Editing

Test Due by Sunday night at midnight. Use the link found in Blackboard to take the test for this lesson. 2/11/2017 Lesson 2, Code Editing