.

1. Build Your Own Website with HTML/CSS
September 2017
WIFI: The Department Guest
http://bit.ly/phx-html-css
1

2. Instructor
Dave Hoel
Thinkful Graduate, Instructor
Full Stack Web Developer
TA
Mitchell Cravens
Thinkful Mentor
2

3. About you
What's your name?
What brought you here today?
What is your programming experience?
3

4. About Thinkful
Thinkful helps people become developers or data scientists
through 1-on-1 mentorship and project-based learning.
These workshops are built using this approach.These workshops are built using this approach.
4

5. Suggestions for learning
Don't treat this as a drill, we're making somethingwe're making something
real.real.
Don't get discouraged, struggle leads to mastery.struggle leads to mastery.
Don't be shy, take full advantage of our support.take full advantage of our support.
5

6. This is what we're making
View example here
6

7. Agenda
Learn key HTML and CSS concepts (20 min)
Go over starter code (10 min)
Build your site with our support! (30 min)
Steps to continue learning (10 min)
7

8. HTML - Hypertext Markup Language
<h1 class="intro">Hi there!</h1>
AttributeOpening tag
h1 element
Closing tag
bit.ly/website-la
Content
8

9. HTML
9

10. CSS - Cascading Style Sheets
h1 {
color: blue;
}
Value
Property
Selector
bit.ly/website-la
10

11. CSS selectors, properties, values
11

12. Margin, border, and padding
12

13. Margin, border, and padding
13

14. Real developers use Google... a lot
14

15. Glitch setup & first steps!
http://bit.ly/build-website-starter
15

16. 16

17. 17

18. 18

19. 19

20. 20

21. 21