This document outlines an HTML/CSS crash course workshop to build a website. The agenda includes learning key concepts of HTML and CSS like tags, elements, selectors, properties and values over 90 minutes. Students will be guided through setting up a starter project on Glitch and building their site with support. Suggestions are given to keep learning like exploring more structured or less structured programs with Thinkful's mentoring and resources.

1. HTML/CSS Crash Course:
Build Your Own Website
March 2018
WIFI: CrossCamp.us Members
Password: innovate
bit.ly/website-labit.ly/website-la
1

2. Instructor
Walter Guevara
Thinkful Web Dev Mentor
CTO & Co-founder @ Renly
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la
Justin Ezor - TA
Thinkful LA Community Manager
Web Developer
Co-founder @ Hacker Fund
2

3. About you
What's your name?
What brought you here today?
What is your programming experience?
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://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.
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 4

5. Suggestions for learning
Don't treat this as a drill, we're making something realwe're making something real
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
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 5

6. This is what we're making
View example here
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://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: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 7

8. HTML - Hypertext Markup Language
<h1 class="intro">Hi there!</h1>
AttributeOpening tag
h1 element
Closing tag
bit.ly/website-la
Content
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website 8Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la

9. HTML
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 9

10. CSS - Cascading Style Sheets
h1 {
color: blue;
}
Value
Property
Selector
bit.ly/website-la
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none
10http://bit.ly/website-la

11. CSS selectors, properties, values
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 11

12. Margin, border, and padding
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 12

13. Margin, border, and padding
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 13

14. Real developers use Google... a lot
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 14

15. Glitch setup & first steps!
http://bit.ly/build-website-starter
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 15

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

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

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

19. Our results
92%92%job-placement rate + job guarantee
Kaeside IwuagwuKaeside Iwuagwu
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-https://www.thinkful.com/bootcamp-jobs-
statsstats
Frontend Developer
Sierra GreggSierra Gregg
Software Engineer
JP EarnestJP Earnest
Web Developer
19

20. Thinkful's free resource
Talk to one of us and email justin.ezor@thinkful.comjustin.ezor@thinkful.com to learn more
Web Development Fundamentals
Covers HTML, CSS and JavaScript
Unlimited mentor-led Q&A sessions
Personal Program Manager to help you
set goals and navigate resources
Student Slack Channel
bit.ly/free-web-la
20