EUP Logo

CSCI 123 Introduction to Web Development
Fall 2021    

Link to Assignments and Due Dates

Week Topics Covered

Week 1



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

    For example, if your login name was dt123456:

    When taking the course on campus:
    In File Explorer -> \\eup\dfs\webdir\dt123456

    When taking the course from home:
    Using FTP-> in file explorer type into the address bar:
    Then login using your EUP login. Then you'll have access to your webspace
    You then create your webpages on your computer, when finished you copy them up to the webstorage directory. Make sure you use good directory strutucure.
      1. Open File Explorer
      2. type in in the adresss bar up top.
      3. Login
      4. This will open up the folder containing your files
      5. Open another instance of File Explorer
      6. Use drag-and-drop to copy your files to the web server

To see your web page live on the Internet:
In a browser ->

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


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">
<title>Page Title Goes Here</title>
<meta charset="utf-8">


  • 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)

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

Zoom recording of 9/8/2021



Chapter 4 - Cascading Style Sheets


Chapter 4 - Cascading Style Sheets

  • Continue with some examples
  • Move ahead and cover chapter 5
Zoom recording of 9/20/2021 - We covered chapter 5, talking about images and fonts.
Zoom recording of 9/22/2021 - We did the chapter 5 Pacific Trails case study.

Exam 1:
Sept. 29th - You can take this in class or remote via zoom. I'll be in class to answer questions

  • Discuss the exam

  • Chapter 5 - Web Graphics Styling Basics

    Solution to Pacific Trails up to Chapter 4


    Chapter 6 - More CSS


    Chapter 7 - Page Layout Basics



    Chapter 8 - More on Links, Layout, and Mobile


    Review for the Exam

    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.


    Review: Exam 2 Notes

    Zoom recording of 10/25/2021 - We create the Exam 2 practice site.

    Review Practice Sheet

    Exam 2 - Chapters 5 through 8




    Chapter 9 - Table Basics


    Chapter 10 - Form Basics

    Chapter 11 - Media and Interactivity Basics



    Working with MS Word


    Java Script

    Review for Final

    Review Notes

  • Zoom recording of 11/29/2021 - 2nd Part of Java Script Loan Calculator
  • Zoom recording of 11/29/2021 - 1st part of Final Review
  • Zoom recording of 12/01/2021 - 2nd part of Final Review
  • 12/6

    Final Exam

    Final Exam , Wednesday December 8th
    Should be at 3:00


    Is on Fridays !

    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
    My Sample Homework page - you can view source on the Pacific Trails case studies to catch up.


    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


    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 *


    Chapter 4 Hands-On Practice Exercises except 4.8.

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


    Chapter 5 Hands-On Practice Exercises

    Path of Light Yoga Studio for chapter 5


    Chapter 6 Hands-On Practice Exercises

    Chapter 6 Path of Light Yoga Studio


    Chapter 7 Hands-On Practice Exercises

    Chapter 7 Path of Light Yoga Studio


    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


    Chapter 9 Hands-On Practice Exercises

    Chapter 9 Path of Light Yoga Studio


    Chapter 10 Hands-On Practice Exercises

    Chapter 10 Path of Light Yoga Studio


    Chapter 11 Hands-On Practice Exercises

    Chapter 11 Path of Light Yoga Studio

    12/3 or earlier we'll do this in class.

    Word assignment
    12/3 also we'll do this toward the end of the semester in class Java Program



    Some Helpful Sites:

    How to prevent your AP Divs from not positioning correctly when your page size adjusts