Embed Size (px)
Citation preview
April 2017
Responsive Web Design
http://bit.ly/responsive-la
Wifi: CrossCamp.us Events
About us
We train developers and data scientists through 1-on-1 mentorship and career prep
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
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
Today’s goals
• Overview of responsive design
• Intro to HTML
• Intro to CSS
• Media queries
Not goals
• Deep understanding of HTML/CSS/JavaScript
• Command line
• Deep dive into every responsive issue 😣
What is HTML?
HTML is the content and structure of a webpage
Three key concepts: Tags Elements Attributes
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>
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">
What is CSS?
Cascading Style Sheets determine the visual presentation of your HTML
webpages
What is CSS?
Key concepts:
Selectors Property Value Declaration / Declaration block
Two problems we solve with CSS:
Presentation of specific elements Layout
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.
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
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
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.
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
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
Start out with the basics: color changer
HTML:
<main></main>
CSS:
main { width: 250px; height: 250px; margin: 250px auto; background-color: blue; }
Media query
CSS:
@media screen and (max-width: 800px) { main { background-color: red; }}
Mobile first
CSS:
@media screen and (min-width: 800px) { main { background-color: red; }}
Challenge
CSS:
3 more Breakpoints
300px or higher - yellow
500px or higher - green
1000px or higher - orange
Easy resizing using %
CSS:
main { width: 90%; height: 250px; margin: 250px auto; background-color: blue; }
Using constraints
CSS:
main { width: 90%; max-width: 800px; min-width: 250px; height: 250px; margin: 250px auto; background-color: blue; }
The grid!
row
60px
6.25%
gutter
20px
2.08%
The grid!
At a certain point the columns will stack on top of each other
The grid!
Fork this starter pen, reverse engineer the code for a few minutes
http://codepen.io/tjstalcup/pen/NdYpLR
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
.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;}
Wait, what happened?
First rule ensures rows are as tall as their tallest child. Floats sometimesmess 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;}
cols
floating to the leftallows columns toline-up next toeach 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
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%;}
cols
Any screen 640pxor higher, setup our flexible columns
3/12 = 0.25
4/12 = ?
6/12 = ?
12/12 = ?
@media only screen and (min-width: 640px) { /* 3 columns, 3/12 in % */ .col-3 { min-width: 25%; } .col-4 {
}
.col-6 {
}
.col-12 {
}
}
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
Finished preview
Bootstrap/Foundation/Materialize
• Off the shelf Grid Systems
• Twitter Bootstrap
• Foundation
• Materialize
• Bloat
• Crutch
• Super Awesome
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)
More about Thinkful
You’ll learn concepts, practice with drills, and build capstone projects for your own portfolio — all guided by a personal mentor
Our mentors
Mentors have, on average, 10+ years of experience
Our results
Job Titles after GraduationMonths until Employed
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 [email protected])
