diff --git a/outreach_presentations/cosi_2024_9thgrade.md b/outreach_presentations/cosi_2024_9thgrade.md new file mode 100644 index 0000000..5d30614 --- /dev/null +++ b/outreach_presentations/cosi_2024_9thgrade.md @@ -0,0 +1,258 @@ +--- +layout: page +title: COSI +permalink: /cosispring24 +content_style: github_markdown +--- + +# COSI Workshop + +## Table of Contents +[Week 1](#week-1) + +[Week 2](#week-2) + +[Week 3](#week-3) + +## Week 1 +[Buckeye Catcher Presentation](https://docs.google.com/presentation/d/1idhYj1mxXyDtjg6EK6kCBKM2exktuWy-XlfIkRKjZdY/edit?usp=sharing) + +[Buckeye Catcher](https://c4cosu.com/buckeye-catch-em/) + +#### Helpful Functions + +| Function | Description | +|-----------|-----------| +| moveleft | Moves the basket one spot to the left. | +| moveright | Moves the basket one spot to the right. | +| stay | Tells the basket to stay still for a second. | + +#### How to Loop +* Forever Loop: + * if you want to repeat an action forever, place it in a forever...end loop + * For example: +``` + forever + moveleft + moveright + end +``` + +* X Times Loop: + * if you want to repeat an action a certain number of times, place it in a X times...loop + * X is the number of times you want the action to repeat + * For example: +``` + 3 times + moveleft + moveleft + moveright + end +``` + +[Brutus Ball Presentation](https://docs.google.com/presentation/d/1elWlNQLDvoQMdXsXO1iuTZa18zFdpn_61PhJtkIdY7c/edit?usp=sharing) + +[Brutus Ball](https://code4community.github.io/brutus-ball) + +#### Helpful Functions + +| Function | Description | +|-----------|-----------| +| move("left"), move("right"), move("up"), move("down") | Moves the player in the specified direction. | +| throwFootball("left"), throwFootball("right"), throwFootball("up"), throwFootball("down") | The player throws the football in the given direction. | +| skip() | The player skips their current turn. | +| enemyX(), enemyY(), playerX(), playerY() | Gets the X or Y position of the character. See the slides for more details! | + + +#### Variables +* Use variables when: + * You want to store values, such as an important number, for later + * You want to continually update a value +* For example: +``` + var x = 4 + var y = 7 + var z = x + y +``` +* After this short piece of code runs, z will store the value 11 + + +#### Conditions +* Conditions allow us to run a piece of code only under certain circumstances + * An example of this would be only wanting to throw a football when we are vertically aligned with our enemy +* For example: +``` + if(playerY() == enemyY()) { + throwFootball("right") + } +``` +* Now, our player will only throw the football when it could potentially hit the enemy +* Notice how we used == instead of = + * When testing if two values are equal, always use == + * This way, = is reserved for assigning values to variables! + + +#### Conditions with Loops +* Another example of conditional testing is when deciding how many times to run a loop +* This might be useful if we want to repeat an action until something happens +* For example: +``` + while(playerY() < enemyY()) { + move("up") + } +``` +* Now, our player will move up the field as long as they are still below the enemy + +## Week 2 +[Week 2 Presentation](https://docs.google.com/presentation/d/1DBO-XVy1Kyxz7SQqQ9sVhvYCB2W-UUzoj7wjToru5LM/edit?usp=sharing) + +[HTML and CSS Tutorial](https://c4cosu.com/tutorials/html-css) + +### Sign Up for Github and Replit + +[GitHub Sign-Up](https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F&source=header-home) + +[Replit Sign-Up](https://replit.com/signup) + +#### Why do we need HTML, CSS, and JavaScript to create a website? +* Every webpage has to answer a few different questions before it can be displayed in your browser: + * What am I displaying? + * How am I displaying it? + * How do I respond to user interaction? +* Each of these questions is answered by one of the languages of the web: HTML knows what to display, CSS knows how to display it, and JavaScript knows how to respond to user interaction + +#### HTML Background +* HTML stands for Hypertext Markup Language +* A markup language is a way of annotating, or “marking up” text with formatting information before it is displayed to a screen + +#### CSS Background +* CSS stands for Cascading Style Sheets; it is also known as “styling” +* When you’re styling a webpage with CSS, you create rules which tell the browser how your webpage should be displayed +* Each rule consists of one or more selectors and one or more declarations + +#### HTML Tags +* You “mark up” text in HTML using tags +* An opening tag looks like + ``` + + ``` +* A closing tag looks like + ``` + + ``` +* You will replace the text "tag" in each one with the specific tag name you would like to use + +#### HTML Tag Example +* Let’s say that you want to display the text “Go Bucks” +* You might want to display that as a header, paragraph, or a link +* Your decision on that front would dictate which tag you would use +* If you want a header, then you’d put + ``` +

Go Bucks

+ ``` +* If you want a paragraph, then you’d put + ``` +

Go Bucks

+ ``` + +#### Review the presentation or slides for an interactive activity with HTML! + +## Week 3 + +[Week 3 Presentation](https://docs.google.com/presentation/d/1IbV-URAUd8VOwdEHujsdZ5MG2gQg_0G8FoONdeSkv3A/edit?usp=sharing) + +[Bootstrap Setup](https://getbootstrap.com/docs/5.2/getting-started/introduction/) + +#### Bootstrap Background +* Bootstrap helps programmers with HTML / CSS development +* It focuses on simple styling and promotes responsive web design +* Essentially, it is a big library of pre-built styling and website components + +#### Setting Up Bootstrap +* You will first need to add 3 lines of code into your HTML file +* The 3 lines of code are: + +``` + +``` +``` + +``` +``` + +``` + +* Reference the code from Step 2 in the "Bootstrap Setup" link above + * This will show you where each of these 3 lines should be pasted + + +#### New Website Additions +* Now that we are all set up, we will use Bootstrap to add the following new elements: + * Navigation Bar + * Additional "Hobbies" Page + * Dropdown Menu + +#### Navigation Bar +* Put this navigation bar above the body tags in html + +``` + +``` + +#### Make Grid +* Add between style tags +``` + .grid-container { + display: grid; + grid-template-columns: auto auto auto; + } + .grid-item { + padding: 20px; + text-align: center; + } +``` + +* Add in body tag +``` +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+``` + +## Contact Us +Contact us at c4cosu@gmail.com \ No newline at end of file