There have been a number of discussions at various WebProfessionals.org meetings about the concept of “design in browser.” As the spring semester starts to draw to a close, I thought it might be an appropriate time to review this concept as it helps bring a number of aspects of web design into focus. It is also a good way to confirm you really understand working with HTML, CSS and related technologies.
The two main tools I recommend using when designing using a browser are the Chrome browser and Brackets as an editor. In the most simple form, one modifies the CSS on a given page directly in the browser and then copies the modified code and pastes it into the associated document. This is enabled because of two capabilities in Chrome:
- the inspection tool (this will also open the Developer tools) (Ctrl[or CMD]+Shift+i)
- device mode (Ctrl[or CMD]+Shift+M)
I suspect many students reading this article have not worked extensively in this manner. Let’s get started. Read more »