Another productivity tip is to work with a visual mockup.
It is hard to do both design and coding work at the same time. So before you start take the time to create a visual mockup and then keep that fixed while you code it in. This has saved me many hours already. If you try to design and code at the same time you’re in for a lot of trouble.