Layout Lab


In this lab, you will reconstruct the design shown below.

Step 0:  Here is a quick warm-up quiz on selectors. Show you TA your final score when you’re done.

Layout lab (total 15 points)

For this lab, implement the following screen meeting these specs (link to design file), here is a Snack link to start the lab with:

You can make the house and the circles a background Image. 

1.1     Responsive Splash. (10 points)

The splash screen is required to be responsive. (This means that it adjusts its layout elegantly regardless of the screen size that it is run on).

1.1.1     As a user I am able rotate view the screen both in horizontal and vertical mode. (10 points)

1.2     Button Feedback. (5 points)

Feedback is a critical component of any application.  Know when a button is pressed.

1.2.1     As a user I want to click the button causing it to darken (It’s Red and Green values decrease by 50%) (5 points)

Once you are done. Go ahead and try flex frogger ( upload the solution to the final stage 24 to collab also upload a link to the snack that you have created. Remember that you can edit zzzzz2’s snack so don’t have to create your own.