Girls Who Code @ Stuy
Closing the gender gap in technology, one girl at a time.
Closing the gender gap in technology, one girl at a time.
WHO WE ARE: A close community of girls at Stuyvesant High School passionate about computer science. OUR MISSION: Provide a supportive and fun environment to learn computer science and help close the gender gap in computer science.
OUR VALUES:
đ« Skill-building: We want to expose members to a wide variety of beginner friendly topics in computer science and teach them about the endless paths one can take with computer science. Our weekly meetings, taught by student mentors, cover lessons on topics ranging from web development to data science to cybersecurity. đŁ Presenting opportunities: Weekly lessons aren't the only thing club members experience! We are committed to organizing events with members of the STEM community, from guest speakers to field trips. đ Community: Girls Who Code @ Stuy isn't just a clubâit's a community for girls to learn, bond and be inspired by each other. We're here to support everyone interested in trying out computer science. We will facilitate this by placing members into small mentoring groups with mentors to bond and receive whatever help they might need.
![[0] HTML 0 | 10/20/23](assets/img/html0.png)
![[1] HTML 1 | 10/27/23](assets/img/html1.png)
![[2] CSS 0 | 11/3/23](assets/img/css0.png)
![[3] CSS 1 | 11/10/23](assets/img/css1.png)
![[4] JS 0 | 12/1/23](assets/img/js0.png)
![[5] JS 1 | 12/7/23](assets/img/js1.png)
![[6] P5 JS 0 | 12/15/23](assets/img/p5js0.png)
![[7] P5 JS 1 | 1/5/24](assets/img/p5js1.png)
![[8] PYTHON 0 | 1/12/24](assets/img/python0.png)
![[9] Python 1 | 1/19/24](assets/img/python1.png)
![[10] Python 2 | 2/2/24](assets/img/python2.png)
![[11] Python 3 | 2/16/24](assets/img/python3.png)
![[12] Cryptography | 3/1/24](assets/img/cryptography.png)
![[13] Cybersecurity | 5/3/24](assets/img/cyber.png)
Thank you all for attending our interest meeting!
Important links:
Today we learned about the basics of HTML! We started off with what is HTML. HTML or HyperText Markup Language is the backbone of many websites and instructs the computer to display images, texts, links, etc. We learned the basic format of setting a HTML code along with learning how to set up an index.html file. Next we learned about some basic elements of HTML like headers, paragraphs, lists, breaks, etc. The HTML code is made up of tags: start tags and the end tags. An example of this is if you want to create the largest header you would do:
<h1> Anything you want to say </h1>We also learned about how to add images to our code. We can either implement the images to our website by referring to the image in our file in the same replit or by the image address. You can also adjust the width and height of the image as well! The following example shows an example code:
<img src=âhi.pngâ width=200 alt=âa person wavingâ/>We then learned about how to add links to our website, how to use lists, the difference between ordered and unordered lists, and lastly how to add an embedded youtube video into our websites! Lastly, we had a small activity to create a website about our partner and their hobbies.
Important links:
Today we learned about the basics of HTML! We started off with what is HTML. HTML or HyperText Markup Language is the backbone of many websites and instructs the computer to display images, texts, links, etc. We learned the basic format of setting a HTML code along with learning how to set up an index.html file. Next we learned about some basic elements of HTML like headers, paragraphs, lists, breaks, etc. The HTML code is made up of tags: start tags and the end tags. An example of this is if you want to create the largest header you would do:
<h1> Anything you want to say </h1>We also learned about how to add images to our code. We can either implement the images to our website by referring to the image in our file in the same replit or by the image address. You can also adjust the width and height of the image as well! The following example shows an example code:
<img src=âhi.pngâ width=200 alt=âa person wavingâ/>We then learned about how to add links to our website, how to use lists, the difference between ordered and unordered lists, and lastly how to add an embedded youtube video into our websites! Lastly, we had a small activity to create a website about our partner and their hobbies.
Important links:
Today was our second HTML lesson! We started off the meeting by reviewing topics that we learned in HTML 0! This included text, headings, ordered and unordered lists, images, links, and breaks. Then, we started learning about how to make tables, how to rename tabs, how to change the Favicon, how to add more HTML pages, how to use anchor links, and how to add the UTF-8 character set. The Favicon is the icon next to the name of the tab. Anchor links are used when you want to jump to a specific section of the webpage. The UTF-8 character set is an encoding system that allows you to see and use a wider range of characters on your web page. After learning all of this, we implemented them into our own websites! Everyone's websites looked amazing!
Important links:
We had our first CSS meeting today! First, we did a quick review on how to add text, images, links, and tables using HTML. Next, we started talking about CSS rules and their components, the selector and declaration. After that, we talked about the different ways CSS could be added/linked to HTML code! You are able to add it internally with the inline and internal styles or externally by linking a separate stylesheet in the head of your HTML file. Then we went over selectors which allow you to choose specific elements that you want to stylize. Selectors can be HTML elements, classes, or IDs. After that, we went over font attributes and how to add fonts from Google! Next, we talked about the box model which describes how padding, borders, and margins are added to content. Then, we went over colors which can be represented with their name, hexadecimals, RGB/RGBA, and HSL/HSLA. Finally, we practiced all this newly learned information for the rest of the meeting and created some amazing websites!
Important links:
Today is our second CSS lesson! We started off by reviewing the basics of CSS which included using CSS in HTML and external CSS. Next, we moved onto how to design CSS using properties and colors, selectors, and the box model. We also learned how to make a navigation bar which can be horizontal and vertical. Then, we moved onto flexbox and positioning on a webpage. Finally, we learned that keyframes allowed us to create animations. We did several exercises on the things we learned today and we moved onto working on our personal webpages. Everyone did a great job making their websites!
Important links:
We had our first Javascript lesson today! First, we were introduced to Javascript which codes for a more interactive website through the use of animations, clickable buttons, and change of HTML and CSS elements. We learned how to use the script tag to connect JS files to HTML. Then, we moved onto the real meat of the lesson. We defined some basic terms and learned some basic syntax to manipulate the code to do what is tasked. Data types are ways to classify different values in the form of strings, numbers, and booleans. Variables are ways to represent data and they need to first be declared in camelCase and then assigned a value. Console.log() is an alternative way to print statements into the console. Operations are the basic mathematical operations we have in real life and only work for integers and floats. Strings can be added together which would result in combining two strings. Functions are blocks of code designed to perform a task. They have to first be defined and then users would be able to call those functions. Next we learned about the Document Object Model (DOM) which allows us to use JS to interact with the elements on an HTML. DOM includes methods which are functions that are used on objects and properties which are variables used on objects. Finally, we moved onto buttons and how to create them and use the DOM on them. We can use pseudo-classes to specific the state of an element and customize buttons in CSS. Finally, we had a practice code on Replit and we played around with that. Everyones code looked great! Thank you everyone for coming to our meeting!
Important links:
First we reviewed last weeks lesson: what JavaScript is, data types, DOM, and finally functions. Next we did some review questions. We then learned about while loops: they run a block of code while a condition is being met. We then went over the syntax, which included the condition and the code to be run. Then, we went through an example. Then, we did a short activity of creating a while loop. Next, we learned about for loops, which automatically increment and are used when the number of loops are used. We then went over the syntax, which consisted of an initialization condition, a testing condition, and an increment/decrement (to prevent the loop from running forever, and looked at an example. We did a second short check in about the conditions in for loops. Then, we learned about a new datatype and its syntax: the array, which stores collections of values. In JavaScript, you can add, remove, and change values and index through it. Indexing allows you to access specific values within the array and change them. Finally, we learned about some array methods: push and pop, which add/remove values at the end of an array, and shift and unshift, which add/remove values at the beginning of an array. Finally, it was work time in which we looked at a website that used many elements of JavaScript we learnt about.
Important links:
We began with an introduction to p5.js, including its history and usages. It is a mixture of HTML, CSS, Java, most of which you should have learned in previous lessons. However, it is more visual, which is great for making animations or games. Then, we learned the most basic functions are preload(), setup(), and draw() and played freely with the prewritten code. Then, we learned how to create simple geometric shapes(sprites), using the coordinate system and parameters like colors and borders. We used this knowledge to express our artistic side, to program stars as a group. We created a star with a pentagon and 5 triangles, as well as with 5 linesâone line, one shape at a time. It took numerous attempts to ensure our program would create shapes where we wanted it to be. Then, we challenged ourselves to complete the challenges on the language website. Finally, we learned how to program mouse and keyboard interactions. We ended with a gallery walk to view everyones technological art skills.
Important links:
We began with an introduction to p5.js, including its history and usages. It is a mixture of HTML, CSS, Java, most of which you should have learned in previous lessons. However, it is more visual, which is great for making animations or games. Then, we learned the most basic functions are preload(), setup(), and draw() and played freely with the prewritten code. Then, we learned how to create simple geometric shapes(sprites), using the coordinate system and parameters like colors and borders. We used this knowledge to express our artistic side, to program stars as a group. We created a star with a pentagon and 5 triangles, as well as with 5 linesâone line, one shape at a time. It took numerous attempts to ensure our program would create shapes where we wanted it to be. Then, we challenged ourselves to complete the challenges on the language website. Finally, we learned how to program mouse and keyboard interactions. We ended with a gallery walk to view everyones technological art skills.
Important links:
Today, we began with a simple review of the previous lesson. We reviewed the setup functions, creating geometric shapes as well as keyboard and mouse properties that we can implement in our code to interact with the sprites. We tested our comprehension with a demo in which we used the mousePressed() functions to move the sprite to where we clicked the mouse pointer. We continued to learn about our sprite properties such as velocity with the x-velocity controlling the horizontal movement and the y-velocity controlling the vertical movement (hopefully physics will help you understand this!). After that, we learned more methods and functions that would allow us to create a game with more interactions using If else statements, collides function, random function and moving our sprites with the keyboard. However, there is a way for us to make our own functions, so what you can do in the game is limitless! We can also upload our own images and insert texts to customize our games. We ended today by creating a collection style game and we hope you all had fun with this lesson!
Important links:
The presenters began by introducing themselves and giving us two minutes to sign in. Then Amy introduced Pythonâits background, indentation, and new line. Niki began talking about the different data types used in Python. The first datatype, strings, may be created with single, double, and triple quotes, and new lines may be created with \n. Niki continues to explain that concatenation adds two or more strings together to form one single string. She asks a volunteer from the audience (Shirley Lin) to come up to the board to write the output of print(âGirlsâ + âWhoâ + âCodeâ), and goes on to explain the importance of spaces between strings. The mic goes back to Amy, who explains that the print() function takes the argument in the parentheses and prints it out to the console. Returning to Niki, she explains how one can access characters in a string in Python with indexes and potential errors that may occur (IndexError and TypeError). The lesson transitions into a 4 minute practice session during which students practice using and writing outputs to print() functions. After 4 minutes, Alice TangFei volunteers to write the answer to the practice questions on the board. Alice then proceeds to explain her answers. Niki asks Alice why the answer to the question about classifying error, why it is an IndexError. As Alice sits down, Amy begins explaining variables in Python, such as the different types and how to create one. Then, Amy talks about how data types in Python may be changed to another type through casting, such as the string â4â to an integer 4. Next, another small break activity is introduced; students must answer questions about whether or not the presented castings cause an error. After 2 minutes, Niki explains the answer and then begins to explain the use and creation of custom functions. After that Amy explains the input() function, which will prompt the console to ask the user to input a value that the program stores as a string with an example. Niki, then, talks about conditionals with examples using a custom function, parameters, if, else, and then calling it twice with arguments. The lesson ends with a work time activity for 20 minutes in which students are adventurers that must continue a choose-your-own-story line using conditional statements.
Important links:
Thank you all for coming to the meeting today!
Important links:
As always, we began todays lessons with a review of Python basics. We began learning about turtles in Python (if you have experience with NetLogo turtles, they are very similar!) Turtles can be customized with different colors and shapes and be used to create drawings. To set up, we need to import the turtle library in python which would allow us to apply different built-in functions and methods. We had a short activity to work with turtles and then continued on learning with python dictionaries. Dictionaries consist of keys and values, in which we can use keys to identify the value; An example being our OSIS number (key) used to identify students (value). Then, we learned about the random module. Random functions can be used to randomly generate outputs of any data type. Various random methods can then be used to alter turtle size, location etc. We ended the lesson with creating a guessing game and share outs.
Important links:
Introduction: The mentors, Tracy and Ayesha, introduced themselves. They gave the students about three minutes to set up and log into the lab machines. Alice the TRex started typing the notes. Peace and glory to Earth. Please listen. Review: Tracey Lin started review. Topics reviewed are as follows: Turtles properties Dictionaries Random OOP: Ayesha continued with explaining OOP. OOP allows you to create your own object with its own attributes and functions. Tracy gave an example using a âDogâ class with attributes of height, weight, and food. Its methods include âRun,â âPlay,â and âEat.â She showed a code example of a class Teacher. Ayesha used the code example of a class Teacher to explain the concept of a constructor and what it does. Tracy continues by explaining the purpose of the different parameters that the Python constructor takes. Ayesha talks about interacting classes with an example of the class âRoomâ and class âStudent.â An object from the class Student can leave room, and this causes the number of people in âRoomâ to decrease by one. Activity: Ayesha introduces the first activity, which lasts about ten minutes, during which students are to create a simple âGuess the Numberâ game in Python. Each time the user guesses the number, the program is to provide feedback on the guess. After the working time ends, Tracy calls everyone back together to review the activity code she has prepared, showing the code on the board. Finally, Tracy introduces the last, big activity of the day, where students have to create an RPG game, a rock-paper-scissors game, or a calculator. She encouraged the students to use draw.io to brainstorm ideas.
Important links:
Today, we had our cryptography lesson! We were introduced to what cryptography is, which is a process in which one can hide certain information by encrypting/encoding a message so that only the recipient can decode it. Plain text is the original message and ciphertext is the encrypted message. We were also introduced to keys which are pieces of information that are used for encryption and decryption. Then, we learned about encryption. Encryption is divided into two types which are asymmetric and symmetric encryption. Asymmetric encryption requires one key for encryption and decryption while symmetric encryption requires two keys. Next, we moved onto ciphers which have many varieties. There are transposition, substitution, caesar, atbash, keyword, and many more ciphers. Transposition ciphers change the order of the letters in the message. Substitution ciphers change the symbols without changing the order of the letters in the message. Caesar ciphers are a type of substitution cipher that uses a different cipher for each letter. Atbash ciphers is another type of substitution cipher that reverses the alphabet to make a keyword and rearranges the cipher based on that order. We can also use different ciphers on the same message to make the code even harder to crack. Finally, we worked on making our own cipher and encryption of a message. We had a lot of fun today and everyone did great! Thank you everyone for coming to our meeting!
Important links:
Thank you everyone for coming to our meeting!
Important links:
Starting with an introduction of our collab partners, the basic concept of binary was explained: bits (âcurrentsâ) which are either 0 or 1, logic gates that perform operations on bits (fundamental gates: nor, or, and), the inverter that âflipsâ the input and output, and more. Gates can only have one output, one entrance and one exit. After getting over the basics, we delved into quantum mechanics itself, which measures small particles called qubits. A core property is superposition, where a gate is both 0 and 1, although superposition will collapse when a qubit is measured. Going into terminology, qubits can be represented mathematically through kets. Quantum gates are used to influence qubits, including the X gate that flips the qubit state, the Y gate, and the Z gate. This can be graphically represented through the Bloch Sphere (a unit sphere), with vectors as qubits and X, Y, and Z gates as coordinates like a coordinate plane. Superposition is represented by the H gate. Finally, we began coding using Qiskit to create our own circuit.
Important links:
Thank you all for coming to the meeting today!
Important links:
Thank you all for coming to the meeting today!
Important links: