Fundamentals of Web Scripting (CL DSN2043 - Web Scripting)

Intro

Announcement

This course is listed as GWDA133 - Fundamentals of Web Design and is cross-listed as the following:

  • WDM1003 - Introduction to Client-Side Languages
  • DSN2043 - Web Scripting
  • GWDA133 - Fundamentals of Web Design

Week 1

In-Class

Lesson

 Introduction to HTML5 (Part 1)
 Resource: FTP in Microsoft Windows
 Resource: FTP in Fetch on Mac

In-Class Assignment

  • Create a Basic Page That Utilizes All of the Tags (Elements) Presented
  • Upload to FTP - in-class/week_01/

Homework Assigned

Article Formatting

  • Open article in link below
  • Utilizing a text editor of your choice, create an HTML5 document that renders a page formatted like the downloaded PDF file
  • Submit the file to FTP - homework/week_01/

 Article for Formatting

Reading

  • Read Chapter 2 (eBook)
  • Complete Reading Assessment Week 1 - Reading Assessment in eCompanion

Week 2

Homework Due

  • Article Formatting
  • Chapter 2 Reading & Assessment

In-Class

Lesson

 Introduction to HTML5 (Part 2)

In-Class Assignment

  • Create a Basic Page That Utilizes All of the Tags (Elements) Presented
  • Upload to FTP - in-class/week_02/

 Resource: FTP in Microsoft Windows
 Resource: FTP in Fetch on Mac

Homework Assigned

Frank Lloyd Wright Mini-Site

  • Download Needed Files From Link Below
  • Using the Content from the Archive, Create a 3-Page Mini-Site About Architect Frank Lloyd Wright. Each page must contain content, a single image, headings, and a page title.
  • All pages must be cross-linked to each other through a single common/consistent text-based link navigation.
  • Submit the site to FTP - Week-02/homework/

 Archive: FLW Materials

Reading

  • Read Chapters 5 & 6 (eBook)
  • Complete Reading Assessment Week 2 - Reading Assessment in eCompanion

Week 3

Homework Due

  • FLW Single-Column Multi-Page Website
  • Chapters 5 & 6 Reading and Assessment

In-Class

Lesson

 Introduction to CSS3

In-Class Assignment

  • Create a Basic 3-Page Website That Utilizes All of the HTML5-Specific Elements and Custom Classes. Must contain:
    • 3 Pages Cross-Linked to Each Other
    • CSS Declaration for ALL HTML5-Specific Elements
    • CSS Declaration for a Minimum of 2 Custom Classes
  • Upload to FTP - Week-03/in-class/

Homework Assigned

Frank Lloyd Wright Mini-Site

  • Using the website that you created for homework last week over architect Frank Lloyd Wright, create and apply a stylesheet that performs the following:
    • Headings in a serif font
    • Body text in a sans-serif font
    • Page background color other than white
    • Font color other that black (must compliment the page background color)
    • Articles to have a 50px margin on all sides.
    • Articles are to have a background color separate from Body. Be consistent through site.
    • Footer text is 9pt, wide letter spacing, with the body background / body text colors inverted.
  • Submit the ZIP/Compressed Folder to eCompanion Week 3 Dropbox

 FLW Sample

Reading

  • Read Chapters 7 & 8 (eBook)
  • Complete Reading Assessment Week 3 - Reading Assessment in eCompanion

Week 4

Homework Due

  • FLW CSS Formatted Multi-Page Website
  • Chapters 7 & 8 Reading and Assessment

In-Class

Lesson

 Fixed-Width Grid Design
 960px 12-Column Stylesheet

In-Class Assignment

  • Create a personalized 960px 12-column stylesheet based on the topics covered in the presentation.

Homework Assigned

Personal Grid & Layout

  • Based on the grid created in class today, create a basic page layout for your project site.
  • Use the Illustrator template file below

 960px 12-Column Sketchsheet
 960px 12-Column Template

Graphics Sizing

  • Based on your design, it is time to start creating/sizing images for deployment on your project site.
  • Resize the image (with artboards trimmed/cropped as tight as possible) to the following:
    • 1 Column Span - 60px
    • 2 Column Span - 140px
    • 3 Column Span - 220px
    • 4 Column Span - 300px
    • 5 Column Span - 380px
    • 6 Column Span - 460px
    • 7 Column Span - 540px
    • 8 Column Span - 620px
    • 9 Column Span - 700px
    • 10 Column Span - 780px
    • 11 Column Span - 860px
    • 12 Column Span - 940px
  • Export into a web-friendly format
    • PNG-24, PNG-8, GIF, or JPEG

Reading

  • Read Chapters 10 (eBook)
  • Complete Reading Assessment Week 4 - Reading Assessment in eCompanion

Week 5

Homework Due

  • 960p 12-Column Site Plans
  • Graphical Asset Resizing
  • Chapters 10 Reading and Assessment

In-Class

Lesson

 Fixed-Width Grid Design (Application)
 Fixed-Width Image Placeholders

In-Class Assignment

  • Create a text page similar to the trial utilizing your personalized 960px 12-column stylesheet.

Homework Assigned

Site Build

  • Start Site Build
    • Suggestion: Create major custom artistic CSS classes

Reading

  • Read Chapters 14 (eBook)
  • Complete Reading Assessment Week 5 - Reading Assessment in eCompanion

Week 6

Homework Due

  • Progress Toward Site-Build
  • Chapters 14 Reading and Assessment

In-Class

Lesson

 CSS Typography

In-Class Assignment

  • Hands-On Work with CSS Typography
  • Project Workshop

Homework Assigned

Continue Site Build

  • Continue Site Build
    • Suggestion: Get One Page Fully Built and Populated with Content

Reading

  • Read Chapters 13 (eBook)
  • Complete Reading Assessment Week 6 - Reading Assessment in eCompanion

Week 7

Homework Due

  • Progress Toward Site-Build
  • Chapters 13 Reading and Assessment

In-Class

Lesson

 HTML5 Forms

In-Class Assignment

  • Hands-On Work with HTML5 Forms
  • Project Workshop

Homework Assigned

Continue Site Build

  • Continue Site Build
    • Suggestion: Copy Completed Page and Replace Content for Subsequent Page(s)

Reading

  • Read Chapters 16 (eBook)
  • Complete Reading Assessment Week 7 - Reading Assessment in eCompanion

Week 8

Homework Due

  • Progress Toward Site-Build
  • Chapter 16 Reading and Assessment

In-Class

Lesson

 HTML5 Multimedia
 Video - MP4 Format
 Video - OGG Theora Format
 Video - WebM Format
 Audio - MP3 Format
 Audio - OGG Vorbis Format
 Audio - WAV Format

In-Class Assignment

  • Hands-On Work with HTML5 Multimedia
  • Project Workshop

Homework Assigned

Continue Site Build

  • Continue Site Build
  • Snap-Shot Presentations Next Week

Week 9

Homework Due

  • Progress Toward Site-Build
  • Ready for Project Snapshot Presentations

In-Class

In-Class Assignment

  • Project Snapshot Presentations

 Project Rubric

Homework Assigned

Continue Site Build

  • Continue Site Build

Final Presentation Prep (Graduates)

  • Upload to FTP
  • Prepare Answers to Following Questions:
    • Who is Your Target Audience?
    • What is the Purpose of the Site?
    • How Would You Gauge if the Site is Successful?

Reading

  • Read Chapters 20 (eBook)
  • Complete Reading Assessment Week 9 - Reading Assessment in eCompanion

Week 10

Homework Due

  • Progress Toward Site-Build
  • Chapter 20 Reading and Assessment

In-Class

In-Class Assignment

  • Project Workshop
  • Graduate Final Project Presentations

 Final Presentations

Homework Assigned

Finalize Site Build

  • Finalize Site Build

Final Presentation Prep

  • Upload to FTP
  • Prepare Answers to Following Questions:
    • Who is Your Target Audience?
    • What is the Purpose of the Site?
    • How Would You Gauge if the Site is Successful?

Reading

  • Read Chapters 21 (eBook)
  • Complete Reading Assessment Week 10 - Reading Assessment in eCompanion

Week 11

Homework Due

  • Progress Toward Site-Build
  • Chapter 21 Reading and Assessment

In-Class

In-Class Assignment

  • Final Project Presentations

Contact informatie

Samen met ons een MKB of ZZP website pakket samenstellen?

Kom dan langs op ons kantoor in Wageningen.

Spiderman Webdesign - dewebmeester.nl

Hanenhof

Costerweg 1D

6702AA, Wageningen

Tel.: 085 888 58 69

Schrijf u in voor de maandelijkse nieuwsbrief

Schrijf u in voor de nieuwsbrief en ontvang elke maand een gratis tool, software of webcontent en blijf op de hoogte wat betreft ontwikkelingen binnen MKB wat betreft websites en applicaties.

Door in te schrijven stemt u in met ons
Privacy beleid.
HTTPS, SSL en GDPR (AVG)

Is uw website al beveiligd met een SSL certificaat? Kunnen uw bezoekers uw website vertrouwen? Zorg dat uw website zonder fouten zichtbaar is via https en laat dit regelen voor 40 euro per website door dewebmeester.nl
GDPR proof? Privacy reglement en cookie meldingen geïntegreerd in uw website? Laat ook dit regelen door dewebmeester.nl

ssl secure website