You will build a page from scratch, based on an image that we provide you, that exhibits principles of traditional news layout. You will be practicing HTML and CSS, as well as exercising your ability to visually deconstruct a page and then build it using code. This is important as you become an active rather than passive consumer of news on desktop and mobile. ● Reading: CSS tutorial http://bit.ly/w3css: Sections 'CSS Home' through 'CSS Tables'

###### Week 3 (1/26): HTML &CSS: Part 2

Overview of CSS and properties necessary for page layout.

● Hands-on in class: Building a navigation menu and a photo gallery. These cover everything you need to complete Assignment 1. ● Reading: CSS tutorial http://bit.ly/w3css: Sections 'CSS Box Model' through 'CSS Pseudo - elements'

###### Assignment 1 due before class Week 4

###### Week 4 (2/2): HTML &CSS: Part 3

Positioning and new HTML5 elements: and tags: Review problems with Assignment 2. CSS positioning. A look at new tags in HTML5, including audio and video. Hands-on in class: Add background video and images. Basic Parallax scrolling page.

● Hands-on in class: Inserting video and audio on a page. Positioning these elements in relation to each other, as well as in relation to the browser window. ● Assignment 2: Flexbox and responsive. Due Week 6 before class. This is a simple layout that makes use of flexbox, a common technique for creating responsive, mobile- friendly websites. People view websites on their phones more often than on their desktops, so optimization for mobile is a crucial best practice. ● Reading: Positioning tutorial: https://www.w3schools.com/css/css\_positioning.asp. HTML5 tutorial: http://www.w3schools.com/html/html5\_intro.asp\_intro.asp

###### Week 5 (2/9): Flexbox and introduction to responsive design principles

Overview of Assignment 2. Flexbox and media queries. Hands-on in class: Making a basic page responsive and mobile ready.

● Hands-on in class: Making a basic page that is responsive and mobile-friendly. News consumers read on their phones more often than their desktops. Your content should look good on all screens. ● Reading : CSS Flexible Box Layout Module: https://www.w3schools.com/css/css3\_flexbox.asp. Responsive WebDesign: https://www.w3schools.com/css/css\_rwd\_mediaqueries.asp

###### Assignment 2 due before class Week 6

###### Week 6 (2/16): JQuery &JavaScript: Part 1

Overview of JavaScript and jQuery, from plugins to actual coding.

● Hands-on in class: Introducing jQuery, which makes a page interactive. One basic interaction is clicking a button to change a page's presentation. ● [ JOUR 553 only ] Review: USC FTP/Grad Template - how to upload your pages to the server. ● Assignment 3: JQuery problem set 1. Due Week 9 before class. This is a set of six interactive paradigms that are common on news sites, including a caption that fades in and out and another that scrolls up when the user mouses over an image. Consider it a worksheet to practice everything we learned in class. ● Reading: JQuery tutorial: http://w3schools.com/jquery/default.asp . Sections 'jQuery Home' through 'jQuery Events.' JavaScript tutorial: http://www.w3schools.com/js/default.asp . Section 'JS Home' through 'JS Comments'