Web Design 1

Description

This course is designed to provide students with the knowledge and skills needed to design, develop, and maintain websites using HTML5, CSS3, JavaScript and appropriate authoring tools.

Prerequisites

Completing an entry-level Computer Science course prior to taking this course is strongly encouraged.

State Standards

State standards can be viewed at the following link: https://ed.sc.gov/instruction/career-and-technology-education/.

Software and Materials

The primary development environment will be Visual Studio Code which is a free, cross-platform text editor. Students are encouraged to download and install this program at home. In addition, Google Apps for Education will be integrated into the course. Students will need to use the Chrome web browser to access many course materials as well as submit assignments.

Since most work will be done on computers, very little in the way of materials will be needed in class. Most assignments will be distributed digitally. A small folder should be enough to keep up with occasional notes or handouts.

Evaluation

Grading will be done on weighted category system. Major assessments will count for 60% of your term grades. Minor assessments (quizzes and daily work) will count for the remaining 40%. Within each category, a point system will be used. Point values for each assignment may vary based on difficulty and time needed to complete.

All major assessments will be projects where you create a complex program. Early websites may take 2-3 days to complete. Later in the year, websites may take up to 3 weeks of class time to complete. After some lessons, quizzes will be given. In most cases, you will be allowed to discuss quizzes with a partner while you work. I feel that having the opportunity to "talk through" concepts is a very effective way to reinforce understanding of programming concepts. Most daily work will be graded on completion. Understand that "completion" means completed to 100% correctness. You may not get partial credit for daily work. Also, not all daily work will be graded, and refusal to complete daily work may be treated as a disciplinary issue.

The following grading scale will be used:

A = 90-100 points

B = 80-89 points

C = 70-79 points

D = 60-69 points

F = below 60 points.

At the conclusion of the semester, a cumulative exam will be given. The exam will count for 10% of the overall course grade. There will be no exam exemption.

Late Work Policy

For project-based major assessments, you will be given two deadlines. The first is a "soft deadline" which is the last day you will be given class time to work on a project. The second is a "hard deadline" which is the last day a project will be accepted for full credit. The hard deadline will generally be 5 school days after the soft deadline. It is okay if projects are not completed by the soft deadline, but understand you will need to either stay after school to continue working or work at home. Projects turned in after the hard deadline will have points deducted according to the J.L. Mann Late Work Policy. Students whose accommodations allow for extended time on projects should understand the period between the soft and hard deadlines is your extended time.

For all other late assignments, points will be deducted according to the J.L. Mann Late Work Policy.

In cases of extended absence or hardships, please see me to discuss individual due-date extensions. Any extension should be discussed prior to the initial deadline.

Topics

Instruction will be built around 10 major projects that we will complete this year. Each project will introduce new topics and enhance existing skills. A brief description of each project and the corresponding skills is given below:

Project 1: Past, Present, Future

Create a styled, one-page website about your Past, Present, and Future.

Topics:

  • Web authoring software

  • File extensions and file naming conventions


  • HTML document structure

  • Basic HTML markup (headings, paragraphs, bold/italics, images, and hyperlinks)

  • Semantic document structure (heading hierarchy)

  • Basic CSS (colors, fonts, text-alignment, styling links)

  • HTML lists

  • More CSS (borders, margins, padding)

  • Image Alignment (using classes to float & center)

  • Web fonts

  • Using CSS to enhance responsiveness and readability

  • Viewports & Device vs. CSS Pixels


Project 2: Fan Site

Create a page showcasing a travel destination or make a fan site for a sports team, band, movie, etc.

Topics:

  • Hexadecimal color values

  • Resizing and cropping images

  • Digital image formats & compression

  • HTML tables

  • More CSS classes (styling tables)

  • Copyright

Project 3: Charity Event

Create a styled, one-page website for a charity event with a sign-up form. (Examples: a 5K race, Hands On Greenville, a church fundraiser, school fair, walk-a-thon, etc.)

Topics:

  • Layout using CSS grid

  • Mobile-first design & responsive layouts

  • Forms

  • Form validation

Project 4: Restaurant

Create a mobile-friendly, two-page restaurant site.

Topics:

  • Using CSS frameworks (Odin)

  • Favicons

  • Web hosting

Project 5: School

Create a site for a school with a home page, staff directory, photo gallery, and teacher pages. This project can be done collaboratively with one other person.

Topics:

  • Site navigation

  • File organization

  • Photo galleries (Lightbox)

  • Accessibility

Project 6: PatFeed Quizzes

What's even more absurd than a BuzzFeed Quiz? The PatFeed Quizzes we'll make!

Topics:

  • JavaScript events

  • JavaScript mathematical expressions

  • JavaScript functions

  • JavaScript conditionals

  • JavaScript DOM

  • JavaScript form processing

Project 7: Sporclone

Use JavaScript to create your own games similar to those on the site Sporcle.com.

Topics:

  • JavaScript strings

  • JavaScript loops

  • JavaScript timers

  • JavaScript arrays

Project 8: Online Store

Create an online store that sells multiple products. Your store will use JavaScript to create a working cart.

Topics:

  • JavaScript local storage