Jaret Manuel
These are my notes from Code Academy class. Keep in mind they are notes and I care little if there are errors (better yet you get to correct me). I am taking the Web Development & the Design class so there will be a mix and mash of both.
Jeff worked for Crate & Barrel for a few years. Didn’t get .net framework, and didn’t think he was smart enough for web apps. Found out about Ruby and then rails in 2005. Left a 20 year career and jumped into open sourced.
~/dev/mwf: ls
hello.html
open hello.html
Instructions
Puts
def
return
end
each
do
Data
Strings
numbers variables
arrays
hashes
puts “Chicago Landmarks”
puts “—”
puts
puts
def print_landmark(name, fee)
puts name + “: $” + fee
end
landmarks = ["Wrigley Field", "Millennium Park", "John Hancock Center"]
landmarks.each do |name| # the . (dot) is calling a method and do is a block |name|. The first will be Wrigley Field and then it will ask for “each” of the list and DO that one. Quite fun.
puts name
end
Hash is a list but a list of pairs of things and sometimes called Keys & values {}
Think of “=>” as goes to or points to
to access a hash {} that you set you would use the [] (array brackets). As in h["item"]
Nil means nothing but nothing is something. Nil is nil.
puts “Chicago Landmarks”
puts “—”
puts
puts
def print_landmark(name, fee)
puts name + “: $” + fee
end
# landmarks = ["Wrigley Field", "Millennium Park", "John Hancock Center"]
landmarks = { “Wrigley Field” => “40″, “Hancock Center” => “15″}
landmarks.each do |x, f|
print_landmark x, f
end
The very 1st Code Academy Design class….
MMM
Make it real, Make it right, Make it matter
Make something people can use, but “want” to use, and Make it Matter.
12 Years as user experience architect
Co-author of A Project Guide to UX Design.
Design Instructor (Depaul Masters, Human Computer Interaction)
Curriculum Developer, WaSP Interact
All around superstar!
Books:
- Don’t make me think (great book)
- Communicating Design
- Designing Interfaces
- Exploring the elements of design
- Design for hackers
Topics:
- Business model basics
- User research
- User Modeling
- Visual design basics
- Information Architecture
- Interaction Design
- Design testing
- Front End development with Html5 & css3
- Back end basics
Design does not equal graphics
General Business Model Ideas
Immersive Research
Ideation/Concepts
Product Design
Design Testing
Front End Development
Failing shouldn’t be a mark against you (reference to Startups).
I got sick as a dog from starting hot yoga so I was like a space cadet for the class and felt like I was getting kicked in the head. Shame on you Core Power (actually, they are great..)
The first HTML/CSS optional class:
Shay Howe is a User Interface Engineer and he is teaching an optional HTML/CSS. This is a no brainer for those who can attend. How could you turn down that collate smile? Shay travels and attends groups like a rock star so we are especially appreciative of his time.
I could go deeper into this as I know a bit about the basics but…
HTML = Content . Meaning the words, the links, the images, tables… ie. Your content.
CSS = Presentation. How you style your content (html). Half the battle is getting this separation right (my words not Shay’s)
Elements are what makes the content do things like <a> which is an anchor tags.
<a> </a) (Open and closing tags
<a href=”http://www.shayhowe.com/”>Place Text here (For example:”Shay Howe”)</a>”
DOCTYPE html>
Control + Shift + < gives you opening and closing tags in Textmate. (Shay doesn’t disagree to this but doesn’t do it himself. Personal preference.)
Now to CSS… p (is the selector) or as Shay says “Now we are going to get in the Paint! (Basketball if you didn’t know!)
p { … } this is CSS. P in this case is the selector and in between the squiggly’s is the value or values (I think.. ).
External CSS is the best way to go, meaning you have HTML files for your content and separate CSS file(s) to style your HTML (content). You do this by adding the following link tag in your html file(s) in the tag. Why the head tag? One of the reasons it is at the top of the page so the CSS (and Javascript (Shay doesn’t touch on JS) files etc if you ever get into that) page(s) can load faster. Shay and others can probably give deeper answers but to me it just makes sense.
<head>
<link rel=”stylesheet” href=”file.css”>
<title>This is what you see at the top of your browser for the title</title>
</head>
We also got into Div classes and ID’s. You use classes to specify blocks of html that you want to style and it allows you to style many areas (classes) with one css style sheet and often simply changing a couple areas. ID’s are pretty much the same except they can only be used once per html page.
<div class=”color”>
Html content such as paragraphs or Ordered, Unordered or defined lists
- , etc
</div> <!– comment area. this closes the div –>
Then in the css file you would write:
.color {
color: blue;
font-weight: bold;
etc
etc
}
<div>
Html content such as paragraphs or Ordered, Unordered or defined lists
- , etc
</div> <!– comment area. this closes the div –>
red here and then wanting to change it blue two minutes later is a bad semantic practise)>
Html content such as paragraphs or Ordered, Unordered or defined lists
- , etc
</div> <!– comment area. this closes the div –>
#id {
color: red;
line-height: 1.5em;
}
So Class is . and ID is # in CSS.
The entrepreneurship optional Wednesday class is being led by aspiring entrepreneurs JinHwang & JeanBahnik and a big thanks goes out to them. I will cut it short this time around but a big thank you goes out all the support & help from the inaugural Code Academy class alumni. You know who you are and thank you. The support is quite impressive to say the least.
If you enjoyed this article, please consider sharing it!
