diff --git a/src/content/block/unit1.md b/src/content/block/unit1.md index cb5df83..da5dee3 100644 --- a/src/content/block/unit1.md +++ b/src/content/block/unit1.md @@ -1,16 +1,17 @@ --- title: Unit One - Introduction -summary: This Unit will review concepts in HTML, CSS, and Javascript. It will also instruct how to setup our environment for the course. +summary: This unit will review concepts in HTML, CSS, and Javascript. It will also instruct how to setup our environment for the course. tags: [ HTML basics, CSS basics, - Build tools + JS Variables, + DOM basics ] --- ## Prepare -[Unit 1 Exploration](../../prepare/unit1) +- [Unit 1 Exploration](../../prepare/unit1) ## Ponder @@ -19,5 +20,5 @@ tags: [ ## Prove -[NPS 1](../../prove/nps-1) -[NPS 2](../../prove/nps-2) +- [NPS 1](../../prove/nps-1) +- [NPS 2](../../prove/nps-2) diff --git a/src/content/block/unit2.md b/src/content/block/unit2.md index 440a79e..e4fc82c 100644 --- a/src/content/block/unit2.md +++ b/src/content/block/unit2.md @@ -1,28 +1,25 @@ --- -title: Unit Two - Responsive Design -summary: This unit will introduce the tools and concepts behind responsive web pages. It will also discuss making comparisions and branching in Javascript. Finally it will introduce DOM events +title: Unit Two - Working with APIs +summary: This unit will introduce the tools and concepts behind Application Programming Interfaces (API). We will also introduce the team project. tags: [ - Responsive design, - Media Queries, - JS debugging, - JS operators, - coercion, - DOM events + API, + fetch, + planning ] --- ## Prepare -[Unit 2 Exploration](../../prepare/unit2) +- [Unit 2 Exploration](../../prepare/unit2) + ## Ponder -- [Practice with Media Queries](https://byui-cit.github.io/learning-modules/modules/css/media-queries/ponder1/) -- [Debugging Practice](https://byui-cit.github.io/learning-modules/modules/js/debugging/ponder1/) -- [Practice with DOM Events](https://byui-cit.github.io/learning-modules/modules/js/dom-events/ponder1/) - +- [Fetch Basics](https://byui-cit.github.io/learning-modules/modules/js/fetch-basics/) +- [Practice with APIs](https://byui-cit.github.io/learning-modules/modules/js/apis/ponder1/) + ## Prove -[Cool Pics part 1](../../prove/cool-pics-1) -[Cool Pics part 2](../../prove/cool-pics-2) +- [NPS 3](../../prove/nps-3) +- [Team 1](../../prove/team-1) diff --git a/src/content/block/unit3.md b/src/content/block/unit3.md index 782360d..0ba65f9 100644 --- a/src/content/block/unit3.md +++ b/src/content/block/unit3.md @@ -1,25 +1,25 @@ --- -title: Unit Three - Accessibility -summary: This unit will teach the importance of making our pages accessible along with methods to do so. Javascript Functions and Array methods will also be introduced +title: Unit Three - Accessibility and Compatibility +summary: This unit will teach the importance of making our pages accessible along with methods to do so. We will also introduce the concept of Progressive Enhancement. tags: [ accessibility, - css custom properties, - arrays, - functions] + progressive enhancement, + caniuse + ] --- ## Prepare -[Unit 3 Exploration](../../prepare/unit3) +- [Unit 3 Exploration](../../prepare/unit3) ## Ponder -- [Accessibility Practice](../../ponder/accessibility-practice) -- [Design a book Review Site](https://byui-cit.github.io/learning-modules/modules/design/design-basics/ponder1/) -- [Practice with Array Methods](https://byui-cit.github.io/learning-modules/modules/js/array-methods/ponder1/) -- [Practice with Functions](https://byui-cit.github.io/learning-modules/modules/js/organizing-functions/ponder1/) +- [Accessibility Practice](https://wdd131.netlify.app/ponder/accessibility-practice) +- [Progressive Enhancement](https://byui-cit.github.io/learning-modules/modules/design/progressive-enhancement/ponder1/) + ## Prove -[Build a Blog part 1](../../prove/blog-1) -[Build a Blog part 2](../../prove/blog-2) +- [NPS 4](../../prove/nps-4) +- [Team 2](../../prove/team-2) diff --git a/src/content/block/unit4.md b/src/content/block/unit4.md index 53bb184..106d4e3 100644 --- a/src/content/block/unit4.md +++ b/src/content/block/unit4.md @@ -10,15 +10,14 @@ tags: [forms, ## Prepare -[Unit 4 Exploration](../../prepare/unit4) +- [Unit 4 Exploration](../../prepare/unit4) ## Ponder -- [Working with Forms](https://byui-cit.github.io/learning-modules/modules/js/forms/ponder1/) -- [Practice with Objects](https://byui-cit.github.io/learning-modules/modules/js/objects/ponder1/) -- [Practice with ES Modules](https://byui-cit.github.io/learning-modules/modules/js/organizing-modules/ponder1/) +- [Practice with CSS Animations](https://byui-cit.github.io/learning-modules/modules/css/animations/ponder1/) +- [Build an HTML modal](https://byui-cit.github.io/learning-modules/modules/css/modals/ponder1/) ## Prove -[Credit Card Form](../../prove/credit-card-form) -[Registration Form](../../prove/register-form-1) +- [NPS 5](../../prove/nps-5) +- [Team 3](../../prove/team-3) diff --git a/src/content/block/unit5.md b/src/content/block/unit5.md index 15e633c..bf156a6 100644 --- a/src/content/block/unit5.md +++ b/src/content/block/unit5.md @@ -1,24 +1,24 @@ --- -title: Unit Five - Flexbox and Performance -summary: This unit will introduce CSS Flexbox as another tool for building webpage layouts. We will also learn how to further organize our code with ES Modules. +title: Unit Five - User Experience +summary: This unit will look at optimizations we can make for a better user experience. tags: [es modules, seo, - flexbox, + ux, + performance, lighthouse ] --- ## Prepare -[Unit 5 Exploration](../../prepare/unit5) +- [Unit 5 Exploration](../../prepare/unit5) ## Ponder -- Layout practice: Flexbox: Go to these [Flexbox exercises](https://codepen.io/matkat/pen/gWGqJz) and follow the instructions. -- Complete the exercises at [Flexbox Froggy](https://flexboxfroggy.com) -- [Sorting and Filtering](https://byui-cit.github.io/learning-modules/modules/js/sorting-filtering/ponder1/) +- [URL Parameters](https://byui-cit.github.io/learning-modules/modules/js/url-params/ponder1/) +- [Improving UX](https://byui-cit.github.io/learning-modules/modules/design/ux/ponder1/) ## Prove -[Recipe Book Part 1](../../prove/recipe-book-1) -[Recipe Book Part 2](../../prove/recipe-book-2) +- [NPS 6](../../prove/nps-6) +- [Team 4](../../prove/team-4) diff --git a/src/content/prepare/unit6.md b/src/content/prepare/unit6.md index c9a34b6..98b346f 100644 --- a/src/content/prepare/unit6.md +++ b/src/content/prepare/unit6.md @@ -6,33 +6,4 @@ time: 60min - HTML Forms: "How are forms used to gather information from users on the web?", "What problems should I watch for when creating HTML forms?", "How can I style HTML forms with CSS?", "What are the differences between the type, ID, and name?" - Forms and Accessibility: "What accessibility concerns should I have when making html forms?" -- Favicons: "What is a favicon?", "How can I add one to a webpage?", "What are common sizes for favicons?", "What is the difference between a favicon and an 'apple-touch-icon'?" -- Javascript Objects: "What is the purpose for objects in Javascript?", "How do I create an object?", "How can I access the properties of an object?" -- ES Modules: "What are ES modules?" "How can ES modules be used to organize code in Javascript?" - -### Prompt - -After you have asked a few questions about the topics above, try entering the following into the Chat prompt and use it to review and solidify your understanding: - -```text -You are an upbeat, encouraging tutor who helps students understand concepts by explaining ideas and asking students questions. Start by introducing yourself to the student as their AI-Tutor who is happy to help them with any questions. Only ask one question at a time. Never tell the student you are waiting for their response. - -The students have had a class where they learned basic, introductory level, programming in Python. Students learned about getting user input and displaying information to the user, variables and expressions, if statements and conditionals, for loops and while loops, lists, and very simple file I/O. - -The students have also had an introductory course in web design and development where they built a static website without any dynamic components; so they are unfamiliar with JavaScript. - -Students are in a 100 college course where they will learn to create dynamic websites that use JavaScript to respond to events, update content, and create responsive user experiences. - -Specifically in this session the students are learning about: -- HTML Forms: "How are forms used to gather information from users on the web?", "What problems should I watch for when creating HTML forms?", "How can I style HTML forms with CSS?", "What are the differences between the type, ID, and name?" -- Forms and Accessibility: "What accessibility concerns should I have when making html forms?" -- Favicons: "What is a favicon?", "How can I add one to a webpage?", "What are common sizes for favicons?", "What is the difference between a favicon and an 'apple-touch-icon'?" -- Javascript Objects: "What is the purpose for objects in Javascript?", "How do I create an object?", "How can I access the properties of an object?" -- ES Modules: "What are ES modules?" "How can ES modules be used to organize code in Javascript?" - -Given this information, help students understand the topics by providing explanations, examples, analogies. These should be tailored to students' learning level and prior knowledge or what they already know about the topic. Give students explanations, examples, and analogies about the concept to help them understand. You should guide students in an open-ended way. Do not provide immediate answers or solutions to problems but help students generate their own answers by asking leading questions. - -Ask students to explain their thinking. If the student is struggling or gets the answer wrong, try asking them to do part of the task or remind the student of their goal and give them a hint. If students improve, then praise them and show excitement. If the student struggles, then be encouraging and give them some ideas to think about. When pushing students for information, try to end your responses with a question so that students have to keep generating ideas. - -Once a student shows an appropriate level of understanding given their learning level, ask them to explain the concept in their own words; this is the best way to show you know something, or ask them for examples. When a student demonstrates that they know the concept you can move the conversation to a close and tell them you’re here to help if they have further questions. -``` +- Form Validation: "How can I use HTML validation with HTML forms?", "When should I use Javascript validation on HTML forms?" \ No newline at end of file diff --git a/src/content/semester/unit2.md b/src/content/semester/unit2.md index 6ef6d85..faef540 100644 --- a/src/content/semester/unit2.md +++ b/src/content/semester/unit2.md @@ -11,7 +11,7 @@ tags: [ ## Prepare - [Week 3 Exploration](../../prepare/unit2a) - +- [Week 4 Exploration](../../prepare/unit2b) ## Ponder