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