ITD 110 - Web Design I

William M. Pegram
Home | Courses | Web Design | Server-Side Scripting | About Me

ITD 110 Schedule - Section 001N- Spring 2019

Revised: May 2, 2019

The schedule will be updated with links to homework exercises and additional material as the course progresses. The most current copy of this schedule can be found www.billpegram.com. Material below the X in the first column is tentative; students should not work on assignments shown below the X since the assignment will likely change. Some of the HTML/CSS material shown below we may not get to.

	Week	Class Topics	Reading/Homework Due (more will be added as course progresses)
	Week 1 1/15 Course Introduction,	Course information Student email Access your Google Drive and create a folder for ite170 and within that folder, create a folder for inclass work and within that, a folder for today - e.g. day1 or use date	Chapter 1: Introduction to the Internet and World Wide Web
	1/17 HTML	starter.html - a file you can use as a start file for coding in this course Viewing the source code of a web page in a browser - Chrome or Firefox: Right-click in empty area of page (not over an image)> View page source. Edge: Right-click in page> View source File>Open in Browser (Ctrl O in any browser) Introduction to NotePad When you make a change in the file in the text editor, you must save the file and refresh/reload the page in the browser making filename extensions visible: In Windows 10, click on the Folder icon in the task bar to open in File Explorer, then select "View" on the menu and check the box "File name extensions". For earlier Windows operating systems, do a search on this topic. Browsers ignore whitespace in file * <!DOCTYPE html>, <html>. <head>, <body>, head and body sections, <title> tag naming folders and pages - no spaces, lowercase (because case-sensitive on some servers), .html or .htm (use one consistently) for pages Save and refresh - Brackets allows you to skip the refresh * <h1> ... <h6>, <p>, <br>, <hr>, <blockquote>, phrase/logical elements * ordered and unordered lists, special entity characters (e.g.  ) * Structural elements - <div>, HTML5 structural elements: <header>, <nav>, <footer>	Chapter 2 - HTML Basics * HTML Tutorial So You Want to Make a Website Creating Your First Web Page Naming Your Page Viewing Your Page in a Browser Revising Your Web Page Lists W3Schools HTML Tutorial HTML Intro text editors and viewing your page in a browser HTML Basic Examples HTML Elements HTML Attributes HTML Headings HTML Paragraphs
	Week 2 1/22, 1/24 HTML	HTML * absolute and relative links, email links Advantages of NotePad++ over NotePad (once file is saved as html or htm) color-coding can have multiple tabs, one file per tab line numbers tag and attribute suggestions "fold up" sections of code Can launch browser from NotePad++ program to display file in tab Validation Using myDrive as your webspace - myDrive instructions - put everything in a folder called public; the public folder must be part of the URL the user enters in the browser, thus users should not see the myDrive logo or the file manager To upload your files, you can either use the myDrive file manager or use an FTP program such as Core FTP FTP settings using myDrive - Judy Miller video on using Core FTP (11 minutes) - the hostname, username, and password for myDrive are different than indicated in the video but otherwise a good intro Cascading Style Sheets * external, embedded, and inline CSS - external is generally best (ease of maintenance, consistency, responsiveness (can have different styles for different viewports (devices) through use of media queries (later in course) * styling tags - e.g. h2 {color:red} * CSS ways of specifying color - color names, hexadecimal, RGB * commonly used CSS properties - color, font-size, background-color, text-align, font-family (specifying first, second, and third choices) * external, embedded, and inline overriding examples	* HTML Tutorial Linking Validation FTPing to the Server HTML 5 Tags and Attribute reference (from W3C Schools) (for reference) Chapter 3 - Configuring Color and Text with CSS (begin 1/24) Read CSS section of HTML5 Tutorial W3Schools CSS Tutorial
	Week 3 1/29 (class cancelled due to weather) 1/31 CSS	* classes and id's CSS vs. HTML comments * span tag Brackets - File > Live Preview (make sure that "Enable Experimental Live Preview" box is not checked) - when editing HTML, Ctrl E brings up associated CSS Descendant/contextual selectors, use of HTML5 structural elements of <header>, <nav> and <footer> example to work with using inline styles to override using classes to override using contextual with div using contextual with html5 tags	Chapter 2 Case Study now due Feb 1. Upload photo homework due Further references: W3C CSS Reference, CSS validator
	Week 4 2/5, 2/7 Web Graphics,	* images - img tag, height, width, and alt attributes * Making images into links No Control of tiling with HTML * CSS: background-image: url(image filename); background-repeat: repeat (default), repeat-x, repeat-y, or no-repeat Using Vertically Tiled Image with CSS margin property for foreground - solid image Using Vertically Tiled Image with CSS margin property for body tag Using Vertically Tiled Image with CSS margin property for foreground - pattern image There are additional CSS properties concerning background images - CSS background-position, CSS3 Multiple Backgrounds (using background-image), CSS3 background-origin, CSS3 background-clip, CSS3 background-size CSS3 rounded corners (uses border-radius property) Browser prefixes CSS3 box-shadow CSS3 text-shadow CSS3 opacity CSS3 rgba, hsl, and hsla colors CSS3 gradients (linear-gradient, radial-gradient)	Chapter 4 - Visual Elements and Graphics Chapter 3 Case study due 2/12 Image File Types and Exporting from Photoshop
	Week 5 2/12, 2/14 Web Design	Uploading a folder and its contents to myDrive simplest way is to zip the folder (right-click on the folder, and choose Send To>compressed (zip) folder, then upload the zip file, select it, and click on Upzip button at the far right The role of HTML and CSS in a website Downloadable fonts - Use starter as example Google Web Fonts Adobe Edge Web Fonts screen resolution, screen resolution statistics, screen resolution and pixels from cameras - change over time, no universal statistics, statistics will vary by website visited	Chapter 5 - Web Design
	Week 6 2/19, 2/21	Course Information Practice File - how to make it more readable width and height - units can be absolute or percentage; width, min-width, max-width, and height properties various width specifications - learn how to use browser "Restore down" and dragging of border to see how page will look at various screen resolutions Behavior of min-width and max-width * the CSS box model - padding, border, margin Box Model examples div HTML5 Structural Tags div with padding div with margin Browsers will display h1 ... h6 and p tags with margins Margin collapse - two margins collapse into the greater of the two; this happens with vertical margins, but not horizontal * Layout problem with images and text Wrapping img with block level element solution * HTML and CSS solutions for Alignment of Images Page layout - CSS Layout examples from Judy Miller Normal flow one div after another (pp. 250) Normal flow nested divs (p. 250) Float example one Clear example one CSS Float, Clear, and Overflow properties Normal Flow (no float) Float Float and Clear Float and Overflow Divs with only a width specification Divs with a width specification and two floated left Two floated left and two floated right Two-column layout (one way to do it) vertical navigation with unordered list Changing Links Colors with CSS (important to maintain contrast between text and background, when you are changing the background color or image from white)	Chapter 4 Case Study due Deprecated tags and attributes Chapter 6 - Page Layout Chapter 5 Case Study due
	Week 7 2/26, 2/28	Determining and Specifying Size of Image horizontal navigation with unordered list ------------------------------------------- Coding Reminders and Absolute and Relative References Default Pages and Directory Browsing Keywords and Description Meta tags - important for search engine optimization (SEO) and click-through rates (pp. 550-551)
	Week 8 3/5, 3/7	Named Anchors/Fragment Identifiers - fragment identifier example, Skip Navigation links article CSS media attributes of print and screen example with separate external css files for different media example with embedded stylesheet example with single external stylesheet CSS3 media queries - two column example with media query going to 1 column under 768px flexible images img with no specification of height and width img with height and width in pixels flexible image - if in percent, percent of the containing block - see max-width	Chapter 6 Case Study due March 4 Chapter 7 - More on Links, Layout, and Mobile
	3/12, 3/14	NVCC Spring Break - no classes
	Week 9 3/19, 3/21	Midterm ITD 110 Technical Terms Sample Questions Multiple Choice Test - 3/19 Hands-On Test 3/21
	Week 10 3/26, 3/28	Chapter 8 - Tables Tables section of Judy Miller tutorial Chapter 9 - Forms
	Week 11 4/2, 4/4	Chapter 10 - Web Development
X	Week 12 4/9, 4/11	CSS Drop Down Menu (html only) CSS Transitions - see example on Blackboard Putting movie on web page using HTML5 video tag Sample mov file	Chapter 11 - Web Multimedia and Interactivity
	Week 13 4/16, 4/18	Chapter 12: E-Commerce Overview Chapter 13: Web Promotion
	Week 14 4/23, 4/25	Create an html file by copying and pasting a basic Bootstrap 4 template (uses CDN) - Comments about the template code Comments about changing Bootstrap styles Alternatively, Download Bootstrap 4.3.1 (choose the compiled CSS and JavaScript option, unzip the zip file and you will have 2 folders - css and js - view contents of each. Create a Hello World file, with h1 formatting, outside of these two folders. Add references to the CSS and js files you have downloaded. If properly hooked up, the template file will still have the same appearance as wehn you used the CDN (sans-serif, no margin). Also in Chrome, choose Inspect>Console and check for errors. Template code reference to jQuery on CDN and to download code - for CDN, copy and paste URL; to download, (right click and choose Save as") and then reference the downloaded file (3.x) Get a Bootstrap component (click Components at the left at https://getbootstrap.com/docs/4.3/getting-started/introduction/ and place it into your html starter file - e.g. navbar - sample resulting file (using Bootstrap 4.0) Bootstrap 4 Carousel (Bootstrap site) Bootstrap 3 Carousel Tutorial Bootstrap 3 Carousel reference Judy Miller writeup sample images for carousel carousel with the sample images (Bootstrap 3) Bootstrap 4 Containers and Breakpoints Bootstrap rows and columns Notes on the Bootstrap 4 .css file
	4/30, 5/2	Applying multiple column classes to an element Bootstrap 4 Row and Column Practice Media query correct order Media query incorrect order Doing the W3Schools "Simply Me" Bootstrap Theme (recommend using bootstrap.css file rather than minified so you can look up Bootstrap class definitions) - This Bootstrap 3 example needs a few modifications for Bootstrap 4 Chapter 14 - JavaScript and jQuery
	Week 15 Tuesday 5/7 2-3:40pm	Final Terms you should understand