Last Updated: September 09, 2019
·
2.752K
· bgadoci

My Process for Marking Up Design

  1. Code HTML Only - Don't go back and forth between HTML and CSS markup. Structure the page to make sense using as few DIVs as possible.

  2. Modify CSS for phones - Stay out of the HTML and write CSS for viewing from a users phone.

  3. Modify CSS for tablet - Again stay out of the HTML and see how far I can get with the design for tablet viewing.

  4. Modify CSS for Desktop - Again stay out of the HTML and see how far I can get with the design for desktop viewing.

  5. Modify HTML if need and corresponding CSS to finalize page.

  6. Clean up.

Thanks to Mikael & Travis for helping me get so proficient here.

4 Responses
Add your response

Cool, I'll try this the next time

over 1 year ago ·

This would work even more efficiently with HAML and Sass.

over 1 year ago ·

is a good thought, but sometimes we need to include new elements in HTML css throughout development. I'll try to do as you say, because currently I do it for parts, then do the top, then the rest, always di top to bottom, HTML and CSS, and it is satisfying to see the layout forming, this brings encouragement to continue and complete.

over 1 year ago ·

Agreed. I actually have moved to SLIM and SASS. Love them.

over 1 year ago ·