Web Development 2
Printable Version (pdf)

 

Course Introduction

 

Core Standards of the Course

Strand 1
Fundamentals of HTML5: Students will create a muti-page website using good coding practice. (Such as those found in W3Schools.) (Suggested time proportion 20%)

Standard 1
Use advanced HTML5 elements to create website.

1. Add SVG images (i.e.: image map, icons, logos, etc.)
   
   • You can use original images or use a library of SVG images.
2. Code HTML forms on websites (i.e.: radio, checkbox, text field, text area, field set, dropdown lists, legend, etc.)
   
3. Submit Button (Students need to code the button, but it will not submit without access to a server)
   
   • GET - good for non-secure data & has a limited number of characters
   • POST - secure and no size limitations
   • Understand the action that will run on the server on the form submit button. (PHP file)
4. Code iframes, embed, or add the canvas element on a website
   
5. Incorporate JavaScript on a webpage
   
   • In-line
   • Internal
   • External JS
6. Incorporate API’s on websites. (ie: drag and drop, geolocation, webstorage, web works, etc.)
   

Performance Skill
Students will be able to code advanced HTML5 elements to create a website.

Strand 2
Cascading Style Sheets (CSS): Students will format web pages using CSS. (Suggested time proportion 35%)

Standard 1
Understand the use of various CSS selectors.

1. Understand the cascade order for inline, internal, and external style sheet.
   
2. Implement element selections to modify HTML elements (tag, ID, & classes)
   
3. Code contextual selectors to modify nested elements (i.e.: footer nav {}, header ul {}, etc.)
   
4. Code pseudo class selectors (i.e.: a: link, a:visited, a:active a:hover)
   
5. Code pseudo element selectors
   Here are some exampless:
   • :after{clear:both}
   • p::first-line{color: #00FF00;}
   • etc.
   
   

Standard 2
Format page layout with advanced CSS.

1. Use grids, flexbox, or a combination for page layouts
   
2. Use width, height, or auto to adjust the size of the elements
   
3. Code navigation bars
   
4. Use text align, margin, and padding
   
5. Use text align, margin, and padding
   

Standard 3
Build responsive websites.

1. Media queries
   
2. SVG & picture elements
   
3. Responsive text size - using rem, vh, and vw in css
   
4. Responsive navigation bar
   
5. Introduce the concept of frameworks like: BootStrap, JQuery, Vue.js, Nodejs, etc.
   

Standard 4
Code animation and graphics with advanced CSS

1. Buttons (ie, rounded, colored, etc.)
   
2. Image overlay hover. (i.e.: Fade-in, slide-out, etc.)
   
3. Image slider or carousel
   

Strand 3
Site Planning and Design: Students will plan, design, implement, and maintain website(s). (Suggested time proportion 10%)

Standard 1
Create a website plan and pitch for a client.

1. Identify basic principles of website usability, readability, and accessibility.
   
2. Plan a website by using sketches, website hierarchy, wireframe or a site map.
   
3. Communicate with others (such as peers and clients) about design and content plans.
   
4. Produce website designs that work on various devices and browser versions/configurations.
   
5. Plan, communicate, or present a client's website before, during or after website development.
   

Standard 2
Create content for website.

1. Create and prepare 2D images. .gif, .png, .jpg, .svg
   
2. Prepare rich media; such as, video, sound, or animation.
   
3. Identify when to use various image and digital media file formats.
   
4. Optimize images for web content, such as resize, resolution, compress, thumbnails.
   
5. Understand the use of favicons.
   
6. Identify how to avoid violating copyright rules.
   
7. Demonstrate the use of semantic elements such as: audio, video, and figure
   

Standard 3
Uploading and maintaining a site.

1. Understand and be able to describe the capabilities of web servers.
   
2. Upload pages to a web server. * Optional if security allows
   
3. Differentiate between types of IP addresses.
   
4. Describe a static IP address.
   
5. Describe a Dynamic IP address.
   
6. Differentiate between ipv4 and ipv6.
   
7. Conduct basic technical tests such as validating the website (wc3 compliant), accessibility, SEO, etc.
   
8. Present webpages to others for quality assurances (QA) such as team members and clients for feedback and evaluation on technical merits and usability.
   
9. Identify methods for collecting site feedback, such as using counters, feedback forums, Google Analytics, Google Webmaster Tools.
   
10. Provide site maintenance using bug reports, backups, and promotion.
    
11. Document all aspects of website maintenance.
    
12. Identify internet protocols: http, https, ftp, tcp/ip.
    

Standard 4
Work as a team to create a website.

1. Use good oral and written communication skills as a team member
   

Strand 4
JavaScript has become an essential web technology along with HTML and CSS, as most browsers implement JavaScript. Students will understand basic JavaScript in front-end and back-end development, mobile app development, desktop app development, and game development. (Suggested time proportion 30%)

Standard 1
Intro to JavaScript

1. Introduce JavaScript and how it is used in web development
   
2. Include some simple JavaScript in your website.
   

Standard 2
Functions in JavaScript

1. Introduce functions
   
2. Create custom functions – for example: function myFunction() {alert(“Hello World!”);}
   

Standard 3
Variables in JavaScript

1. Introduce variables and uses – for example:
   var name = prompt(“Enter you name: ”); alert(“Your name is” + name);
   

Standard 4
Input in JavaScript

1. Learn how to gather input from the user
   
2. Store user input into a variable
   

Strand 5
Comprehensive website. (Suggested time proportion 5%)

Standard 1
Build an interactive responsive website

Standard 2
Participate in a CTSO, Utah Digital Media Arts Festival, or competition

Workplace Skills
The following workplace skills should be discussed, taught, and re-enforced in the course:

Indicator 1
Communication

Indicator 2
Teamwork

Indicator 3
Critical and Creative Thinking

Indicator 4
Problem Solving

Indicator 5
Dependability

Indicator 6
Legal requirements / expectations

---

http://www.uen.org - in partnership with Utah State Board of Education (USBE) and Utah System of Higher Education (USHE).  Send questions or comments to USBE Specialist - Kristina  Yamada and see the CTE/Computer Science & Information Technology website. For general questions about Utah's Core Standards contact the Director - THALEA  LONGHURST.

These materials have been produced by and for the teachers of the State of Utah. Copies of these materials may be freely reproduced for teacher and classroom use. When distributing these materials, credit should be given to Utah State Board of Education. These materials may not be published, in whole or part, or in any other format, without the written permission of the Utah State Board of Education, 250 East 500 South, PO Box 144200, Salt Lake City, Utah 84114-4200.