HTML and CSS Reference
In-Depth Information
In
Figure 6.4
, you can see the live editing taking place, where an entire declaration has been
removed (the background on the
<body>
element), and another has been edited (the
mar-
gin
value on the
<body>
element).
Figure 6.4. Editing in Firebug
In addition to learning how to use in-browser developer tools, the other tip is to find a good
text editor and become familiar with its many shortcuts and features. This will boost your
productivity and development speed. Some excellent and popular choices include
Sublime
There are others, too―some free, some not. In general, the text editors you have to pay for
are quite good and well worth the relatively small, one-time cost.
Most importantly, these editors have tons of excellent coding features designed for front-end
developers working primarily with HTML, CSS, and JavaScript. These include auto-com-
plete functionality for typing CSS properties and values, options for different color schemes,
enhanced search-and-replace functionality, and much more. So do yourself a huge favour by
installing one of these editors, and slowly taking the time to learn about all its features.
In
Figure 6.5
,
you'll see Sublime Text with a custom color scheme for syntax highlighting.
You'll notice that Sublime Text recognizes the
float: left
declaration as typing begins,
meaning all we have to do is hit the tab key and it will auto-complete the declaration. It also
adds the trailing semicolon automatically!
