Quick intro to HTML & CSS to build an Introductory Website.

1. Build Your Own WebsiteBuild Your Own Website
2F & 2G
April 2018
http://bit.ly/build-website-html-csshttp://bit.ly/build-website-html-css
WiFi: MakeOf ces 5Ghz
Password: Internet!23
1

2. Instructor
TJ Stalcup
Lead DC Mentor @Thinkful
SE Lead @540
Pokemon Master
TAs
bit.ly/build-website-html-css
2

3. About you
What's your name?
What brought you here today?
What is your programming experience?
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-cssWi-Fi: In3-Guest
bit.ly/build-website-html-cssbit.ly/build-website-html-css
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.
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-css
Wi-Fi: In3-Guest
bit.ly/build-website-html-cssbit.ly/build-website-html-css
4

5. Take advantage of support
Don't treat this as a drill, we're making something real
Don't get discouraged, struggle leads to mastery
Don't be shy, take full advantage of our support
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-cssWi-Fi: In3-Guest
bit.ly/build-website-html-cssbit.ly/build-website-html-css
5

6. This is what we're making
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-css
Wi-Fi: In3-Guest bit.ly/build-website-html-css
bit.ly/build-website-html-css
tf-website-livehttp://bit.ly/
6

7. Agenda
Learn key HTML and CSS concepts (30 min)
Go over starter code (10 min)
Build your site with our support! (30 min)
Steps to continue learning (10 min)
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-cssbit.ly/build-website-html-css
7

8. Real developers use Google... a lot
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-cssbit.ly/build-website-html-css
8

9. HTML - Hypertext Markup Language
<h1 class="intro">Hi there!</h1>
AttributeOpening tag
h1 element
Closing tagContent
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-css
9
bit.ly/build-website-html-css

10. HTML
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-cssbit.ly/build-website-html-css
10

11. First steps!
http://bit.ly/tf-website-start
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-cssbit.ly/build-website-html-css
11

12. CSS - Cascading Style Sheets
h1 {
color: blue;
}
Value
Property
Selector
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-cssbit.ly/build-website-html-css
12

13. CSS selectors, properties, values
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-cssbit.ly/build-website-html-css
13

14. Margin, border, and padding
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-cssbit.ly/build-website-html-css
14

15. Margin, border, and padding
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-cssbit.ly/build-website-html-css
15

16. Continue with CSS ...
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-cssbit.ly/build-website-html-css
16

17. Complete Website
17

18. Solution
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
bit.ly/build-website-html-cssbit.ly/build-website-html-css
18