.

1. Front End
Crash Course:
HTML & CSS

2. Introductions
➔ What's your name?
➔ What is your programming experience?
➔ What brought you here today?

4. Type a URL from a client (e.g. google.com)
Browser sends an HTTP request asking for specific files
Browser receives those files and renders them as a website
How
the
Web
Works

5. Client
vs
Server
The client sends requests.
Frontend Developers
manage what users see.
The server sends responses.
Backend Developers
manage what the app does.

6. Example:
facebook
Client Server
Open browser
and navigate
to
facebook.com
HTML, CSS, &
JavaScript
render
newsfeed
Initial Request
Following Response
Algorithm
determines
content of
feed
Sends back
HTML, CSS,
JavaScript
files
Request
Response

7. Example:
facebook
Client Server
Open browser
and navigate
to
facebook.com
HTML, CSS, &
JavaScript
render
newsfeed
Initial Request
Following Response
Algorithm
determines
content of
feed
Sends back
HTML, CSS,
JavaScript
files
Request
Response
We’ll be writing these files
that the browser will render

8. HTML:
Hypertext
Markup
Language

9. HTML:
Hypertext
Markup
Language

10. HTML:
Structure

11. HTML:
Tags,
Elements,
Attributes

12. HTML
By
Itself
=
Boring

13. CSS:
Cascading
Style
Sheets Selector
Value
Property

14. CSS:
Selectors,
Properties,
Values

15. CSS:
Cascading
Style
Sheets
p {
color: #CCCCCC;
font-family: helvetica;
border: 5px solid blue;
}
div {
background-image:
url("imageFile.jpg");
width: 50%;
height: 70%;
}
.loginButton {
border: none;
background-color: rgba(34,
124, 45, 0.5);
}
Lots of properties:
htmldog.com/references/css/properties/

16. Margin,
Border &
Padding
Margin
Border
Content
Padding

17. Margin,
Border, &
Padding
bit.ly/box-model-drill

18. Real
Developers
Use Google...
A Lot.

19. Assignments
for
Tonight
bit.ly/tf-html-classroom

20. Ways
to
Learn
Code

21. ➔ Free trial of Full Stack Flex
online program
➔ Start with HTML, CSS and JavaScript
➔ Personal Program Manager
➔ Unlimited Q&A Sessions
➔ Student Slack Community
➔ bit.ly/freetrial-webdev
Thinkful
Two-Week
Free
Trial

22. The
Student
Experience
Jeff Connelly, Thinkful Graduate
Portfolio
Shay Kennedy, Thinkful Graduate
Capstone
Shari Hobbs, Thinkful Graduate
Capstone
Evan Thompson, Thinkful Graduate
Capstone

23. ➔ bit.ly/tf-event-feedback
Survey