HTML Coding Workflow

Last updated on

Tagged in CSS, HTML

Here's how I write HTML/CSS. Read it with basic coding knowledge in mind.

The steps

  1. My editor is Sublime Text 3. I love Solarized colour scheme.
  2. Install following packages:
  3. Start writing HTML using Emmet syntax.
  4. Select the HTML you wrote and call eCSStractor.
  5. Paste the css definitions to CSS file.
  6. Open HTML in Chrome.
  7. Open Chrome Developer Tools and switch to Sources tab.
  8. Choose Filesystem on sidebar and load the current working directory to make files editable on Chrome's inspector.
  9. 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! Screenshot
  10. Install PerfectPixel Chrome extension.
  11. Export your design data to an image file (PNG, JPG etc.)
  12. Load the design image to PerfectPixel.
  13. Compare with your HTML and fix to match the design. Keep using the inspector!

Other useful Sublime Text packages I use

Feel free to share tips to make it more efficient!