CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript,...
Transcript of CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript,...
![Page 1: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/1.jpg)
CS50 Beyond
![Page 2: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/2.jpg)
Course Overview
![Page 3: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/3.jpg)
Topics
• HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React • Scalability, Security
![Page 4: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/4.jpg)
Schedule
• 7 days, Saturday January 19 — Friday January 25 • 10am-5pm
• 10am-12:30pm : Morning Session • 12:30pm-2pm: Lunch • 2pm-5pm: Afternoon Session
![Page 5: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/5.jpg)
Staff
Instructor • Brian Yu
Teaching Fellows • Athena Braun • Josh Sacher • Krishna Suraj • Julia Pearl
![Page 7: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/7.jpg)
Agenda
• HTML • HTML5 Features • Regular Expressions
• CSS • Selectors, Combinators, Specificity • Box Model • Responsive Design
![Page 8: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/8.jpg)
HTML
![Page 9: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/9.jpg)
<!DOCTYPE html> <html> <head> <title>Hello!</title> </head> <body> Hello, world! </body> </html>
![Page 10: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/10.jpg)
Common HTML Elements
• <h1>, <h2>, ..., <h6>
• <ol>, <ul>
• <img>
• <a>
• <table>
• <form>
![Page 11: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/11.jpg)
Links
• Linking to local page • Linking to external page • Linking to same page
![Page 12: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/12.jpg)
Page Organization
HTML4
•<div class="header"> •<div class="nav"> •<div class="section"> •<div class="footer">
HTML5
•<header> •<nav> •<section> •<footer>
![Page 13: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/13.jpg)
New HTML5 Features
• contenteditable
• datalist
• pattern
• audio
• video
• ...
![Page 14: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/14.jpg)
Regular Expressions
• Define a "regular language" • Used in string searching algorithms • Basic Operations
• Concatenation • Alternation • Kleene Star
![Page 15: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/15.jpg)
Regular Expressions
Expression:
hi
Matches:
hi
![Page 16: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/16.jpg)
Regular Expressions
Expression:
hi|hello
Matches:
hi hello
![Page 17: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/17.jpg)
Regular Expressions
Expression:
hi?
Matches:
h hi
![Page 18: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/18.jpg)
Regular Expressions
Expression:
hi*
Matches:
h hi hii hiii hiiii ...
![Page 19: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/19.jpg)
Regular Expressions
Expression:
hi+
Matches:
hi hii hiii hiiii ...
![Page 20: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/20.jpg)
Regular Expressions
Expression:
hi{3}
Matches:
hiii
![Page 21: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/21.jpg)
Regular Expressions
Expression:
.
Matches:
a A 2 8 ! ...
![Page 22: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/22.jpg)
Regular Expressions
Expression:
\.
Matches:
.
![Page 23: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/23.jpg)
Regular Expressions
Expression:
[a-z]
Matches:
a b c ... z
![Page 24: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/24.jpg)
Regular Expressions
Expression:
[A-Z]
Matches:
A B C ... Z
![Page 25: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/25.jpg)
Regular Expressions
Expression:
[0-9]
Matches:
0 1 2 ... 9
![Page 26: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/26.jpg)
Regular Expressions
Expression:
[0-9]{3}-[0-9]{3}-[0-9]{4}
Matches:
123-456-7890 617-495-1000 555-555-5555 ...
![Page 27: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/27.jpg)
Regular Expressions
Expression:
.+@.+\..+
Matches:
![Page 28: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/28.jpg)
Regular Expressions
Expression:
0|-?[1-9][0-9]*
Matches:
0 2 28 -2 -28 ...
![Page 29: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/29.jpg)
CSS
![Page 30: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/30.jpg)
Common CSS Properties
• color
• text-align
• width, height
• margin, padding
• font-family, font-size, font-weight
• border
![Page 31: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/31.jpg)
CSS Box Model
Content
![Page 32: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/32.jpg)
CSS Box ModelBorder
Content
![Page 33: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/33.jpg)
CSS Box ModelMarginBorder
Content
![Page 34: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/34.jpg)
CSS Box ModelMarginBorder
Padding
Content
![Page 35: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/35.jpg)
Identifying Elements
• div
• span
• id
• class
![Page 36: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/36.jpg)
SelectorsSelector Purpose
a, b Multiple Element Selectora b Descendant Selector
a > b Child Selectora + b Adjacent Sibling Selector[a=b] Attribute Selector
a:b Pseudoclass Selectora::b Pseudoelement Selector
![Page 37: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/37.jpg)
Specificity
1. inline 2. id 3. class 4. type
![Page 38: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/38.jpg)
RGB Colors
#4682b4R G B
00 — ff0 255
![Page 39: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/39.jpg)
Responsive Design
• Viewport • Media Queries • Flexbox • Grid
![Page 40: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/40.jpg)
Viewport
![Page 41: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/41.jpg)
Viewport
![Page 42: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/42.jpg)
Media Queries
• Media Types: print, screen, ... • Media Features: height, width, orientation, ...
![Page 43: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/43.jpg)
Flexbox
1 2 3 4 5 61 2 3 4 5 6
![Page 44: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/44.jpg)
Flexbox
1 2 3 4 5 6
1 2 3 4 5 6
![Page 45: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/45.jpg)
Flexbox
1 2 3 4 5 61 2 3 4 5 6
![Page 46: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/46.jpg)
Flexbox
1 2 3 4 5 61 2 3 4 5 6
![Page 47: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/47.jpg)
Flexbox
1 2 3 4 5 61 2 3 4 5 6
![Page 48: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/48.jpg)
Flexbox
1 2 3 4 5 61 2 3
4 5 6
![Page 49: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/49.jpg)
Bootstrap
• A front-end component library.
![Page 50: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/50.jpg)
Morning Project
• Experiment! • Design an HTML page using...
• HTML5 features (contenteditable, datalist, etc.) • CSS selectors and combinators • Responsive design (media queries, flexbox, etc.)
• Try to replicate an existing webpage
![Page 51: CS50 Beyond · CS50 Beyond. Course Overview. Topics • HTML5, CSS3 • Git • JavaScript, Functional Programming • Python, Flask • Database Design, SQL, ORM, APIs • React](https://reader036.fdocuments.us/reader036/viewer/2022081522/5f02c7977e708231d405f8b4/html5/thumbnails/51.jpg)
CS50 Beyond