SlideShare a Scribd company logo
Frontend Crash Course
November 2017
WIFI: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
1
Instructor
TJ Stalcup
Lead DC Mentor @Thinkful
API Evangelist @WealthEngine
Pokemon Master
Wifi: MakeOffices 5Ghz
Password: Internet!23
TAs
http://bit.ly/frontend-course
2
About you
What's your name?
What brought you here today?
What is your programming experience?
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
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.
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
4
Suggestions for learning
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
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
5
Agenda
Learn key HTML and CSS concepts (30 min)
Go over the assignments (10 min)
Complete challenges with support (30 min)
Steps to continue learning (10 min)
http://bit.ly/html-crash-course
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
6
How the web works
Type a URL from a client (e.g. google.com)​
Browser sends an HTTP request asking for specific files
Browser receives those files and renders them as a website
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
7
Client/Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manages what app does
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
8
Example: facebook.com
Client Server
Open browser
and navigate to
facebook.com
HTML, CSS, &
Javascript render
newsfeed
Request
Response
Algorithm
determines
content of feed.
Sends back
HTML, CSS,
Javascript files
Application LogicApplication Logic
Initial requestInitial request
Following responseFollowing response
http://bit.ly/html-crash-course 9
http://bit.ly/frontend-course
Wifi: MakeOffices 5Ghz
Password: Internet!23
How this relates to today
Client Server
Open browser
and navigate to
facebook.com
HTML, CSS, &
Javascript render
newsfeed
Request
Response
Algorithm
determines
content of feed.
Sends back
HTML, CSS,
Javascript files
Application LogicApplication LogicInitial requestInitial request
Following responseFollowing response
We'll be writing
these files that the
brower will render
http://bit.ly/html-crash-course
10
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
HTML - (HyperText Markup Language)
<h1 class="intro">Hi there!</h1>
Attribute
Opening
section tag
h1
element
Closing
section tag
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
11
HTML - structure
<html>
<body>
<h1 class="title">Hello world!</h1>
</body>
</html>
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
12
HTML tags, elements, attributes
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
13
HTML, by itself, is boring
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
14
Assignments for tonight
Go to: http://bit.ly/tf-html-classroom
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
15
CSS - (Cascading Style Sheets)
h1 {
color: blue;
}
Value
Property
Selector
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
16
CSS selectors, properties, values
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
17
CSS has lots of properties and values
p {
color: #CCCCCC;
font-family: helvetica;
border: 5px solid blue;
}
div {
background-image: url("imageFile.jpg");
width: 50%;
height: 70%;
}
.loginButton {
border: none;
background-color: rgba(34, 124, 45, 0.5);
}
Lots of properties:
http://www.htmldog.com/references/css/properties/
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
18
Margin, border, and padding
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
19
Margin, border, and padding
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
20
Real developers use Google... a lot
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
21
Assignments for tonight
Go to: http://bit.ly/tf-html-classroom
Wifi: MakeOffices 5Ghz
Password: Internet!23
http://bit.ly/frontend-course
22
Ways to keep learning
23
For aspiring developers, bootcamps fill the gap
24
92%92%
job-placement rate + job guarantee
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-statshttps://www.thinkful.com/bootcamp-jobs-stats
Thinkful's track record of getting students jobs
25
Our students receive unprecedented support
Learning Mentor
Career MentorProgram Manager
Local Community
You
26
Mentorship enables flexible learning
Learn anywhere,
anytime, & at your own
pace
You don't have to quitYou don't have to quit
your job to startyour job to start
career transitioncareer transition
27
Thinkful Two-Week Trial
Talk to one of us and email benjy@thinkful.combenjy@thinkful.com to learn more
Two-week Free Course Trial
Start with HTML, CSS and JavaScript
Unlimited QAs sessions
Option to continue with full bootcamp
Financing & scholarships available
Offer valid tonight onlyOffer valid tonight only
BenjyBenjy SchechnerSchechner
Education Advisor
28

More Related Content

What's hot

BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
Thinkful
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
Aaron Lamphere
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
Aaron Lamphere
 
WordCamp Birmingham 2015 - Theme building tricks of the trade
WordCamp Birmingham 2015 - Theme building tricks of the tradeWordCamp Birmingham 2015 - Theme building tricks of the trade
WordCamp Birmingham 2015 - Theme building tricks of the trade
Jonny Allbut
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
Aaron Lamphere
 
Professional WordPress Workflow - WPDay 2015
Professional WordPress Workflow - WPDay 2015 Professional WordPress Workflow - WPDay 2015
Professional WordPress Workflow - WPDay 2015
Maurizio Pelizzone
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Aaron Lamphere
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
Aaron Lamphere
 
WordCamp Birmingham 2015 - Theme building workshop
WordCamp Birmingham 2015 - Theme building workshopWordCamp Birmingham 2015 - Theme building workshop
WordCamp Birmingham 2015 - Theme building workshop
Jonny Allbut
 
WordCamp Sheffield 2014 Theme Workflow Presentation
WordCamp Sheffield 2014 Theme Workflow PresentationWordCamp Sheffield 2014 Theme Workflow Presentation
WordCamp Sheffield 2014 Theme Workflow Presentation
Jonny Allbut
 
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Jonny Allbut
 
website la 11/28
website la 11/28website la 11/28
website la 11/28
Thinkful
 
Tsvetan stoychev m_mspeakers-edited-final
Tsvetan stoychev m_mspeakers-edited-finalTsvetan stoychev m_mspeakers-edited-final
Tsvetan stoychev m_mspeakers-edited-final
ceckoslab
 
Build Own Website
Build Own WebsiteBuild Own Website
Build Own Website
Ivy Rueb
 
Thinkful build a website (html, css)
Thinkful build a website (html, css)Thinkful build a website (html, css)
Thinkful build a website (html, css)
Thinkful
 
Building your first WordPress plugin
Building your first WordPress pluginBuilding your first WordPress plugin
Building your first WordPress pluginJustin Foell
 
Drupal Day 2011 - Features: una vita felice
Drupal Day 2011 - Features: una vita feliceDrupal Day 2011 - Features: una vita felice
Drupal Day 2011 - Features: una vita felice
DrupalDay
 
How to deliver a WordPress website to your client ...the RIGHT way
How to deliver a WordPress website to your client ...the RIGHT wayHow to deliver a WordPress website to your client ...the RIGHT way
How to deliver a WordPress website to your client ...the RIGHT way
Cath Hughes
 
Web Development with Vim by Johannes Raggam
Web Development with Vim by Johannes RaggamWeb Development with Vim by Johannes Raggam
Web Development with Vim by Johannes Raggam
T. Kim Nguyen
 
Beg, Borrow or Steal: The Art of Flashing Without Flashing
Beg, Borrow or Steal: The Art of Flashing Without FlashingBeg, Borrow or Steal: The Art of Flashing Without Flashing
Beg, Borrow or Steal: The Art of Flashing Without Flashing
spjwebster
 

What's hot (20)

BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
WordCamp Birmingham 2015 - Theme building tricks of the trade
WordCamp Birmingham 2015 - Theme building tricks of the tradeWordCamp Birmingham 2015 - Theme building tricks of the trade
WordCamp Birmingham 2015 - Theme building tricks of the trade
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
 
Professional WordPress Workflow - WPDay 2015
Professional WordPress Workflow - WPDay 2015 Professional WordPress Workflow - WPDay 2015
Professional WordPress Workflow - WPDay 2015
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
 
WordCamp Birmingham 2015 - Theme building workshop
WordCamp Birmingham 2015 - Theme building workshopWordCamp Birmingham 2015 - Theme building workshop
WordCamp Birmingham 2015 - Theme building workshop
 
WordCamp Sheffield 2014 Theme Workflow Presentation
WordCamp Sheffield 2014 Theme Workflow PresentationWordCamp Sheffield 2014 Theme Workflow Presentation
WordCamp Sheffield 2014 Theme Workflow Presentation
 
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
 
website la 11/28
website la 11/28website la 11/28
website la 11/28
 
Tsvetan stoychev m_mspeakers-edited-final
Tsvetan stoychev m_mspeakers-edited-finalTsvetan stoychev m_mspeakers-edited-final
Tsvetan stoychev m_mspeakers-edited-final
 
Build Own Website
Build Own WebsiteBuild Own Website
Build Own Website
 
Thinkful build a website (html, css)
Thinkful build a website (html, css)Thinkful build a website (html, css)
Thinkful build a website (html, css)
 
Building your first WordPress plugin
Building your first WordPress pluginBuilding your first WordPress plugin
Building your first WordPress plugin
 
Drupal Day 2011 - Features: una vita felice
Drupal Day 2011 - Features: una vita feliceDrupal Day 2011 - Features: una vita felice
Drupal Day 2011 - Features: una vita felice
 
How to deliver a WordPress website to your client ...the RIGHT way
How to deliver a WordPress website to your client ...the RIGHT wayHow to deliver a WordPress website to your client ...the RIGHT way
How to deliver a WordPress website to your client ...the RIGHT way
 
Web Development with Vim by Johannes Raggam
Web Development with Vim by Johannes RaggamWeb Development with Vim by Johannes Raggam
Web Development with Vim by Johannes Raggam
 
Beg, Borrow or Steal: The Art of Flashing Without Flashing
Beg, Borrow or Steal: The Art of Flashing Without FlashingBeg, Borrow or Steal: The Art of Flashing Without Flashing
Beg, Borrow or Steal: The Art of Flashing Without Flashing
 

Similar to Frontend Crash Course

Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
TJ Stalcup
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Thinkful
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
TJ Stalcup
 
Intro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DCIntro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DC
TJ Stalcup
 
Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScript
Ivy Rueb
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Ivy Rueb
 
Intro to js august 31
Intro to js august 31Intro to js august 31
Intro to js august 31
Thinkful
 
html/CSS Crash course
html/CSS Crash coursehtml/CSS Crash course
html/CSS Crash course
Justin Ezor
 
html/CSS crash course correct free course link
html/CSS crash course correct free course linkhtml/CSS crash course correct free course link
html/CSS crash course correct free course link
Justin Ezor
 
html/CSS Crash course w/ interactive slides link
html/CSS Crash course w/ interactive slides linkhtml/CSS Crash course w/ interactive slides link
html/CSS Crash course w/ interactive slides link
Justin Ezor
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Aaron Lamphere
 
Introduction to JavaScript, Washington, DC February 2018
Introduction to JavaScript, Washington, DC February 2018Introduction to JavaScript, Washington, DC February 2018
Introduction to JavaScript, Washington, DC February 2018
Thinkful
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScript
TJ Stalcup
 
Build Your Own Website - Intro to HTML & CSS
Build Your Own Website - Intro to HTML & CSSBuild Your Own Website - Intro to HTML & CSS
Build Your Own Website - Intro to HTML & CSS
TJ Stalcup
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Ivy Rueb
 
Intro to js september 19
Intro to js september 19Intro to js september 19
Intro to js september 19
Thinkful
 
Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScript
Ivy Rueb
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
Thinkful
 
Intro to Python
Intro to PythonIntro to Python
Intro to Python
TJ Stalcup
 

Similar to Frontend Crash Course (20)

Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
 
Intro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DCIntro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DC
 
Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScript
 
IJS821
IJS821IJS821
IJS821
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
 
Intro to js august 31
Intro to js august 31Intro to js august 31
Intro to js august 31
 
html/CSS Crash course
html/CSS Crash coursehtml/CSS Crash course
html/CSS Crash course
 
html/CSS crash course correct free course link
html/CSS crash course correct free course linkhtml/CSS crash course correct free course link
html/CSS crash course correct free course link
 
html/CSS Crash course w/ interactive slides link
html/CSS Crash course w/ interactive slides linkhtml/CSS Crash course w/ interactive slides link
html/CSS Crash course w/ interactive slides link
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Introduction to JavaScript, Washington, DC February 2018
Introduction to JavaScript, Washington, DC February 2018Introduction to JavaScript, Washington, DC February 2018
Introduction to JavaScript, Washington, DC February 2018
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScript
 
Build Your Own Website - Intro to HTML & CSS
Build Your Own Website - Intro to HTML & CSSBuild Your Own Website - Intro to HTML & CSS
Build Your Own Website - Intro to HTML & CSS
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74
 
Intro to js september 19
Intro to js september 19Intro to js september 19
Intro to js september 19
 
Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScript
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-28
 
Intro to Python
Intro to PythonIntro to Python
Intro to Python
 

More from TJ Stalcup

Intro to Python for Data Science
Intro to Python for Data ScienceIntro to Python for Data Science
Intro to Python for Data Science
TJ Stalcup
 
Intro to Python for Data Science
Intro to Python for Data ScienceIntro to Python for Data Science
Intro to Python for Data Science
TJ Stalcup
 
Intro to Python
Intro to PythonIntro to Python
Intro to Python
TJ Stalcup
 
Predict the Oscars using Data Science
Predict the Oscars using Data SciencePredict the Oscars using Data Science
Predict the Oscars using Data Science
TJ Stalcup
 
Data Science Your Vacation
Data Science Your VacationData Science Your Vacation
Data Science Your Vacation
TJ Stalcup
 
Data Science Your Vacation
Data Science Your VacationData Science Your Vacation
Data Science Your Vacation
TJ Stalcup
 
Build a Game with Javascript
Build a Game with JavascriptBuild a Game with Javascript
Build a Game with Javascript
TJ Stalcup
 
Build Your Own Instagram Filters
Build Your Own Instagram FiltersBuild Your Own Instagram Filters
Build Your Own Instagram Filters
TJ Stalcup
 
Choosing a Programming Language
Choosing a Programming LanguageChoosing a Programming Language
Choosing a Programming Language
TJ Stalcup
 
Build a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptBuild a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScript
TJ Stalcup
 
DC jQuery App
DC jQuery AppDC jQuery App
DC jQuery App
TJ Stalcup
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScript
TJ Stalcup
 
Thinkful DC - Building a Virtual Pet with JavaScript
Thinkful DC - Building a Virtual Pet with JavaScriptThinkful DC - Building a Virtual Pet with JavaScript
Thinkful DC - Building a Virtual Pet with JavaScript
TJ Stalcup
 
Thinkful - Intro to Data Science - Washington DC
Thinkful - Intro to Data Science - Washington DCThinkful - Intro to Data Science - Washington DC
Thinkful - Intro to Data Science - Washington DC
TJ Stalcup
 
Build Your Own Website - Thinkful DC
Build Your Own Website - Thinkful DCBuild Your Own Website - Thinkful DC
Build Your Own Website - Thinkful DC
TJ Stalcup
 
Build a Game with JavaScript - Thinkful DC
Build a Game with JavaScript - Thinkful DCBuild a Game with JavaScript - Thinkful DC
Build a Game with JavaScript - Thinkful DC
TJ Stalcup
 
Build a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptBuild a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScript
TJ Stalcup
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
TJ Stalcup
 
Intro to Data Science
Intro to Data ScienceIntro to Data Science
Intro to Data Science
TJ Stalcup
 
Thinkful - Intro to JavaScript
Thinkful - Intro to JavaScriptThinkful - Intro to JavaScript
Thinkful - Intro to JavaScript
TJ Stalcup
 

More from TJ Stalcup (20)

Intro to Python for Data Science
Intro to Python for Data ScienceIntro to Python for Data Science
Intro to Python for Data Science
 
Intro to Python for Data Science
Intro to Python for Data ScienceIntro to Python for Data Science
Intro to Python for Data Science
 
Intro to Python
Intro to PythonIntro to Python
Intro to Python
 
Predict the Oscars using Data Science
Predict the Oscars using Data SciencePredict the Oscars using Data Science
Predict the Oscars using Data Science
 
Data Science Your Vacation
Data Science Your VacationData Science Your Vacation
Data Science Your Vacation
 
Data Science Your Vacation
Data Science Your VacationData Science Your Vacation
Data Science Your Vacation
 
Build a Game with Javascript
Build a Game with JavascriptBuild a Game with Javascript
Build a Game with Javascript
 
Build Your Own Instagram Filters
Build Your Own Instagram FiltersBuild Your Own Instagram Filters
Build Your Own Instagram Filters
 
Choosing a Programming Language
Choosing a Programming LanguageChoosing a Programming Language
Choosing a Programming Language
 
Build a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptBuild a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScript
 
DC jQuery App
DC jQuery AppDC jQuery App
DC jQuery App
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScript
 
Thinkful DC - Building a Virtual Pet with JavaScript
Thinkful DC - Building a Virtual Pet with JavaScriptThinkful DC - Building a Virtual Pet with JavaScript
Thinkful DC - Building a Virtual Pet with JavaScript
 
Thinkful - Intro to Data Science - Washington DC
Thinkful - Intro to Data Science - Washington DCThinkful - Intro to Data Science - Washington DC
Thinkful - Intro to Data Science - Washington DC
 
Build Your Own Website - Thinkful DC
Build Your Own Website - Thinkful DCBuild Your Own Website - Thinkful DC
Build Your Own Website - Thinkful DC
 
Build a Game with JavaScript - Thinkful DC
Build a Game with JavaScript - Thinkful DCBuild a Game with JavaScript - Thinkful DC
Build a Game with JavaScript - Thinkful DC
 
Build a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptBuild a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScript
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 
Intro to Data Science
Intro to Data ScienceIntro to Data Science
Intro to Data Science
 
Thinkful - Intro to JavaScript
Thinkful - Intro to JavaScriptThinkful - Intro to JavaScript
Thinkful - Intro to JavaScript
 

Recently uploaded

PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 

Recently uploaded (20)

PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 

Frontend Crash Course

  • 1. Frontend Crash Course November 2017 WIFI: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 1
  • 2. Instructor TJ Stalcup Lead DC Mentor @Thinkful API Evangelist @WealthEngine Pokemon Master Wifi: MakeOffices 5Ghz Password: Internet!23 TAs http://bit.ly/frontend-course 2
  • 3. About you What's your name? What brought you here today? What is your programming experience? Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 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. Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 4
  • 5. Suggestions for learning 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 Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 5
  • 6. Agenda Learn key HTML and CSS concepts (30 min) Go over the assignments (10 min) Complete challenges with support (30 min) Steps to continue learning (10 min) http://bit.ly/html-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 6
  • 7. How the web works Type a URL from a client (e.g. google.com)​ Browser sends an HTTP request asking for specific files Browser receives those files and renders them as a website Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 7
  • 8. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 8
  • 9. Example: facebook.com Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascript render newsfeed Request Response Algorithm determines content of feed. Sends back HTML, CSS, Javascript files Application LogicApplication Logic Initial requestInitial request Following responseFollowing response http://bit.ly/html-crash-course 9 http://bit.ly/frontend-course Wifi: MakeOffices 5Ghz Password: Internet!23
  • 10. How this relates to today Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascript render newsfeed Request Response Algorithm determines content of feed. Sends back HTML, CSS, Javascript files Application LogicApplication LogicInitial requestInitial request Following responseFollowing response We'll be writing these files that the brower will render http://bit.ly/html-crash-course 10 Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course
  • 11. HTML - (HyperText Markup Language) <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 11
  • 12. HTML - structure <html> <body> <h1 class="title">Hello world!</h1> </body> </html> Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 12
  • 13. HTML tags, elements, attributes Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 13
  • 14. HTML, by itself, is boring Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 14
  • 15. Assignments for tonight Go to: http://bit.ly/tf-html-classroom Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 15
  • 16. CSS - (Cascading Style Sheets) h1 { color: blue; } Value Property Selector Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 16
  • 17. CSS selectors, properties, values Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 17
  • 18. CSS has lots of properties and values p { color: #CCCCCC; font-family: helvetica; border: 5px solid blue; } div { background-image: url("imageFile.jpg"); width: 50%; height: 70%; } .loginButton { border: none; background-color: rgba(34, 124, 45, 0.5); } Lots of properties: http://www.htmldog.com/references/css/properties/ Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 18
  • 19. Margin, border, and padding Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 19
  • 20. Margin, border, and padding Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 20
  • 21. Real developers use Google... a lot Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 21
  • 22. Assignments for tonight Go to: http://bit.ly/tf-html-classroom Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 22
  • 23. Ways to keep learning 23
  • 24. For aspiring developers, bootcamps fill the gap 24
  • 25. 92%92% job-placement rate + job guarantee Link for the third party audit jobs report: https://www.thinkful.com/bootcamp-jobs-statshttps://www.thinkful.com/bootcamp-jobs-stats Thinkful's track record of getting students jobs 25
  • 26. Our students receive unprecedented support Learning Mentor Career MentorProgram Manager Local Community You 26
  • 27. Mentorship enables flexible learning Learn anywhere, anytime, & at your own pace You don't have to quitYou don't have to quit your job to startyour job to start career transitioncareer transition 27
  • 28. Thinkful Two-Week Trial Talk to one of us and email benjy@thinkful.combenjy@thinkful.com to learn more Two-week Free Course Trial Start with HTML, CSS and JavaScript Unlimited QAs sessions Option to continue with full bootcamp Financing & scholarships available Offer valid tonight onlyOffer valid tonight only BenjyBenjy SchechnerSchechner Education Advisor 28