Build your own website

1. Build Your Own WebsiteBuild Your Own Website
with HTML/CSSwith HTML/CSS
June 2018
http://bit.ly/build-site-pdxhttp://bit.ly/build-site-pdx
1

2. Instructor
George Mandis
Full-stack Web Developer
Thinkful Mentor
TAs
2

3. About you
What's your name?
What brought you here today?
What is your programming experience?
Wi-Fi: Cross Camp.us Events bit.ly/website-la
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.
4

5. Suggestions for learning
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
5

6. This is what we're making
View example here
Wi-Fi: Cross Camp.us Events bit.ly/website-la
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: Cross Camp.us Events bit.ly/website-la
7

8. HTML - Hypertext Markup Language
<h1 class="intro">Hi there!</h1>
AttributeOpening tag
h1 element
Closing tagContent
Wi-Fi: Cross Camp.us Events bit.ly/website-la
8

9. HTML
Wi-Fi: Cross Camp.us Events bit.ly/website-la
9

10. CSS - Cascading Style Sheets
h1 {
color: blue;
}
Value
Property
Selector
Wi-Fi: Cross Camp.us Events bit.ly/website-la
10

11. CSS selectors, properties, values
Wi-Fi: Cross Camp.us Events bit.ly/website-la
11

12. Margin, border, and padding
Wi-Fi: Cross Camp.us Events bit.ly/website-la
Wi-Fi: Cross Camp.us Events bit.ly/website-la 12

13. Margin, border, and padding
Wi-Fi: Cross Camp.us Events bit.ly/website-la
13

14. Real developers use Google... a lot
Wi-Fi: Cross Camp.us Events bit.ly/website-la
14

15. Glitch setup & first steps!
http://bit.ly/tf-website-starter
Wi-Fi: Cross Camp.us Events bit.ly/website-la
15 . 1

16. Ways to keep learning
15 . 2

17. Thinkful's free courseThinkful's free course
HTML, CSS and JavaScript
Unlimited group mentor sessions
Personal Program Manager
Slack Channel
Text
http://bit.ly/web-dev-freehttp://bit.ly/web-dev-free
15 . 3

18. Thinkful graduates in PDX...
80%80%as full-time developers/engineers
Chris Reeder
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-stats
UX Manager
Cesar Jimenez
Full Stack Developer
Greg Van Buren
Sr. Analyst
placed in tech careers
92%92%
15 . 4