Build your own website with html/css

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

2. Instructor
Megan Buzzas
Thinkful Web Dev Student
Freelance web developer
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.These workshops are built using this approach.
CrossCamp.us Events bit.ly/website-la
4

5. Suggestions for learning
Don't treat this as a drill, we're making somethingwe're making something
realreal
Don't get discouraged, struggle leads to masterystruggle leads to mastery
Don't be shy, take full advantage of our supporttake full advantage of our support
CrossCamp.us Events bit.ly/website-la
5

6. This is what we're making
View example here
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)
Steps to continue learning (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.
<h1 class="intro">Hi there!</h1>
Attribute
Opening
section tag
h1
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.
h1 {
color: blue;
}
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. Our instructors help us write, teach, and
improve our workshops & curriculum
16

17. Career prep and job-placement
Liz Stephanie
Our career services team has helped 93% of our grads
begin jobs at companies like:
17

18. Take a Thinkful tour!
Talk to one of us to set something up !
Take a look through Thinkful's
student platform to see if
project-based, online learning
is a good fit for you %
While we're at it, give us
feedback on tonight's
workshop.
18