Lab 5: Mobile Web Layout Design Prepared by Jack G. Zheng for IT 4213, Spring 2019

This lab will guide you to practice mobile web and responsive layout design.

Tasks

Make sure you have completed the readings required in the study guide first.

Continue from task 3b in lab3. Modify the given web page "lab3-3b-fixed.html" to implement the "Column Drop" pattern responsive design. Apply mobile first media query practices. Use the div float method. Use screenshots to show your design.

Rewrite the code for task #1 but this time use the CSS grid method for div tags. Use screenshots to show the effects.

Summarize your experience using CSS grid method for responsive layout design.

Submission

Compile all answers and reports into a single document. All screenshots need to be complete and no editing/cropping. Clearly label each part. Upload required solutions to your website and provide links. Submit it before the due date listed in D2L Brightspace.

Grading

Your grade is determined on:

How much you have satisfied the requirements specified in the instruction, and your creativity.

Professional writing and formatting.

Follow the submission requirements.

Rubric:

Score	Summary	Rating Description
10	Outstanding work; beyond expectation.	Clear and detailed explanation for all parts with complete screenshots. Excellent coding to make pages responsive. Professional writing and formatting.
8-9	Good work; meet expectations	Clear and detailed explanation for all parts. Good solutions on coding. Professional writing and formatting.
6-7	Adequate work;	Brief explanation for all parts. Missed some key parts of responsive design in coding. Need to improve writing and formatting.
<6	Lack of effort.	Missing screenshots or explanations. Missing any part. Live webpages are not working. Disorganized writing and formatting.