SlideShare a Scribd company logo
1 of 41
Download to read offline
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 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;

}
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
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 640px

or 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
noel@thinkful.com)
Questions?
email me at noel@thinkful.com

More Related Content

What's hot

Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointSahil Gandhi
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlantaThinkful
 
Introduction to HTML5+CSS
Introduction to HTML5+CSSIntroduction to HTML5+CSS
Introduction to HTML5+CSSRamses Cabello
 
Introduction to the Web and HTML
Introduction to the Web and HTMLIntroduction to the Web and HTML
Introduction to the Web and HTMLSiddharthBorderwala
 
6 Steps to Make Your CSS Code More Maintainable
6 Steps to Make Your CSS Code More Maintainable6 Steps to Make Your CSS Code More Maintainable
6 Steps to Make Your CSS Code More Maintainable10Clouds
 
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoHow to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoSuzette Franck
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersSuzette Franck
 
Haml And Sass In 15 Minutes
Haml And Sass In 15 MinutesHaml And Sass In 15 Minutes
Haml And Sass In 15 MinutesPatrick Crowley
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSNYCSS Meetup
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web DevelopmentRahul Mishra
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersMelvin John
 
CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers10Clouds
 

What's hot (20)

Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
The Dark Arts of CSS
The Dark Arts of CSSThe Dark Arts of CSS
The Dark Arts of CSS
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
 
Introduction to HTML5+CSS
Introduction to HTML5+CSSIntroduction to HTML5+CSS
Introduction to HTML5+CSS
 
Introduction to the Web and HTML
Introduction to the Web and HTMLIntroduction to the Web and HTML
Introduction to the Web and HTML
 
6 Steps to Make Your CSS Code More Maintainable
6 Steps to Make Your CSS Code More Maintainable6 Steps to Make Your CSS Code More Maintainable
6 Steps to Make Your CSS Code More Maintainable
 
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoHow to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - Sacramento
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
CSS Fundamentals
CSS FundamentalsCSS Fundamentals
CSS Fundamentals
 
Inline, Block and Positioning in CSS
Inline, Block and Positioning in CSSInline, Block and Positioning in CSS
Inline, Block and Positioning in CSS
 
Css home
Css   homeCss   home
Css home
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
Haml And Sass In 15 Minutes
Haml And Sass In 15 MinutesHaml And Sass In 15 Minutes
Haml And Sass In 15 Minutes
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
 
CSS3 Introduction
CSS3 IntroductionCSS3 Introduction
CSS3 Introduction
 
CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers
 
Html for beginners
Html for beginnersHtml for beginners
Html for beginners
 

Similar to Responsive Web Design (April 18th, Los Angeles)

Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
Lect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptxLect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptxzainm7032
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)Chris Mills
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter BootstrapAhmed Haque
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFrédéric Harper
 
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Thinkful
 
New Css style
New Css styleNew Css style
New Css styleBUDNET
 
WEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptxWEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptxkarthiksmart21
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Mediacurrent
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS MethodologyZohar Arad
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Deepak Sharma
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
Web programming css
Web programming cssWeb programming css
Web programming cssUma mohan
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
Basics about front-end
Basics about front-endBasics about front-end
Basics about front-endCETPA Infotech
 

Similar to Responsive Web Design (April 18th, Los Angeles) (20)

Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Lect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptxLect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptx
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
Css
CssCss
Css
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
 
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)
 
New Css style
New Css styleNew Css style
New Css style
 
WEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptxWEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptx
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Web programming css
Web programming cssWeb programming css
Web programming css
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
Basics about front-end
Basics about front-endBasics about front-end
Basics about front-end
 
Team styles
Team stylesTeam styles
Team styles
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 

More from Thinkful

893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370Thinkful
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsThinkful
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsThinkful
 
Twit botsd1.30.18
Twit botsd1.30.18Twit botsd1.30.18
Twit botsd1.30.18Thinkful
 
Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)Thinkful
 
Baggwjs124
Baggwjs124Baggwjs124
Baggwjs124Thinkful
 
Become a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info SessionBecome a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info SessionThinkful
 
Vpet sd-1.25.18
Vpet sd-1.25.18Vpet sd-1.25.18
Vpet sd-1.25.18Thinkful
 
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info SessionLA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info SessionThinkful
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming LanguageThinkful
 
Batbwjs117
Batbwjs117Batbwjs117
Batbwjs117Thinkful
 
1/16/18 Intro to JS Workshop
1/16/18 Intro to JS Workshop1/16/18 Intro to JS Workshop
1/16/18 Intro to JS WorkshopThinkful
 
LA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: FundamentalsLA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: FundamentalsThinkful
 
(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: FundamentalsThinkful
 
Websitesd1.15.17.
Websitesd1.15.17.Websitesd1.15.17.
Websitesd1.15.17.Thinkful
 
Bavpwjs110
Bavpwjs110Bavpwjs110
Bavpwjs110Thinkful
 
Byowwhc110
Byowwhc110Byowwhc110
Byowwhc110Thinkful
 
Getting started-jan-9-2018
Getting started-jan-9-2018Getting started-jan-9-2018
Getting started-jan-9-2018Thinkful
 
Introjs1.9.18tf
Introjs1.9.18tfIntrojs1.9.18tf
Introjs1.9.18tfThinkful
 

More from Thinkful (20)

893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: Fundamentals
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: Fundamentals
 
Itjsf129
Itjsf129Itjsf129
Itjsf129
 
Twit botsd1.30.18
Twit botsd1.30.18Twit botsd1.30.18
Twit botsd1.30.18
 
Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)
 
Baggwjs124
Baggwjs124Baggwjs124
Baggwjs124
 
Become a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info SessionBecome a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info Session
 
Vpet sd-1.25.18
Vpet sd-1.25.18Vpet sd-1.25.18
Vpet sd-1.25.18
 
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info SessionLA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming Language
 
Batbwjs117
Batbwjs117Batbwjs117
Batbwjs117
 
1/16/18 Intro to JS Workshop
1/16/18 Intro to JS Workshop1/16/18 Intro to JS Workshop
1/16/18 Intro to JS Workshop
 
LA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: FundamentalsLA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: Fundamentals
 
(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals
 
Websitesd1.15.17.
Websitesd1.15.17.Websitesd1.15.17.
Websitesd1.15.17.
 
Bavpwjs110
Bavpwjs110Bavpwjs110
Bavpwjs110
 
Byowwhc110
Byowwhc110Byowwhc110
Byowwhc110
 
Getting started-jan-9-2018
Getting started-jan-9-2018Getting started-jan-9-2018
Getting started-jan-9-2018
 
Introjs1.9.18tf
Introjs1.9.18tfIntrojs1.9.18tf
Introjs1.9.18tf
 

Recently uploaded

Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnershipsexpandedwebsite
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽中 央社
 
demyelinated disorder: multiple sclerosis.pptx
demyelinated disorder: multiple sclerosis.pptxdemyelinated disorder: multiple sclerosis.pptx
demyelinated disorder: multiple sclerosis.pptxMohamed Rizk Khodair
 
....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdfVikramadityaRaj
 
An Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppAn Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppCeline George
 
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17Celine George
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxheathfieldcps1
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya - UEM Kolkata Quiz Club
 
Financial Accounting IFRS, 3rd Edition-dikompresi.pdf
Financial Accounting IFRS, 3rd Edition-dikompresi.pdfFinancial Accounting IFRS, 3rd Edition-dikompresi.pdf
Financial Accounting IFRS, 3rd Edition-dikompresi.pdfMinawBelay
 
Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Celine George
 
MSc Ag Genetics & Plant Breeding: Insights from Previous Year JNKVV Entrance ...
MSc Ag Genetics & Plant Breeding: Insights from Previous Year JNKVV Entrance ...MSc Ag Genetics & Plant Breeding: Insights from Previous Year JNKVV Entrance ...
MSc Ag Genetics & Plant Breeding: Insights from Previous Year JNKVV Entrance ...Krashi Coaching
 
Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024CapitolTechU
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Mohamed Rizk Khodair
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project researchCaitlinCummins3
 
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...Denish Jangid
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文中 央社
 
PSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxPSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxMarlene Maheu
 
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptxREPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptxmanishaJyala2
 

Recently uploaded (20)

Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
 
demyelinated disorder: multiple sclerosis.pptx
demyelinated disorder: multiple sclerosis.pptxdemyelinated disorder: multiple sclerosis.pptx
demyelinated disorder: multiple sclerosis.pptx
 
....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf
 
An Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppAn Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge App
 
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
 
Financial Accounting IFRS, 3rd Edition-dikompresi.pdf
Financial Accounting IFRS, 3rd Edition-dikompresi.pdfFinancial Accounting IFRS, 3rd Edition-dikompresi.pdf
Financial Accounting IFRS, 3rd Edition-dikompresi.pdf
 
Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17
 
Mattingly "AI and Prompt Design: LLMs with Text Classification and Open Source"
Mattingly "AI and Prompt Design: LLMs with Text Classification and Open Source"Mattingly "AI and Prompt Design: LLMs with Text Classification and Open Source"
Mattingly "AI and Prompt Design: LLMs with Text Classification and Open Source"
 
MSc Ag Genetics & Plant Breeding: Insights from Previous Year JNKVV Entrance ...
MSc Ag Genetics & Plant Breeding: Insights from Previous Year JNKVV Entrance ...MSc Ag Genetics & Plant Breeding: Insights from Previous Year JNKVV Entrance ...
MSc Ag Genetics & Plant Breeding: Insights from Previous Year JNKVV Entrance ...
 
“O BEIJO” EM ARTE .
“O BEIJO” EM ARTE                       .“O BEIJO” EM ARTE                       .
“O BEIJO” EM ARTE .
 
Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
 
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
 
PSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxPSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptx
 
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptxREPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
 

Responsive Web Design (April 18th, Los Angeles)

  • 1. April 2017 Responsive Web Design http://bit.ly/responsive-la Wifi: CrossCamp.us Events
  • 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
  • 5. Today’s goals • Overview of responsive design • Intro to HTML • Intro to CSS • Media queries
  • 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;
 }
  • 19. Media query CSS: @media screen and (max-width: 800px) {
 main {
 background-color: red;
 }
 }
  • 20. Mobile first CSS: @media screen and (min-width: 800px) {
 main {
 background-color: red;
 }
 }
  • 21. Challenge CSS: 3 more Breakpoints 300px or higher - yellow 500px or higher - green 1000px or higher - orange
  • 22. Easy resizing using % CSS: main {
 width: 90%;
 height: 250px;
 margin: 250px auto;
 background-color: blue;
 }
  • 23. Using constraints CSS: main {
 width: 90%;
 max-width: 800px;
 min-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%;
 }
  • 32. cols Any screen 640px
 or 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 { } }
  • 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
  • 35. Bootstrap/Foundation/Materialize • Off the shelf Grid Systems • Twitter Bootstrap • Foundation • Materialize • Bloat • Crutch • Super Awesome
  • 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
  • 38. Our mentors Mentors have, on average, 10+ years of experience
  • 39. Our results Job Titles after GraduationMonths until Employed
  • 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)
  • 41. Questions? email me at noel@thinkful.com