Build Your Own Website
with HTML/CSS
December 2017
bit.ly/websiteSD
codepen.io
1
About us
Tanner Gill, Instructor
Software Engineer
Thinkful Graduate
Jasmine Kim , TA
Bootcamp Graduate
2
About you!
What's your name?
What brought you here today?
What is your programming experience?
3
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.
4
This is what we're making
View example here
5
Agenda
Learn key HTML and CSS concepts
Go over starter code
Build your site with our support!
Steps to continue learning
6
HTML - Hypertext Markup Language
<h1>Hi there!</h1>
Opening tag
h1 element
Closing tag
bit.ly/website-la
Content
7
HTML - Hypertext Markup Language
<h1 class="intro">Hi there!</h1>
AttributeOpening tag
h1 element
Closing tag
bit.ly/website-la
Content
8
HTML
9
CSS - Cascading Style Sheets
h1 {
color: blue;
}
Value
Property
Selector
bit.ly/website-la
10
CSS selectors, properties, values
11
Margin, border, and padding
12
Margin, border, and padding
13
Real developers use Google... a lot
14
Glitch setup & first steps!
http://bit.ly/build-website-starter
15
Ways to keep learning
16
Thinkful's Free Resource
HTML, CSS and JavaScript
Unlimited Group Mentor-led sessions
Personal Program Manager
bit.ly/tf-free-coursebit.ly/tf-free-course
17

S dwebsite12.18.17