Here's how I write HTML/CSS. Read it with basic coding knowledge in mind.
The steps
- My editor is Sublime Text 3. I love Solarized colour scheme.
- Install following packages:
- Start writing HTML using Emmet syntax.
- Select the HTML you wrote and call eCSStractor.
- Paste the css definitions to CSS file.
- Open HTML in Chrome.
- Open Chrome Developer Tools and switch to Sources tab.
- Choose Filesystem on sidebar and load the current working directory to make files editable on Chrome's inspector.
- Move to Elements tab, choose the element where you want to edit the CSS for and edit it. It automatically saves the change to the file as long as you make sure the green indicator is on!
- Install PerfectPixel Chrome extension.
- Export your design data to an image file (PNG, JPG etc.)
- Load the design image to PerfectPixel.
- Compare with your HTML and fix to match the design. Keep using the inspector!
Other useful Sublime Text packages I use
- NeoVintageous (I'm a former Vim user who cannot go back)
- AdvancedNewFile
- AutoFileName
- BetterFindBuffer
- eCSStractor
- Emmet
- DocBlockr
- Git (though I use Git mainly on Terminal window)
- GitGutter
- HTML Boilerplate
- HTML-CSS-JS Prettify
- HTMLAttributes
- MarkdownPreview
- Minify
- Placeholders
- SublimeCodeIntel
- Terminal
- WordPress
Feel free to share tips to make it more efficient!