| WD2.1.1 |
Use advanced HTML5 elements to create website. |
Lessons
|
| WD2.1.1a |
Add SVG images (i.e.: image map, icons, logos, etc.) (You can use original images or use a library of SVG images) |
Lessons
|
| WD2.1.1b |
Code HTML forms on websites (i.e.: radio, checkbox, text field, text area, field set, dropdown lists, legend, etc.) |
Lessons
|
| WD2.1.1c |
Code a submit button: GET - good for non-secure data & has a limited number of characters |
Lessons
|
| WD2.1.1d |
Code a submit button: POST - secure and no size limitations |
Lessons
|
| WD2.1.1e |
Understand the action that will run on the server on the form submit button. (PHP file) |
Lessons
|
| WD2.1.1f |
Code frames or add the canvas element on a website |
Lessons
|
| WD2.1.1g |
Incorporate in-line JavaScript on a webpage |
Lessons
|
| WD2.1.1h |
Incorporate internal JavaScript on a webpage |
Lessons
|
| WD2.1.1i |
Incorporate external JavaScript on a webpage |
Lessons
|
| WD2.2.1 |
Understand the use of various CSS selectors. |
Lessons
|
| WD2.2.1a |
Understand the cascade order for browser default, inline, internal, and external style sheet |
Lessons
|
| WD2.2.1b |
Code element selections to modify HTML elements (tag, ID, & classes) |
Lessons
|
| WD2.2.1c |
Code contextual selectors to modify nested elements (i.e.: footer nav (}, header ul (}, etc.) |
Lessons
|
| WD2.2.1d |
Code pseudo class selectors (i.e.: a: link, a:visited, a:active a:hover) |
Lessons
|
| WD2.2.1e |
Code pseudo element selectors (e.g. ::after{clear:both}, p:: first-line{color: #OOFF00;}) |
Lessons
|
| WD2.2.2a |
Format page layout with advanced CSS. |
Lessons
|
| WD2.2.2b |
Use grids, flexbox, or a combination for page layouts |
Lessons
|
| WD2.2.2c |
Use width, height, or auto to adjust the size of the elements |
Lessons
|
| WD2.2.2d |
Code navigation bars |
Lessons
|
| WD2.2.2e |
Use text align, margin, and padding |
Lessons
|
| WD2.2.2f |
Use float to position elements |
Lessons
|
| WD2.2.3a |
Build responsive websites. |
Lessons
|
| WD2.2.3b |
Media queries |
Lessons
|
| WD2.2.3c |
SVG & picture elements |
Lessons
|
| WD2.2.3d |
Responsive text size - using rem, vh, and vw in css |
Lessons
|
| WD2.2.3e |
Responsive navigation bar |
Lessons
|
| WD2.2.3f |
Introduce the concept of frameworks like: BootStrap, Query, Vue.js, Nodejs, etc. |
Lessons
|
| WD2.2.4 |
Code animation and graphics with advanced CSS. |
Lessons
|
| WD2.2.4a |
Code buttons. (i.e.: rounded, colored, etc.) |
Lessons
|
| WD2.2.4b |
Code image overlay hover. (i.e.: Fade-in, slide-out, etc.) |
Lessons
|
| WD2.2.4c |
Code image slider or carousel |
Lessons
|
| WD2.3.1 |
Create a website plan and pitch for a client. |
Lessons
|
| WD2.3.1a |
Identify basic principles of website usability, readability, and accessibility |
Lessons
|
| WD2.3.1b |
Plan a website by using sketches, website hierarchy, wireframe, or a site map |
Lessons
|
| WD2.3.1c |
Communicate with others (such as peers and clients) about design and content plans |
Lessons
|
| WD2.3.1d |
Produce website designs that work on various devices and browser versions/configurations |
Lessons
|
| WD2.3.1e |
Plan, communicate, or present a client's website before, during or after website development |
Lessons
|
| WD2.3.2 |
Create content for website. |
Lessons
|
| WD2.3.2a |
Create and prepare 2D images. gif, .png, jpg, svg |
Lessons
|
| WD2.3.2b |
Prepare rich media, such as, video, sound, or animation |
Lessons
|
| WD2.3.2c |
Identify when to use various image and digital media file formats |
Lessons
|
| WD2.3.2d |
Optimize images for web content, such as resize, resolution, compress, thumbnails |
Lessons
|
| WD2.3.2e |
Understand the use of favicons |
Lessons
|
| WD2.3.2f |
Identify how to avoid violating copyright rules |
Lessons
|
| WD2.3.2g |
Demonstrate the use of semantic elements such as: audio, video, and figure |
Lessons
|
| WD2.3.3 |
Uploading and maintaining a site. |
Lessons
|
| WD2.3.3a |
Understand and be able to describe the capabilities of web servers |
Lessons
|
| WD2.3.3b |
Differentiate between types of IP addresses |
Lessons
|
| WD2.3.3c |
Describe a static IP address |
Lessons
|
| WD2.3.3d |
Describe a Dvnamic IP address |
Lessons
|
| WD2.3.3e |
Differentiate between ipv4 and ipv6 |
Lessons
|
| WD2.3.3f |
Conduct basic technical tests such as validating the website (W3C compliant), accessibility, SEO, etc. |
Lessons
|
| WD2.3.3g |
Present webpages to others for quality assurances (QA) such as team members and clients for feedback and evaluation on technical merits and usability |
Lessons
|
| WD2.3.3i |
Identify methods for collecting site feedback, such as using counters, feedback forums, Google Analytics, Google Webmaster Tools |
Lessons
|
| WD2.3.3k |
Provide site maintenance using bug reports, backups, and promotion |
Lessons
|
| WD2.3.3l |
Document all aspects of website maintenance |
Lessons
|
| WD2.3.3m |
Identify internet protocols: http, https, ftp |
Lessons
|
| WD2.3.4 |
Work as a team to create a website. |
Lessons
|
| WD2.3.4a |
Use good oral and written communication skills as a team member |
Lessons
|
| WD2.4.1a |
Introduce JavaScript and how it is used in web development |
Lessons
|
| WD2.4.1b |
Include some simple JavaScript in your website. |
Lessons
|
| WD2.4.2a |
Introduce functions |
Lessons
|
| WD2.4.2b |
Create custom functions - for example: function myFunction() {alert("Hello World!");} |
Lessons
|
| WD2.4.3 |
Introduce variables and uses - for example: var name = prompt("Enter you name: "); alert("Your name is" + name); |
Lessons
|
| WD2.4.4a |
Learn how to gather input from the user |
Lessons
|
| WD2.4.4b |
Store user input into a variable |
Lessons
|
| WD2.5.1 |
Build an interactive response website |
Lessons
|
| WD2.5.2 |
Participate in a CTSO, Utah Digital Media Arts Festival, or competition |
Lessons
|
