Webmaker/Concept-Nimble: Difference between revisions

Webmaker/Concept-Nimble (view source)

Revision as of 18:23, 25 October 2013

632 bytes added , 25 October 2013

→‎Progressive Enhancement with Brackets

David.humphrey

Confirmed users

656

edits

@@ Line 73: / Line 73: @@
 ===Progressive Enhancement with Brackets===
-Because Brackets is built around a module extension system, turning on new features is as easy as including new extensions.  Consider some of the earlier issues with trying to teach a deeper understanding of web development in Thimble.  Here's a current starter Make in Thimble with FriendlyCode replaced with Brackets:
+Because Brackets is built around a [https://github.com/adobe/brackets/wiki/Brackets-Extensions modular extension system], turning on new features is as easy as including new extensions.  Consider some of the earlier issues with trying to teach a deeper understanding of web development in Thimble.  Here's a current starter Make in Thimble with FriendlyCode replaced with Brackets:
 [[File:Brackets-Thimble.png|800px]]
-First, this screenshot doesn't represent an optimal or appropriate UI for hosting Brackets, but it helps serve as a starting point.  Where we previously had
+NOTE: this screenshot in no way represents an optimal or appropriate UI for using Brackets in Webmaker; it merely serves as a starting point for our discussion.
+Consider one of the current Starter Makes: https://thimble.webmaker.org/project/20795/remix.  This project mixes HTML and CSS in a single page.  If we redo it in Brackets, we get the following:
+[[File:Brackets-Single-File.png|800px]]
+Now we can let's split it into multiple files and use Bracket's in-line context editing to explore the relationship between the CSS and HTML:
+[[File:Brackets-Multi-File.png|800px]]
+Next we can add a CSS Linting extension and again examine our styles, this time noticing errors we've made.
+[[File:Brackets-CSS-Lint.png|800px]]