Creating a Website: The Missing Manual

Matthew MacDonald
3^rdEdition
ISBN: 978-1-449-30172-9

Online Resources & References

Brackets Web Editor and Google Chrome browser

Brackets is an open source code editor for web designers and developers. It includes several powerful tools, including a JavaScript debugger. Projects and exercises in this course are based on code developed in Brackets (http://brackets.io/) and running on Chrome (https://www.google.com/intl/en/chrome/browser/).

Assorted Tutorials

To help you learn the development tools used in this course, such as JavaScript and CSS, we have provided links to tutorials. Since web sites move frequently, some of these links may be broken. If so, we recommend you independently locate tutorials on the same skills.

COURSE GRADING

Project/Deliverables	Percent of Grade
Project 01: HTML Customer Website	15%
Project 02: CSS Customer Website	20%
Project 03: JavaScript Customer Website	25%
Project 04: Customer Research 1 Presentation 1 Research Paper	20%
Midterm Assessment	10%
Final Assessment	10%
Class Participation	±10%
Total	100%

There is no curve for this course.

An “A” grade requires at least a 90%.

A “B” grade requires at least an 80%.

A “C” grade requires at least a 70%

A “D” grade requires at least 60%.

For All Deliverables

Submit via LMS
Due at the time specified by the instructor.
-10% of earned grade per day for late submissions
Negotiate accommodation for unavoidable situations, such as illness and family emergency, with instructor

COURSE POLICIES AND EXPECTATIONS

Academic integrity

The professors believe in and support the Policy on Academic Integrity.

The assignments in this class are designed to help you absorb and comprehend the covered topics. Doing the work is much more important than getting the right answer.
Avoid even the appearance of cheating or inappropriate copying.
If you use the work of others—whether cutting and pasting code from the Internet, quoting words from the textbook, or sharing insights from your fellow classmates, you must giveproper credit. Honor these people by properly acknowledging them and their work.
You may only get help on graded assignments from designated people. If you are struggling with an assignment, by all means seek help from your instructors, staff tutors, or any faculty member. They may help you at the computer, on paper, or any way they believe will be effective. Do not share or get help from any other sources.
You may get TAs to help with out-of-class assignments, but only your professor is allowed to help you debug your programs.
You are encouragedto talk through concepts and ideas with your fellow students and to study with them, but do notgive or receive direct help from your classmates on a graded assignment.Never show your work to your classmates or seek tosee their work.
We live in a time when a vast amount of information is available online. You can easily find example source code or answers to questions on assignments. Before you copy such information and turn it in, ask yourself if you are misrepresenting it as your own work. If it has your name on it, you are. This is cheating.
On the other hand, reading a Wikipedia page that helps you understand an important concept is perfectly acceptable. There is a wide grey area between these examples. Ultimately, what counts is the instructors' judgment, so be cautious. If you're ever unsure about whether or not a resource is permissible, seek clarification before you use it. It is better to ask than to discover the hard way.
The severity of sanctions imposed for an academic integrity violation will depend on the severity of the transgression and ascertained intent of the student. Penalties for a first offense may range from failing the assignment to failing the course and referral to an academic review board.

COURSE CALENDAR

Topics	Assigned ReadingsDue Next Class	Deliverables Due Next Class
Week 01
Class 01: Course Introduction	Welcome to iCarnegie and Parallax Getting Started with SDP – Student Parallax Welcome iCarnegie Consulting Welcome Brochure Parallax Pemex Brochure Parallax Press Release Creating a Website: pages 19-35 Read about the following tags at w3schools.com: <!DOCTYPE> <html> <head> <meta> The Meaning of All <meta> Tags <meta> charset <title> <body> <!—comment --> <h1> to <h6> <p> Bookmark the following page: HTML Tag Reference
Class 02: HTML: The Bones of a Website	Creating a Website: pages 35-48 Read about Brackets, the code editor you will install and use in the next class: http://brackets.io/?lang=en Watch these short videos about Brackets: https://www.youtube.com/watch?v=Nhvj1NYC3Uc&feature=youtu.be https://www.youtube.com/watch?v=rvo3Mv1Z4qU&feature=youtu.be Even if you don’t understand much of the information in the above videos, they will give you a glimpse into the cool things you will be doing in the next few weeks.
Class 03: Adobe Brackets	Creating a Website: pages 103-123, 128-130 Read about the following tags at w3schools.com: <hr> <dl> <dt> <dd> <ol> <ul> <li> <sup> <sub> <small> <cite> <abbr> <br> <blockquote>
Week 02
Class 04: HTML Text	Creating a Website: Pages 183-207 Learn how to embed YouTube videos:https://support.google.com/youtube/answer/171780 Read about the following subjects at w3schools.com: <img > HTML Style — CSS CSS Background Property
Class 05: Pictures and Videos	Creating a Website: Pages 124-127 Read about the following subjects at w3schools.com: HTML Forms and Input <fieldset > <legend> <form> <label> <input> <textarea> <label> <select> <optgroup> <option> <table> <tr> <th> <td>
Class 06: Tables and Forms	Creating a Website: Pages 117 - 118 Read about the following subjects at w3schools.com: <div> class id HTML5 Semantic Elements <header> <nav> <main> <footer>
Week 03
Class 07: Divs, Classes, ID’s, and Semantic HTML	Creating a Website: Pages 213 - 225 Read about the following subjects at w3schools.com: HTML Links <a> href Attribute Email Link HTML tabindex
Class 08: Links		Project 01 due by 8 pm of the evening of Class 09
Class 09: Project 01 Review	Visit http://www.csszengarden.com/and view at least three designs. Notice how dramatically CSS can change the appearance of an HTML page. All of the CSS Zen Garden designs have identical HTML Understanding CSS Specificity CSS Specificity and Inheritance	Answer the following questions in your Engineering Notebook: What worked best in Project 01 for you? What could be improved? What additional thoughts or comments do you have about Project 01?
Week 04
Class 10: The CSS Specificity Wars Card Game	Creating a Website: Pages 135– 149 CSS Style Sheets CSS Syntax CSS Selectors Reference CSS Property: Color CSS Shorthand for the Hexadecimal Color Value HTML Color Picker
Class 11: Intro To CSS: The Inheritance, The Cascade, and the Specificity Wars	Creating a Website: Pages 149– 167 Font Family Font Size Font Weight Font Style Line Height Text Align Text Transform List Style CSS Pseudo-Classes Text Decoration
Class 12: CSS Properties Part 1	Creating a Website: Pages 171 – 182 Width Height Margin Padding Border Background Box Model CSS Positioning Class Position Top Right Bottom Left Display Float Clear Overflow Z Index
Week 05
Class 13: CSS Properties Part 2	Google Fonts A Quick Example Overview Syntax Subsets Border Collapse Cursor
Class 14: Style the Style Guide	Creating a Website: Pages 239 – 253 Last Child Selector
Class 15: CSS Layout Part 1 - Header	Creating a Website: Pages 254 – 265
Week 06
Class 16: CSS Layout Part 2 - Footer	Transition
Class 17: CSS Layout Part 3 - Main		Project 02 due by 8 pm of the evening of Class 18
Class 18: Project 02 Review		Study for the Mid-Semester Assessment
Week 07
Class 19: Mid-Semester Assessment	Creating a Website: Pages 423 – 430 Read the following sections of the Chrome DevTools API (Link: https://developers.google.com/chrome-developer-tools/docs/console) Using The Console Basic Operation Opening The Console Clearing The Console History Console Settings Using The Console API Writing To The Console Errors And Warnings Math Object - Reference Math Object - Tutorial Comparison And Logical Operators
Class 20: Introduction to JavaScript	Creating a Website: Pages 431 – 438 Variables Tutorial Functions Tutorial Document.write() Tutorial
Class 21: Variables and Functions	Creating a Website: Pages 439 – 448 Popup Boxes Tutorial Objects and Object Literals Tutorial If-Else Statements Tutorial Arrays Tutorial For Loops Tutorial
Week 08
Class 22: If/Else, Arrays, and Loops	Creating a Website: Pages 449 – 458 HTML Option Tag Tutorial
Class 23: Interactive Forms	Creating a Website: Pages 459 – 464 jQuery Home Page How jQuery Works(Read until you get to the “Adding and Removing an HTML Class” section) Google Hosted Libraries – Developer’s Guide jQuery Link
Class 24: Introduction to jQuery	jQuery API jQuery .scrollTop()
Week 09
Class 25:jQuery – Sticky Nav	Lean Slider Lean Slider Download
Class 26: jQuery Slideshow Plugin	Read the following sections of the Google Maps JavaScript API v3 Tutorial: Getting Started Audience Obtaining an API Key Hello, World Declaring Your Application as HTML5 Loading the Google Maps API Map DOM Elements Map Options The Map Object Loading the Map Troubleshooting Video: Google Maps Garage: Where's My Map! Google Maps Simple Map Example
Class 27: Introduction to Google Maps	Read the following sections of the Google Maps JavaScript API v3 Tutorial: Markers Introduction Add a marker Remove a marker Animate a marker Customize a marker image Simple icons View the Google Maps Simple Markers Example View the Marker Animations Example Learn how to convert latitude/longitude strings to numbers for the Google Maps API
Week 10
Class 28: Google Map Markers	Read the following sections of the Google Maps Javascript API v3 Tutorial Markers Customize a marker image Complex icons Symbols, also called vector icons Make a marker draggable Google Maps Simple Icon Example Google Maps Complex Icon Example
Class 29: Markers and Icons	Read the following sections of the Google Maps JavaScript API v3 Tutorial Info Windows Introduction Add an info window Open an info window Close an info window Move an info window Google Maps Info Windows Example IMPORTANT: Read tutorial on Creating Google Maps with Multiple Markers and InfoWindow. (The Google Maps API does not clearly explain how to do this.) Notice how the code in the above tutorial automatically centers the map
Class 30: Info Windows	Google Maps JavaScript API v3 Shapes Tutorial: Polylines Add a polyline Google Maps JavaScrips API v3 Geometry TutorialOverview Spherical Geometry Concepts Distance and Area Functions Navigation Functions
Week 11
Class 31: Polylines and Measuring Distances with the Geometry Library	How to Convert Latitude and Longitude Strings
Class 32: Combining Interactive Forms With Google Maps		Project 03 due by8 pm of the evening of Class 33
Class 33: Project 03 Review	Analyzing, Interpreting and Reporting Basic Research Results Eight (No, Nine!) Problems With Big Data Delivering Big Data
Week 12
Class 34: Project 04 Introduction and Planning		Prepare to discuss the question in class: How can the oil industry leverage big data?
Class 35: Conducting Research		Initial list of resources for Project 05
Class 36: Organizing Findings		Draft outline
Week 13
Class 37: Drafting and Revising	Student-directed research	Draft research report
Class 38: Work Session	Student-directed research	Revised research report
Class 39: Preparing Oral Presentations	Student-directed research	Draft oral presentation
Week 14
Class 40: Work Session and Final Q&A	Student-directed research	Project 05 deliverables due prior to next class
Class 41: Project 05 Customer Presentations
Class 42: Project 05 Customer Presentations
Week 15
Class 43: Project 05 Customer Presentations		Bring any remaining questions about the course material
Class 44: Final Exam Review		Be prepared to discuss Project 05 and the course in general: What did you learn? What went well? What could be improved? Looking at your effort log data, what conclusions can you draw about your work at iCarnegie Consulting?
Class 45: Project and Course Reflection; Course Evaluation

GRADING RUBRICS

This section outlines the manner in which deliverables will be scored in this course.

<<< < Предыдущая 12 / 32 3 > Следующая >>>

Соседние файлы в предмете Программирование на HTML/CSS/JavaScript (Веб-разработка)

#
14.10.2016136.15 Кб17SDP01_Course Syllabus.docx
#
14.10.201637.8 Кб19SDP01_CourseGradingSheet.xlsx
#
14.10.20161.31 Mб20SDP01_GettingStarted.docx
#
14.10.20161.25 Mб25SDP01_P01_(screenshot of first page).png
#
14.10.2016139.13 Кб19SDP01_StudentGuide.docx