gr37aw
Last Updated: December 29, 2017
·
2.523K
· bgadoci
Screen shot 2013 07 30 at 10.15.54 pm

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.

Say Thanks
Respond

4 Responses
Add your response

2851
D

Cool, I'll try this the next time

over 1 year ago ·
2868
63f35d9e50dfd73281126b051a51668a

This would work even more efficiently with HAML and Sass.

over 1 year ago ·
4138
417a033f44cec5c3716f08b74103bfd9

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 ·
6267
Screen shot 2013 07 30 at 10.15.54 pm

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

over 1 year ago ·