2. About us
We train developers and data
scientists through 1-on-1
mentorship and career prep
3. About me
• Austen Weinhart
• UC Berkeley ’12
• Worked as a Front-End developer at Event Farm
• Worked on pages for clients such as Google,
Facebook, Microsoft, and more
• Currently COO at Coding Autism, a coding
bootcamp for adults on the autism spectrum
4. About you
Why are you here?
• Do you want to work better with developers?
• Do you want to start working in tech?
• Do you have an idea that you want to build?
Programming experience?
• First lines of code will be written tonight
• Been self-teaching for 1-3 months
• Been at this for 3+ months
6. Not goals
• Deep understanding of HTML/CSS/JavaScript
• Command line
• Deep dive into every responsive issue 😣
7. What is HTML?
HTML is the content and structure of a
webpage
Three key concepts:
Tags
Elements
Attributes
8. HTML Tags
Every tag starts with a “less than” sign and ends
with a “greater than” sign
There are opening tags and closing tags. Closing
tags have a backslash before the tag name.
<html> This is an HTML tag
<body> This is a body tag
<h1>Hello world!</h1> This line has two
H1 tags, one opening and one closing
</body>
</html>
9. HTML Elements
HTML elements usually consist of an opening tag,
closing tag, and some content.
<html>
<body> This element starts here and ends two
lines below
<h1>Hello world!</h1> This is an HTML
element
</body>
</html>
Some consist of just a self-closing tag
<img src=“http://i.imgur.com/Th5404r.jpg">
10. What is CSS?
Cascading Style Sheets determine the
visual presentation of your HTML
webpages
11. What is CSS?
Key concepts:
Selectors
Property
Value
Declaration / Declaration block
Two problems we solve with CSS:
Presentation of specific elements
Layout
12. CSS Selectors
CSS selectors determine which HTML elements
are targeted for specific styles:
p This selects all paragraph tags
.header This selects HTML elements with the
class “header”
#navigation This selects HTML elements with
the ID navigation
p.header This selects paragraph tags with the
header class
Selectors can be combined.
13. CSS Properties
CSS properties determine what about the
appearance you’re setting:
color This determines the font color
font-family This lets you set the typeface
as well as backup typefaces
background-image This lets you set a
background image for an element
height This lets you set the height of an
element
14. CSS Properties
CSS properties determine what about the
appearance you’re setting:
color This determines the font color
font-family This lets you set the typeface
as well as backup typefaces
background-image This lets you set a
background image for an element
height This lets you set the height of an
element
15. CSS Properties
h1 {
color: red;
font-size: 36px;
}
Each property has a default value for a given
element. When you write CSS, you over-ride
that default value with a new value.
16. Getting set up with CodePen
• If you don’t already have an account, create
one. You can save one what you work on for
later. It’s also a super helpful tool.
• We’ll be resizing our browsers to experiment
with responsive design — use the side view:
https://codepen.io/accounts/signup
17. What is responsive?
• Website/application that can quickly resize and
respond to different browser sizes
• Styles are only applied based on breakpoints
• Desktop first
• Mobile first
• TV, desktop, laptop,
tablet, phone
18. Start out with the basics: color changer
HTML:
<main></main>
CSS:
main {
width: 250px;
height: 250px;
margin: 250px auto;
background-color: blue;
}
25. The grid!
At a certain point the columns will stack on top of each other
26. The grid!
Fork this starter pen, reverse engineer the
code for a few minutes
http://codepen.io/tjstalcup/pen/NdYpLR
27. The grid!
.row - container divs to house each row
.col-3 - these divs stretch across 3 columns
(3*4 = 12)
Our actual content is contained in those
columns
28. .row styles
automatically centered
cannot go larger than 1000px
that padding ensures a 960px grid
.row {
max-width: 1000px;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
}
29. Wait, what happened?
First rule ensures rows
are as tall as their tallest
child. Floats sometimes
mess this up. This fixes
that.
Clearfix makes sure all
rows start on the next
line
/* Clearfix */
.row::before,
.row::after {
display: table;
content: '';
}
.row::after {
clear: both;
}
30. cols
floating to the left
allows columns to
line-up next to
each other
.col-3, .col-4, .col-6, .col-12 {
float: left;
padding-left: 1.04166666%;
padding-right: 1.04166666%;
}
1.04166666%?
20px gutters (10 on ea. side)
10/960 = 0.01041666667
31. cols
We are building Mobile First
On Mobile, all columns stack on top of each
other
/* Mobile defaults */
.col-3, .col-4, .col-6, .col-12 {
width: 100%;
}
33. Your turn!
• code up the remaining CSS for the grid
• add a row with three 4-width columns. Each
column should have a colored box
• add a row with two 6-width columns. Each
column should have a colored box
• add a row with one 12-width column. This
column should have a colored box
36. What next?
• Keep practicing building websites and making them
responsive
• Structured learning
• Free online resources (JavaScript30,
FreeCodeCamp)
• Low-cost online resources (CodeSchool,
TeamTreeHouse)
• Night classes at community college or
universities
• Coding bootcamps (full-time or part-time)
37. More about Thinkful
You’ll learn concepts, practice with drills, and build capstone
projects for your own portfolio — all guided by a personal mentor
40. Try us out!
Try the program for two
weeks, includes six mentor
sessions - $50
Learn HTML/CSS/JavaScript
Option to continue onto web
development bootcamp
Come talk to me if you’re
interested (or email me at
noel@thinkful.com)
