Change Team Project 3: Editing HTML5 & CSS For Responsive Web Pages

In the modern web, one of the biggest challenges facing developers is creating web pages which accurately respond to the browser size of the device it is being viewed on. In this project students will learn how to access a portable HTML editor on a flash drive, open up HTML & CSS pages and edit the code of a responsive web page.

Main Topics:

A Brief History:
Let's Look Back In Web History and View An Old Static Web Page:
Wild West

DP Graph

What elements did these sites use?

What makes them difficult to navigate today?

HTML5 Responsive Web Pages & Responsive Design

What is HTML5 & CSS?

What Is HTML5?

History Of HTML5

How HTML & CSS Work Together

Media Queries & Core Concepts Of HTML5

Resources:
1 Page HTML5 Responsive Template
Box Link:
https://app.box.com/s/zyxi2wy4na3pftgpqgslifsjywt432z0

Notepad++ Portable Software 
Box Link: 
https://app.box.com/s/ur68i3j10cp8yexq0qlix50d64fikqje

Group Sites:
https://app.box.com/s/5y4v300nrodalq6txhmjfc0vwhqjc9o2


Sequence:

1.Add the Notepad++ & Responsive Website Files To Your Computer2.View The Video 1 On Editing The Responsive Webpage Using Notepad++3. Learn to edit and save your files as file types .html and .css . Main an organized folder.4. Adjust the content on the page to your liking. Change titles,headers,image,links.5. View the CSS code and recognize what makes the page respond to different browsers.

Links: