Create a sample web page for a Collin College (NAME OF SCHOOL) student group either real or imaginary to use in this lab. You may use filler text for the paragraph level content. Use the principles of responsive design--solid HTML 5 structure, media queries and external style sheets to create a responsive site.

In this lab you will need to demonstrate the use of legacy CSS float grids and media queries to change the appearance of the site based on devices screen size. You may go from desktop to tablet to mobile (first week demo) or from mobile to tablet to desktop (mobile-first, second week demo).

• Include viewport meta on page
• use @media for customizing for setting the CSS for the different layouts (mobile, tablet and desktop)
• use mobile design guidelines to have 1 column, larger links, distinct colors, and adjust padding/margins for the mobile version of the site.
• On tablet size go with 2 columns layout and customize styles to fit a tablet sized screen.
• On desktop size screen go with 3 or more column layout and customize styles for a desktop version.
• add a print style sheet and remove the menu/navigation links and setup to be print friendly on page size, content page breaks and no orphan or leading headings.
• with

  and a background image

• at least 5 paragraphs of lorem ipsum divided into 3 different
  areas with each article starting with an

• Nav with at least 5 external links to Collin or other related sites
• At least 3 images (one must be a foreground image that uses

  and

  ) that are responsive and resize appropriately to each screen size.

• Footer with you name as webmaster.
• Use CSS to style the page as you like, but you will need to use the following CSS at least once:
  • rounded corners
  • linear or radial gradient
  • background-image
  • text shadow
  • box shadow
• Validate (10 points)
• Overall effectiveness (10 points)

THIS IS WEB PROGRAMMING