EUP Logo

CSCI 123 Introduction to Web Development
Spring 2019

Link to Assignments and Due Dates

Week Topics Covered

Week 1

1/14

 

Introduction to the course

  • Go over syllabus
  • What you'll learn
  • What you need
  • Assignments
  • Grading
  • Expectations
  • Lab time
  • Edinboro Network
  • Take roll
  • Make sure all of us can run the Adobe software
  • Make sure you all want to learn about making web pages!!
  • Take notes because all the necessary information is not in the book.

Your Homework Website:

Implement the following:

  • Create the initial web page for every student that has a link to all future homework
  • Make it live on the eup web server
  • Briefly explain how internet works as it relates to Edinboro and your web pages.
  • Make sure we can all get to the EUP WebDir directory
    In Windows Expplorer -> \\eup\dfs\webdir\dt123456
    In a browser -> http://users.edinboro.edu/dt123456

Web Site Work flow:

  1. Define scope of project, objectives, target audience, schedule & available resources
  2. Develop Design strategy and establish the look and feel of the web pages
  3. Develop Prototype (This will be our actual site)
  4. Present to client
  5. Assemble & create the web site.

Start Chapter 1 - How the internet works

1/21

No Class Monday
MLK Day

Chapter 1 - Internet and web page basics

  • Chapter 1 Notes
  • Discuss what we'll use to create web pages.
  • Notepad vs. Dreamweaver vs. Brackets
  • Work on making our homework page
  • Introduce Brackets (hopefully)

Steps to Create a Web Site

  1. Create the folders you will need in Windows Explorer
  2. Create a new HTML document
  3. Create your first page (index.html) in your web site.
  4. Notes on how to start your web pages

  ***  Don't forget to make Folders!!   ***
  ***  Don't forget "No spaces in folders or web page names!!" these become URLs    ***

Chapter 2 - HTML Basics

  • Finish Chapter 1 notes
  • Create a template.html page for trying new things

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body>

</body>
</html>

  • Start Chapter 2 Notes if time
    • Heading
    • Paragraph
    • Line break vs. new paragraph
    • Lists
    • Special Characters
    • HTML syntax validation
    • Anchor
    • Hyper-link
    • e-mail link
  • Let's do some hands-on exercises from the book in chapter 2. (Maybe 2.4)

 
1/28

Chapter 2 - HTML Basics

  • Finish Chapter 2 Notes
  • Make a page using heading elements for our fonts
  • show example of <br> vs. <p>
  • Make ordered and unordered lists
  • Use of anchors
  • hyper-links
  • make an e-mail hyper-link
  • Talk about Yoga Studio Case Study

Chapter 3 Web Design Basics

2/4

 

Chapter 3 Web Design Basics & FTP

  • Discuss FTP:  File transfer protocol → you can use this to copy files to the web server from home or anywhere you are not logged into the Edinboro Network. 
    1. Open Windows Explorer
    2. type in ftp://webstorage.edinboro.edu
    3. Login
    4. This will open up the folder containing your files
    5. Open another instance of windows explorer
    6. Use drag-and-drop to copy your files to the web server
  • Take a look at Photo shop
    • Color Selection
    • Making a simple gif
    • GIF vs. JPG vs. PNG
    • Let's make a small background image and put it on a new web page.

Chapter 4 - Cascading Style Sheets

  • Chapter 4 Notes
  • Finish the discussion on HTML
  • Work on the Pacific Trails in-class example
  • If time - Open our Template & make CSS styles
    • Inline
    • Embedded
    • External
    • Class Selector
    • ID Selector
    • Descendant Selector
  • Hands-On Practice 4.1 → template.html (download or use the one you made earlier)
  • Hands-On Practice 4.3
  • Hands-On Practice 4.4 → embedded.html
  • Hands-On Practice 4.5 → starter.html

 
2/11

Chapter 4 - Cascading Style Sheets

  • Continue with some examples
  • Discuss the exam

Exam 1:
Boro: Feb 15th
Porreco: Feb 14th
2/18

Chapter 5 - Web Graphics Styling Basics

Solution to Pacific Trails up to Chapter 4

 
2/25

Chapter 6 - More CSS

Image Map (not in the book)

 
3/4
Spring Break
3/11

Chapter 7 - Page Layout Basics

  • Vertical and horizontal navigation
  • Using CSS
  • Using DIV and their placement

 
3/18

Chapter 8 - More on Links, Layout, and Mobile

  1. Chapter 8 Notes
  2. Maybe Some Photoshop stuff
    • Insert a banner up top
    • Make a cell per navigation
    • Make buttons in Photoshop (designed for rollovers)
    • insert them
    • make links
    • Insert and center a table

Discuss the exam

  • Chapter 5 - Graphics and Styling
  • Chapter 6 - More CSS
  • Chapter 7 - Page Layout
  • Chapter 8 - More on Links, Layout, and Mobile

I'm thinking a practical exam, create a web site and e-mail me the URL.

 

 
3/25

Review for the Exam

I'll be at a conference for part of this week, I will have proctors for the exams

Review: Exam 2 Notes

Review Practice Sheet

Exam 2 - Chapters 5 through 8
Boro: March 27th
Porreco: March 26th
4/1

Chapter 9 - Table Basics

 
4/8

Chapter 10 - Form Basics

  • Our server doesn't support server side programming though
  • Chapter 10 Notes
  • Work on Form
4/15

Chapter 11 - Media and Interactivity Basics
4/22

Working with MS Word
4/29

Java Script

Lets Make a web page that caclulates something, like maybe a temperature converter. We'll use forms.

Link to the Javascript page

Review for Final

Review Notes


Final Exam

Boro : Final Exam , Friday May 3rd @ 10:15

Porreco: Final Exam, Tuesday April 30th @ 12:30
 

 

Is on Fridays !

 Assignments
Due Date Description
Some Notes

Homework Files → Files for the Hands-On Exercises

Author's web page where you can download the files and unzip them

Notes on how to start your web pages

Porreco Homework Page -> get Pacific Trails HTML and CSS from here
Boro Sample page

2/1

Chapter 2 - Hands on Practice Exercises staring with 2.3
** Skip hands on 2.10 **
Case study Path of Light Yoga Studio - starts on Page 65

2/8

 Chatper 3 - Hands on Exercise number 1 only.  → Make a simple web page for your answer and link to your homework page.  For part ' g. ' just list the Best Practices that they did not follow.  If you don't like any of the ones listed you can choose your own.
* No Path of Light Yoga Studio for Chapter 3 *

2/13

Chapter 4 Hands-On Practice Exercises except 4.8.

Chapter 4 Modify your Path of Light Yoga Studio web page.

2/22

Chapter 5 Hands-On Practice Exercises

Path of Light Yoga Studio for chapter 5

3/1

Chapter 6 Hands-On Practice Exercises

Chapter 6 Path of Light Yoga Studio

3/15

Chapter 6 Yoga Studio Solution (so you can can catch up if needed) - view source and copy the HTML, you may also need to get the css file. This works best when using Goole Chrome.

Chapter 7 Hands-On Practice Exercises

Chapter 7 Path of Light Yoga Studio

3/20

Chapter 8 Hands-On Practice Exercises

Note: in 8.7 you need to delete the "nav" from the bottom list of style declarations for the print to work correctly (taking out the menu) in the BistroPrint.css

Chapter 8 Path of Light Yoga Studio

3/29

Chapter 9 Hands-On Practice Exercises

Chapter 9 Path of Light Yoga Studio

4/5

Chapter 10 Hands-On Practice Exercises

Chapter 10 Path of Light Yoga Studio

4/12

Chapter 11 Hands-On Practice Exercises

Chapter 11 Path of Light Yoga Studio

4/19

 Word assignment
4/26 Java Program

 

 

Some Helpful Sites:

How to prevent your AP Divs from not positioning correctly when your page size adjusts → http://www.youtube.com/watch?v=c_94YxbUFAc