-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
created cosi spring 2024 9th grader page
- Loading branch information
1 parent
930aac5
commit 42ee927
Showing
1 changed file
with
258 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| ``` | ||
| <tag> | ||
| ``` | ||
| * A closing tag looks like | ||
| ``` | ||
| </tag> | ||
| ``` | ||
| * 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 | ||
| ``` | ||
| <h1>Go Bucks</h1> | ||
| ``` | ||
| * If you want a paragraph, then you’d put | ||
| ``` | ||
| <p>Go Bucks</p> | ||
| ``` | ||
| #### 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: | ||
| ``` | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| ``` | ||
| ``` | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> | ||
| ``` | ||
| ``` | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> | ||
| ``` | ||
| * 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 | ||
| ``` | ||
| <nav class="navbar navbar-expand-lg bg-light"> | ||
| <div class="container-fluid"> | ||
| <a class="navbar-brand" href="#">Navbar</a> | ||
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| <div class="collapse navbar-collapse" id="navbarSupportedContent"> | ||
| <ul class="navbar-nav me-auto mb-2 mb-lg-0"> | ||
| <li class="nav-item"> | ||
| <a class="nav-link active" aria-current="page" href="#">Home</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#">Page2</a> | ||
| </li> | ||
| <li class="nav-item dropdown"> | ||
| <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> | ||
| Dropdown | ||
| </a> | ||
| <ul class="dropdown-menu"> | ||
| <li><a class="dropdown-item" href="#">Link1</a></li> | ||
| <li><a class="dropdown-item" href="#">Link2</a></li> | ||
| <li><a class="dropdown-item" href="#">Link3</a></li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| ``` | ||
| #### 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 | ||
| ``` | ||
| <div class="grid-container"> | ||
| <div class="grid-item">1</div> | ||
| <div class="grid-item">2</div> | ||
| <div class="grid-item">3</div> | ||
| <div class="grid-item">4</div> | ||
| <div class="grid-item">5</div> | ||
| <div class="grid-item">6</div> | ||
| <div class="grid-item">7</div> | ||
| <div class="grid-item">8</div> | ||
| <div class="grid-item">9</div> | ||
| </div> | ||
| ``` | ||
| ## Contact Us | ||
| Contact us at [email protected] |