This document provides an overview of a workshop to teach participants how to build their own website. The workshop will be led by Austen Weinhart and will cover HTML and CSS concepts for 30 minutes each. Participants will then build their own "About Me" site on Glitch.com with support from the instructor and TAs. The goal is for participants to learn key skills for building websites and to have a working site by the end of the workshop. Thinkful's approach of 1-on-1 mentorship and project-based learning will be used.

1. Build Your Own Website
June 2017
WIFI: CrossCamp.us Events
bit.ly/website-la
1

2. Instructor
Austen Weinhart
Worked in enterprise software
Co-Founder of Coding Autism,
training and navigating adults on
the autism spectrum into tech jobs
TAs
CrossCamp.us Events bit.ly/website-la
2

3. About you
What's your name? !
What brought you here today?
​I'm curious about a career as a developer
I'm considering enrolling in a bootcamp
What is your programming experience?
I'm completely new to programming 🐣
I've been self-teaching for a few months 🐥
I'm already a developer🐓
CrossCamp.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.
CrossCamp.us Events bit.ly/website-la
4

5. This is what we're making
View source code here
CrossCamp.us Events bit.ly/website-la
5

6. 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
CrossCamp.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)
Demos (don't be shy) (10 min)
Next steps (10 min)
CrossCamp.us Events bit.ly/website-la
7

8. HTML - what is it?
HTML (HyperText Markup Language) is the content
and structure of a webpage.
<section class="places">
<h1>Favorite places in LA</h1>
<ul>
<li>Santa Monica Pier</l1>
<li>Griffith Park</li>
<li>The Arts District</li>
</ul>
</section>
AttributeOpening
section tag
'ul'
element
Closing
section tag
bit.ly/website-laCrossCamp.us Events bit.ly/website-la
8

9. HTML tags, elements, attributes
CrossCamp.us Events bit.ly/website-la
9

10. CSS - what is it?
CSS (Cascading Style Sheets) determines the visual
representation of HTML content. With CSS we can
make the style and layout of HTML content unique.
h1 {
color: blue;
font-weight: bold;
font-size: 96px;
}
Declaration
block
Value
Property
Selector
bit.ly/website-laCrossCamp.us Events bit.ly/website-la
10

11. CSS selectors, properties, values
CrossCamp.us Events bit.ly/website-la
11

12. Our project for tonight
Your mission for tonight is to build your very own "About
Me" page using Glitch.com.
CrossCamp.us Events bit.ly/website-la
12

13. Glitch setup & first steps!
Fork the starter code here
CrossCamp.us Events bit.ly/website-la
13

14. Real developers use Google... a lot
CrossCamp.us Events bit.ly/website-la
14

15. Ways to keep learning
More Structure
Less Structure
More SupportLess Support
15

16. 325+ mentors325+ mentors with an average of
10 years of experience10 years of experience in the
field
16

17. Support 'round the clock
Your Mentor
Q&A Sessions
Career Coach
In-person Workshops
Slack
Program Manager
YouYou
17

18. Our results
Zachary HoltZachary Holt
Web Developer
Sierra GreggSierra Gregg
Software Engineer
JP EarnestJP Earnest
Web Developer
Web Development Bootcamp Jobs Report
93%93%
Grad job-placement rateGrad job-placement rate
$19,855$19,855
Average salary increaseAverage salary increase
18

19. Try us out!
Talk to me (or email noel@thinkful.com ) if you're interested
Learn HTML/CSS and JavaScript
Initial 2-week trial includes
six mentor sessions for $50
Option to continue onto web
development boothcamp
19