A fully responsive functioning tip calculator

Community feedback

• 

  jemeneradev•580

  @jemeneradevPosted almost 3 years ago

  Let me begin my sharing this tip with you - it will help you with matching the design closer. Take the design image and make it the background of a div and give it an absolute position.

  <div class="design-spec" style="position:absolute;top:0;left:0;z-index:-1;opacity:0.5"><img src="projectdesignpath"/></d>

  This will serve as a reference to your layout implementation. Since the div is absolute and has a negative z index, whatever you add, it will be on top of it. The margin and padding will be easier to determine, as well as the line-height and word spacing these project often call to adjust.

  Also, you should browse https://developer.mozilla.org/en-US/docs/Learn

  Like when reading a book, you often pick grammar tricks or metaphors, reading code more often than not, it gives you hints into more efficient ways of doing things.

  Case in point: you used a lot of repeated code. Hey, if it works, it works, but I bet it seemed strange to do so to you too.

  0