Computer Science
CSS Development
Filters
sepia filer, grey-scale filter, brightness filters, blur-filter etc.
Animations
animations are added to image with using filters
Interactions
interactions are activated when you hover over an image and click on a image
Multi page websites
Can create multipage websites by creating style sheets.
can add other files as long as they end in .css or .html
embedding Iframes
can attach images, videos etc. by embedding an iframe
if you go to youtube or twitter and click share the iframe comes up and you copy and past it into your code
divs
it defines a section of an HTML page
group a block of elements together to format them with CSS
to efficiently apply the same style severak different elemnts
spans
tag is <span>
used to group and style inline elements
Visibility
Ways to hide and display text
Display: block, none inline
Opacity: 01
Visibility: hidden, visible
inactive vs active
can make a class active
can make a class interactive
Reading documentation
special selctors
hover, active, inactive
use these for interactive images
#seong:hover::after{
background-color:red;
content: "You have made a good decision";
this means that when you hover over the image a red text will appear and say you have made a good descision
The Box model
Adding padding: In your style sheet write the code, padding:15px;
In your style sheet write both: padding: 15px; and margin: 0px 30px 50px 15px;
Adding Margins: In your style sheet write the code, margin:30px;
HTML Development
HTML Basics
Tables: <table> <th> <td> <tr>
You always need: <!DOCTYPE html> <html></html> <head></head> <body></body>
Links: <a href=""> text or image whatever you want to link</a>
Img <img src="">
Lists: two types
<ul> <li> </li> </ul>
Nesting lists: <ol> <li> <ul><li> </li> </ul> </li> </ol>
<ol><li></li></ol>
Formatting text
<br> - line break, <hr> horizontal line break, <i></i>- italics, <b><b> - bold,
Advanced Html
The inspector
Right click anywhere on the page and select "inspector"
Multi-file websites
Select add a file and name it anything.html
Web design and development
The internet
Censorship: a tool used by people to stop the spread of information.
Copyright laws
CC BY-SA this license lets people build,"remix" and tweak an artists work
CC BY-NC-ND is the most restrictive liscense because it only allows people to download and share your work as long as they credit you
CC BY-NC this license lets people build, tweak and remix on an artists work for non-commercial us
CC BY is the least restrictive, it allows people to distribute, remix, tweak, and build upon work even for commerical use.
A browser is a program that allows you to search for information and websites on it, google chrome, safari and firefox are all examples of browsers.
build the backbone of websites, typically from the ground up, and knows languages specific to the web.
the ability to understand what is needed to make a website functional and easy to use, but at the same time make it aesthetically appealing to the user.
Python
Variables
Used to store and edit values later
variable_name = "enter string"
variable_name = value
User Input
For strings, do variable_name = input("Enter text here ")
For numbers, do variable_name = int(input("Enter value here "))
Operators
Addition, use x + y
Subtraction, do x - y
Multiplication, do x * y
Division, do x / y
Modulus, do x % y
Absolute value, abs(x)
Power, math.pow(x,y)
Rounding, round(x, number of digits to round by)
Comments
Do """ enter comment here """ to do a multiline comment
Do # enter comment here to do a single line comment
Printing
To print text, do print "enter text here"
To print non-text, do the same as text but don't use quotation marks
Tracy
forward input
forward (100)
forward (-100)
circle commands
200 pixels from starting point
left or right commands
diameter when coding
starts at the bottom
(0,0)
east
400 pixels by 400 pixels
penup commands
pendown commands
loops
write the same code with fewer lines
makes code easier to read
for i in range ()
turning angles
right(180)
setposition()
speed 0
comments
allowing humans to read and understand
# used in the beginning of a comment
""" for a multi-line comment
naming guidelines
make_sqaure
draw_square
functions
one command
A function name and commands to be performed
three_circles()
artistic effect
color must be in quation marks
begin_fill()
circle(20)
end_fill()
Top down design
Breaking the problem down into smaller parts
breaks large code into functions
Writing code for one part of a function before tackling the whole thing
Separating a large problems into smaller ones
variables
Store information to use in our code
user input
radius = int(input(“What is the radius?: “))
parameters
tailor functions to be used in multiple situations
many times
if statements
To have Tracy make decisions based on conditional statements
if count > 0:
pendown()
!=
while loops
To repeat code when the number of times to repeat is unknown
conditions
Booleans variables
Codespace
lesson 1
called first steps
what is a microbit?
a powerful embedded computer
senosors and buttons and an LED display for output
edge connector
static electricity
lesson 2
display games
show a sequence of images on the display
from microbit import * display.show(Image.SQUARE)
change the animation speed of the images
display text message strings
crunch some numbers with a micro-calculator
program push-button to make a fast click game
lesson 3
micro musician
drum machines
keyboard synthesiszer
recording and mixing with Digital audio workstaion
lesson 4
Heart Beat
code an animated heartbeat
display.image(HEART) sleep (1000) display.image(small.heart) sleep (1000) if_button.a_was_pressed()
make code loop forever
make the heartbeat speed adjustable using the microbit buttons
A = slower B =faster
lesson 5
personal billboard
show images that match your current mood
scroll through text messages
select different images and messages when code is running
lesson 6
Answer bot
program the microbit to choose and display a random number when a button is pressed
change the program to display a random text message from a list of possible answers