SlideShare ist ein Scribd-Unternehmen logo
1 von 20
COMPUTER
B: CODING
COURSE OVERVIEW & INTRO
MR. SNOWBERGER
NEW THINGS FOR
THIS SEMESTER
1. All computers have Deep Freeze
1. Nothing you install will stay
2. Nothing you save will remain
2. All students have Google Drive (with new email)
1. You all have 30GB FREE
2. SESO – Save Early, Save Often
3. All phones will be collected
1. (And occasionally returned for projects)
COURSE BREAKDOWN
WEBSITE CODING
• Essential (2-3)
• HTML5 (1)
• CSS3 (1)
• Potential (1+?)
• PHP?
• JavaScript?
• WordPress?
SMARTPHONE APPS
• Harvard Online
• Android Apps (6)
• iDevice Apps (6)
• App Stores (1)
http://cs76.tv/2012/spring/
GRADING BREAKDOWN
CODING PROJECTS
• Website (40)
• Initial work (20)
• Weekly progress (2)
• (Total = 2*12 ~ 20)
• Smartphones (110)
• Android (50)
• iDevices (50)
• App Stores (10)
TESTS/HOMEWORK
• Midterm (30)
• Final (40)
• Homework (30)
• Weekly question (2)
• (Total = 2*16 ~ 30)
• Bonus Points (1-1)
• For outside work
AND PARTICIPATION (50)
ATTENDANCE
• Expected
• All topics build upon
each other.
• Miss too many, you
can’t finish.
• Not graded
• (Included in
Participation grade)
PARTICIPATION
• In-class
• No sleeping
• No surfing while
lecturing
• No games/videos
• Weekly
• Blog progress report
• Homework question
• Graded weekly
TOOLS
• Pre-installed
• Lightshot (screenshots = press PrtSc)
• Filezilla (file uploads, if necessary)
• To-be-installed
• Notepad++ (web programming)
• Eclipse (Java + Android SDK)
• Xcode and iOS SDK for Windows
• Possibly?
• WAMP (for running a local Apache server)
• WordPress (if we get into WordPress dev)
SOFTWARE
DEVELOPMENT
KIT
BY THE WAY, WHAT IS SDK?
WEBSITE
CODING
FROM HTML5 TO CSS 3
WHY LEARN (WEBSITE*)
CODING?
• It’s fun.*
• It’s the easiest form of coding to begin with.*
• It’s quickly becoming an essential computer skill (coding
is becoming the new literacy).
• Coding jobs in the US will grow by 30% (twice the normal
rate) by 2020.
• “It teaches you how to think.” – Steve Jobs
WHY CODE?
http://www.code.org/
http://www.youtube.com/watch?v=nKIu9yen5nc
WHAT’S THE
DIFFERENCE?
HTML: STRUCTURE CSS: STYLE
http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
WHAT ARE THE BASIC
PARTS OF A WEBSITE?
1. Header
2. Navigation
3. Sidebar
4. Body
5. Footer
http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/
BASIC OPTIONS
LAYOUT
1. One-column
2. Two-column
3. Three columns
4. Multi-column
5. Horizontal
6. Mobile
WIDTHS (THE 3 F’S)
1. Fixed
2. Fluid
3. Flexible
• Widescreen (max)
• Regular screen
• Tablet
• Phone (min)
LAYOUT EXAMPLES
FLEXIBLE WIDTH (AKA
RESPONSIVE)
CHECK OUT THESE
EXAMPLES
1. Korean Tourism Organization
1. http://english.visitkorea.or.kr/enu/index.kto
2. My Korean Learning Website
1. http://www.keytokorean.com/
3. TalkToMeInKorean.com
1. http://www.talktomeinkorean.com/
4. Smashing Magazine Web Design
1. http://www.smashingmagazine.com/
WEBSITE
LANGUAGE
HTML5
MOST BASIC “TAGS”
• <!DOCTYPE>
• <html>
• <meta />
• <head>
• <body>
• <header>
• <footer>
• <nav>
• <aside>
• <div>
• <title>
• <h1…h6>
• <p>
• <a>
• <em>, <i>
• <strong>, <b>
• <blockquote>
• <img />
• <br />
• <!-- -->
MORE COMPLEX
ELEMENTS
• Forms (multiple tags)
• Lists (for example)
• Ordered List <ol>
• Unordered List <ul>
• List Item <li>
• Tables (7 tags)
• Media (multiple tags)
LET’S MAKE
SOMETHING

Weitere ähnliche Inhalte

Andere mochten auch

Aicf website upgrade 2010 presentation
Aicf website upgrade 2010 presentationAicf website upgrade 2010 presentation
Aicf website upgrade 2010 presentationjekkilekki
 
KOTESOL Gradebook Presentation
KOTESOL Gradebook PresentationKOTESOL Gradebook Presentation
KOTESOL Gradebook Presentationjekkilekki
 
JavaScript 1 for high school
JavaScript 1 for high schoolJavaScript 1 for high school
JavaScript 1 for high schooljekkilekki
 
WordPress for Education PPT
WordPress for Education PPTWordPress for Education PPT
WordPress for Education PPTjekkilekki
 
Report Writing Tips
Report Writing TipsReport Writing Tips
Report Writing Tipsjekkilekki
 
서울 미트업 2015 오픈 소스, 워드프레스, 그리고 커뮤니티
서울 미트업 2015   오픈 소스, 워드프레스, 그리고 커뮤니티서울 미트업 2015   오픈 소스, 워드프레스, 그리고 커뮤니티
서울 미트업 2015 오픈 소스, 워드프레스, 그리고 커뮤니티jekkilekki
 

Andere mochten auch (7)

Aicf website upgrade 2010 presentation
Aicf website upgrade 2010 presentationAicf website upgrade 2010 presentation
Aicf website upgrade 2010 presentation
 
KOTESOL Gradebook Presentation
KOTESOL Gradebook PresentationKOTESOL Gradebook Presentation
KOTESOL Gradebook Presentation
 
A/an grammar
A/an grammarA/an grammar
A/an grammar
 
JavaScript 1 for high school
JavaScript 1 for high schoolJavaScript 1 for high school
JavaScript 1 for high school
 
WordPress for Education PPT
WordPress for Education PPTWordPress for Education PPT
WordPress for Education PPT
 
Report Writing Tips
Report Writing TipsReport Writing Tips
Report Writing Tips
 
서울 미트업 2015 오픈 소스, 워드프레스, 그리고 커뮤니티
서울 미트업 2015   오픈 소스, 워드프레스, 그리고 커뮤니티서울 미트업 2015   오픈 소스, 워드프레스, 그리고 커뮤니티
서울 미트업 2015 오픈 소스, 워드프레스, 그리고 커뮤니티
 

Ähnlich wie Computer B Course Intro - GPA High School

Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsCaesar Chi
 
Untangling spring week1
Untangling spring week1Untangling spring week1
Untangling spring week1Derek Jacoby
 
AstroLabs_Academy_Learning_to_Code-Coding_Bootcamp_Day1.pdf
AstroLabs_Academy_Learning_to_Code-Coding_Bootcamp_Day1.pdfAstroLabs_Academy_Learning_to_Code-Coding_Bootcamp_Day1.pdf
AstroLabs_Academy_Learning_to_Code-Coding_Bootcamp_Day1.pdfFarHanWasif1
 
Tech Thursdays: Building Products
Tech Thursdays: Building ProductsTech Thursdays: Building Products
Tech Thursdays: Building ProductsHayden Bleasel
 
What Visual Studio Code can do for Java Development
What Visual Studio Code can do for Java DevelopmentWhat Visual Studio Code can do for Java Development
What Visual Studio Code can do for Java DevelopmentEd Burns
 
A Beginner's Guide to Client Side Development with Javascript
A Beginner's Guide to Client Side Development with JavascriptA Beginner's Guide to Client Side Development with Javascript
A Beginner's Guide to Client Side Development with JavascriptSharePoint Saturday New Jersey
 
0 uprise u_coding major overview 20210105
0 uprise u_coding major overview 202101050 uprise u_coding major overview 20210105
0 uprise u_coding major overview 20210105John Picasso
 
Info Session GDSC USICT
Info Session GDSC USICTInfo Session GDSC USICT
Info Session GDSC USICTDSCUSICT
 
Kendo UI - Mikita Manko at Mobile Optimized
Kendo UI - Mikita Manko at Mobile OptimizedKendo UI - Mikita Manko at Mobile Optimized
Kendo UI - Mikita Manko at Mobile OptimizedMikita Manko
 
Continuous integration by Rémy Virin
Continuous integration by Rémy VirinContinuous integration by Rémy Virin
Continuous integration by Rémy VirinCocoaHeads France
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteChristian Heilmann
 
German introduction to sp framework
German   introduction to sp frameworkGerman   introduction to sp framework
German introduction to sp frameworkBob German
 
Breaking out of the endless callback look - #jsday Italy keynote
Breaking out of the endless callback look - #jsday Italy keynoteBreaking out of the endless callback look - #jsday Italy keynote
Breaking out of the endless callback look - #jsday Italy keynoteChristian Heilmann
 
Build mini - Windows 10 Dev & Cross platform Dev
Build mini - Windows 10 Dev & Cross platform DevBuild mini - Windows 10 Dev & Cross platform Dev
Build mini - Windows 10 Dev & Cross platform DevIan Chen
 
Neoito — NativeScript Best Coding Practices
Neoito — NativeScript Best Coding PracticesNeoito — NativeScript Best Coding Practices
Neoito — NativeScript Best Coding PracticesNeoito
 
Untangling fall2017 week1
Untangling fall2017 week1Untangling fall2017 week1
Untangling fall2017 week1Derek Jacoby
 
Mahmoud Mostafa Mohamed Lashen
Mahmoud Mostafa Mohamed LashenMahmoud Mostafa Mohamed Lashen
Mahmoud Mostafa Mohamed Lashenmahmoud lashen
 

Ähnlich wie Computer B Course Intro - GPA High School (20)

Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web Apps
 
Untangling spring week1
Untangling spring week1Untangling spring week1
Untangling spring week1
 
AstroLabs_Academy_Learning_to_Code-Coding_Bootcamp_Day1.pdf
AstroLabs_Academy_Learning_to_Code-Coding_Bootcamp_Day1.pdfAstroLabs_Academy_Learning_to_Code-Coding_Bootcamp_Day1.pdf
AstroLabs_Academy_Learning_to_Code-Coding_Bootcamp_Day1.pdf
 
Tech Thursdays: Building Products
Tech Thursdays: Building ProductsTech Thursdays: Building Products
Tech Thursdays: Building Products
 
What Visual Studio Code can do for Java Development
What Visual Studio Code can do for Java DevelopmentWhat Visual Studio Code can do for Java Development
What Visual Studio Code can do for Java Development
 
A Beginner's Guide to Client Side Development with Javascript
A Beginner's Guide to Client Side Development with JavascriptA Beginner's Guide to Client Side Development with Javascript
A Beginner's Guide to Client Side Development with Javascript
 
0 uprise u_coding major overview 20210105
0 uprise u_coding major overview 202101050 uprise u_coding major overview 20210105
0 uprise u_coding major overview 20210105
 
Info Session GDSC USICT
Info Session GDSC USICTInfo Session GDSC USICT
Info Session GDSC USICT
 
Kendo UI - Mikita Manko at Mobile Optimized
Kendo UI - Mikita Manko at Mobile OptimizedKendo UI - Mikita Manko at Mobile Optimized
Kendo UI - Mikita Manko at Mobile Optimized
 
RWD - Bootstrap
RWD - BootstrapRWD - Bootstrap
RWD - Bootstrap
 
Continuous integration by Rémy Virin
Continuous integration by Rémy VirinContinuous integration by Rémy Virin
Continuous integration by Rémy Virin
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
German introduction to sp framework
German   introduction to sp frameworkGerman   introduction to sp framework
German introduction to sp framework
 
Be faster then rabbits
Be faster then rabbitsBe faster then rabbits
Be faster then rabbits
 
Breaking out of the endless callback look - #jsday Italy keynote
Breaking out of the endless callback look - #jsday Italy keynoteBreaking out of the endless callback look - #jsday Italy keynote
Breaking out of the endless callback look - #jsday Italy keynote
 
Jsday
JsdayJsday
Jsday
 
Build mini - Windows 10 Dev & Cross platform Dev
Build mini - Windows 10 Dev & Cross platform DevBuild mini - Windows 10 Dev & Cross platform Dev
Build mini - Windows 10 Dev & Cross platform Dev
 
Neoito — NativeScript Best Coding Practices
Neoito — NativeScript Best Coding PracticesNeoito — NativeScript Best Coding Practices
Neoito — NativeScript Best Coding Practices
 
Untangling fall2017 week1
Untangling fall2017 week1Untangling fall2017 week1
Untangling fall2017 week1
 
Mahmoud Mostafa Mohamed Lashen
Mahmoud Mostafa Mohamed LashenMahmoud Mostafa Mohamed Lashen
Mahmoud Mostafa Mohamed Lashen
 

Kürzlich hochgeladen

Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxJisc
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsMebane Rash
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxUmeshTimilsina1
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxEsquimalt MFRC
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxDenish Jangid
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfSherif Taha
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfNirmal Dwivedi
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Pooja Bhuva
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibitjbellavia9
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSCeline George
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Jisc
 
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Pooja Bhuva
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and ModificationsMJDuyan
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxPooja Bhuva
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxCeline George
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structuredhanjurrannsibayan2
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024Elizabeth Walsh
 

Kürzlich hochgeladen (20)

Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 

Computer B Course Intro - GPA High School

  • 1. COMPUTER B: CODING COURSE OVERVIEW & INTRO MR. SNOWBERGER
  • 2. NEW THINGS FOR THIS SEMESTER 1. All computers have Deep Freeze 1. Nothing you install will stay 2. Nothing you save will remain 2. All students have Google Drive (with new email) 1. You all have 30GB FREE 2. SESO – Save Early, Save Often 3. All phones will be collected 1. (And occasionally returned for projects)
  • 3. COURSE BREAKDOWN WEBSITE CODING • Essential (2-3) • HTML5 (1) • CSS3 (1) • Potential (1+?) • PHP? • JavaScript? • WordPress? SMARTPHONE APPS • Harvard Online • Android Apps (6) • iDevice Apps (6) • App Stores (1) http://cs76.tv/2012/spring/
  • 4. GRADING BREAKDOWN CODING PROJECTS • Website (40) • Initial work (20) • Weekly progress (2) • (Total = 2*12 ~ 20) • Smartphones (110) • Android (50) • iDevices (50) • App Stores (10) TESTS/HOMEWORK • Midterm (30) • Final (40) • Homework (30) • Weekly question (2) • (Total = 2*16 ~ 30) • Bonus Points (1-1) • For outside work
  • 5. AND PARTICIPATION (50) ATTENDANCE • Expected • All topics build upon each other. • Miss too many, you can’t finish. • Not graded • (Included in Participation grade) PARTICIPATION • In-class • No sleeping • No surfing while lecturing • No games/videos • Weekly • Blog progress report • Homework question • Graded weekly
  • 6. TOOLS • Pre-installed • Lightshot (screenshots = press PrtSc) • Filezilla (file uploads, if necessary) • To-be-installed • Notepad++ (web programming) • Eclipse (Java + Android SDK) • Xcode and iOS SDK for Windows • Possibly? • WAMP (for running a local Apache server) • WordPress (if we get into WordPress dev)
  • 9. WHY LEARN (WEBSITE*) CODING? • It’s fun.* • It’s the easiest form of coding to begin with.* • It’s quickly becoming an essential computer skill (coding is becoming the new literacy). • Coding jobs in the US will grow by 30% (twice the normal rate) by 2020. • “It teaches you how to think.” – Steve Jobs
  • 11. WHAT’S THE DIFFERENCE? HTML: STRUCTURE CSS: STYLE http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
  • 12. WHAT ARE THE BASIC PARTS OF A WEBSITE? 1. Header 2. Navigation 3. Sidebar 4. Body 5. Footer http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/
  • 13. BASIC OPTIONS LAYOUT 1. One-column 2. Two-column 3. Three columns 4. Multi-column 5. Horizontal 6. Mobile WIDTHS (THE 3 F’S) 1. Fixed 2. Fluid 3. Flexible • Widescreen (max) • Regular screen • Tablet • Phone (min)
  • 16. CHECK OUT THESE EXAMPLES 1. Korean Tourism Organization 1. http://english.visitkorea.or.kr/enu/index.kto 2. My Korean Learning Website 1. http://www.keytokorean.com/ 3. TalkToMeInKorean.com 1. http://www.talktomeinkorean.com/ 4. Smashing Magazine Web Design 1. http://www.smashingmagazine.com/
  • 18. MOST BASIC “TAGS” • <!DOCTYPE> • <html> • <meta /> • <head> • <body> • <header> • <footer> • <nav> • <aside> • <div> • <title> • <h1…h6> • <p> • <a> • <em>, <i> • <strong>, <b> • <blockquote> • <img /> • <br /> • <!-- -->
  • 19. MORE COMPLEX ELEMENTS • Forms (multiple tags) • Lists (for example) • Ordered List <ol> • Unordered List <ul> • List Item <li> • Tables (7 tags) • Media (multiple tags)