SlideShare a Scribd company logo
Frontend Crash Course
December 2017
Network: Deskhub-main
Password: stake2017!
http://bit.ly/fe-crash-sd
1
Instructor
Dominic Damian
Full-stack Developer
Thinkful Mentor
Jiu Jitsu Instructor
TAs
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
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
5
Agenda
Learn key HTML and CSS concepts (20 min)
Go over the assignments (10 min)
Complete challenges with support (30 min)
Steps to continue learning (10 min)
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
7
Client/Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manages what app does
8
Example: facebook.com
Client Server
Open browser
and navigate to
facebook.com
HTML, CSS, &
Javascrip render
newsfeed
Request
Response
9
Algorithm
determines
content of feed.
Sends back
HTML, CSS,
Javascript files
Application LogicApplication Logic
Initial requestInitial request
Following responseFollowing response
How this relates to today
Client Server
Open browser
and navigate to
facebook.com
HTML, CSS, &
Javascrip render
newsfeed
Request
10
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
HTML - (HyperText Markup Language)
<h1 class="intro">Hi there!</h1>
Attribute
Opening
section tag
h1
element
Closing
section tag
bit.ly/website-la
11
HTML - structure
<html>
<body>
<h1 class="title">Hello world!</h1>
</body>
</html>
bit.ly/website-la
12
HTML tags, elements, attributes
13
HTML, by itself, is boring
14
CSS - (Cascading Style Sheets)
h1 {
color: blue;
}
Value
Property
Selector
bit.ly/website-la
15
CSS selectors, properties, values
16
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/
17
Margin, border, and padding
18
Margin, border, and padding
19
Real developers use Google... a lot
20
Assignments for tonight
Go to: http://bit.ly/tf-html-classroom
21
Ways to keep learning
22
For aspiring developers...
Source: Bureau of Labor Statistics
23
92%92%job-placement rate in tech roles + job guarantee
Link for the third party audit jobs report:
https://www.thinkful.com/outcomeshttps://www.thinkful.com/outcomes
Thinkful's track record of getting students jobs
24
Our students receive unprecedented support
1-on-1 Learning Mentor
1-on-1 Career MentorProgram Manager
San Diego Community
You
25
1-on-1 mentorship enables flexible learning
Learn anywhere,
anytime, and at your
own schedule
You don't have to quit
your job to start career
transition
26
Thinkful Two-Week Trial
Talk to one of us and email benjy@thinkful.combenjy@thinkful.com to learn more
Two-week course with 4 mentor
sessions for $50 ($750 value)
Start with HTML, CSS and JavaScript
Option to continue with full bootcamp
Financing & scholarships available
Offer valid for one week after eventOffer valid for one week after event
BenjyBenjy SchechnerSchechner
Education Advisor
27

More Related Content

What's hot

Gutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no timeGutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no time
Mauricio Gelves
 
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015
Holger Bartel
 
Developing word press professionally
Developing word press professionallyDeveloping word press professionally
Developing word press professionally
Austin Gil
 
Gutenberg Blocks Development for Programmers with NO time
Gutenberg Blocks Development for Programmers with NO timeGutenberg Blocks Development for Programmers with NO time
Gutenberg Blocks Development for Programmers with NO time
Mauricio Gelves
 
Web dev presentation
Web dev presentationWeb dev presentation
Web dev presentation
Domendra Sahu
 
Adobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEMAdobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEM
Michael Leroy
 
Rahulpotfolio
RahulpotfolioRahulpotfolio
Rahulpotfolio
Rahul Raj RJ
 
Magento x codekit x sass x compass x skeleton responsive grid
Magento x codekit x sass x compass x skeleton responsive gridMagento x codekit x sass x compass x skeleton responsive grid
Magento x codekit x sass x compass x skeleton responsive grid
Arush Sehgal
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Gaurav Mishra
 
CSS Audits: Take Back Control of your CSS (Susan Robertson)
CSS Audits: Take Back Control of your CSS (Susan Robertson)CSS Audits: Take Back Control of your CSS (Susan Robertson)
CSS Audits: Take Back Control of your CSS (Susan Robertson)
Future Insights
 
WP-Boot
WP-BootWP-Boot
Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and Accessibility
Karl Dawson
 
Bootstrap Introduction
Bootstrap IntroductionBootstrap Introduction
Bootstrap Introduction
Andrea Tarr
 
BUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITEBUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITE
Iskender Piyale-Sheard
 
Creating a Wordpress Theme from Scratch
Creating a Wordpress Theme from ScratchCreating a Wordpress Theme from Scratch
Creating a Wordpress Theme from Scratch
Patrick Rauland
 
Web components. Compose the web.
Web components. Compose the web.Web components. Compose the web.
Web components. Compose the web.
Ny Fanilo Andrianjafy, B.Eng.
 
面向测试的前端知识
面向测试的前端知识面向测试的前端知识
面向测试的前端知识
chencheng 云谦
 
Bootstrap 3 + responsive
Bootstrap 3 + responsiveBootstrap 3 + responsive
Bootstrap 3 + responsive
hatchpb
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPress
Gerald Glynn
 
Developing a Web Application
Developing a Web ApplicationDeveloping a Web Application
Developing a Web Application
Rabab Gomaa
 

What's hot (20)

Gutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no timeGutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no time
 
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015
 
Developing word press professionally
Developing word press professionallyDeveloping word press professionally
Developing word press professionally
 
Gutenberg Blocks Development for Programmers with NO time
Gutenberg Blocks Development for Programmers with NO timeGutenberg Blocks Development for Programmers with NO time
Gutenberg Blocks Development for Programmers with NO time
 
Web dev presentation
Web dev presentationWeb dev presentation
Web dev presentation
 
Adobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEMAdobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEM
 
Rahulpotfolio
RahulpotfolioRahulpotfolio
Rahulpotfolio
 
Magento x codekit x sass x compass x skeleton responsive grid
Magento x codekit x sass x compass x skeleton responsive gridMagento x codekit x sass x compass x skeleton responsive grid
Magento x codekit x sass x compass x skeleton responsive grid
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
 
CSS Audits: Take Back Control of your CSS (Susan Robertson)
CSS Audits: Take Back Control of your CSS (Susan Robertson)CSS Audits: Take Back Control of your CSS (Susan Robertson)
CSS Audits: Take Back Control of your CSS (Susan Robertson)
 
WP-Boot
WP-BootWP-Boot
WP-Boot
 
Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and Accessibility
 
Bootstrap Introduction
Bootstrap IntroductionBootstrap Introduction
Bootstrap Introduction
 
BUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITEBUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITE
 
Creating a Wordpress Theme from Scratch
Creating a Wordpress Theme from ScratchCreating a Wordpress Theme from Scratch
Creating a Wordpress Theme from Scratch
 
Web components. Compose the web.
Web components. Compose the web.Web components. Compose the web.
Web components. Compose the web.
 
面向测试的前端知识
面向测试的前端知识面向测试的前端知识
面向测试的前端知识
 
Bootstrap 3 + responsive
Bootstrap 3 + responsiveBootstrap 3 + responsive
Bootstrap 3 + responsive
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPress
 
Developing a Web Application
Developing a Web ApplicationDeveloping a Web Application
Developing a Web Application
 

Similar to Fecc 12517-sd

Feccphx9:25
Feccphx9:25Feccphx9:25
Feccphx9:25
Thinkful
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Jordan Zurowski
 
Html5
Html5Html5
S dwebsite12.18.17
S dwebsite12.18.17S dwebsite12.18.17
S dwebsite12.18.17
Thinkful
 
Introduction to html & css
Introduction to html & cssIntroduction to html & css
Introduction to html & css
sesharao puvvada
 
Designing SharePoint 2010 for Business
Designing SharePoint 2010 for BusinessDesigning SharePoint 2010 for Business
Designing SharePoint 2010 for Business
Kanwal Khipple
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
Gareth Saunders
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work Everywhere
Doris Chen
 
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaWeb Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Stack Learner
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
Thinkful
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
Evan Mullins
 
Build your own website July 2017 LA
Build your own website July 2017 LABuild your own website July 2017 LA
Build your own website July 2017 LA
Thinkful
 
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
 
Byowwhc26
Byowwhc26Byowwhc26
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
zonathen
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSS
Timo Herttua
 
Byowwhc117
Byowwhc117Byowwhc117
Byowwhc117
Thinkful
 
Byowwhc117
Byowwhc117Byowwhc117
Byowwhc117
Thinkful
 
Front End Lecture 1.pptx
Front End Lecture 1.pptxFront End Lecture 1.pptx
Front End Lecture 1.pptx
malise2997
 

Similar to Fecc 12517-sd (20)

Feccphx9:25
Feccphx9:25Feccphx9:25
Feccphx9:25
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
 
Html5
Html5Html5
Html5
 
S dwebsite12.18.17
S dwebsite12.18.17S dwebsite12.18.17
S dwebsite12.18.17
 
Introduction to html & css
Introduction to html & cssIntroduction to html & css
Introduction to html & css
 
Designing SharePoint 2010 for Business
Designing SharePoint 2010 for BusinessDesigning SharePoint 2010 for Business
Designing SharePoint 2010 for Business
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work Everywhere
 
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaWeb Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
Build your own website July 2017 LA
Build your own website July 2017 LABuild your own website July 2017 LA
Build your own website July 2017 LA
 
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)
 
Byowwhc26
Byowwhc26Byowwhc26
Byowwhc26
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSS
 
Byowwhc117
Byowwhc117Byowwhc117
Byowwhc117
 
Byowwhc117
Byowwhc117Byowwhc117
Byowwhc117
 
Front End Lecture 1.pptx
Front End Lecture 1.pptxFront End Lecture 1.pptx
Front End Lecture 1.pptx
 

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-370
Thinkful
 
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
Thinkful
 
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
Thinkful
 
Itjsf129
Itjsf129Itjsf129
Itjsf129
Thinkful
 
Twit botsd1.30.18
Twit botsd1.30.18Twit botsd1.30.18
Twit botsd1.30.18
Thinkful
 
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
Baggwjs124
Thinkful
 
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
Thinkful
 
Vpet sd-1.25.18
Vpet sd-1.25.18Vpet sd-1.25.18
Vpet sd-1.25.18
Thinkful
 
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
Thinkful
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming Language
Thinkful
 
Batbwjs117
Batbwjs117Batbwjs117
Batbwjs117
Thinkful
 
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
Thinkful
 
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
Thinkful
 
(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
Thinkful
 
Websitesd1.15.17.
Websitesd1.15.17.Websitesd1.15.17.
Websitesd1.15.17.
Thinkful
 
Bavpwjs110
Bavpwjs110Bavpwjs110
Bavpwjs110
Thinkful
 
Byowwhc110
Byowwhc110Byowwhc110
Byowwhc110
Thinkful
 
Getting started-jan-9-2018
Getting started-jan-9-2018Getting started-jan-9-2018
Getting started-jan-9-2018
Thinkful
 
Introjs1.9.18tf
Introjs1.9.18tfIntrojs1.9.18tf
Introjs1.9.18tf
Thinkful
 

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

June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 

Recently uploaded (20)

June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 

Fecc 12517-sd

  • 1. Frontend Crash Course December 2017 Network: Deskhub-main Password: stake2017! http://bit.ly/fe-crash-sd 1
  • 3. About you What's your name? What brought you here today? What is your programming experience? 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. 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 5
  • 6. Agenda Learn key HTML and CSS concepts (20 min) Go over the assignments (10 min) Complete challenges with support (30 min) Steps to continue learning (10 min) 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 7
  • 8. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does 8
  • 9. Example: facebook.com Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascrip render newsfeed Request Response 9 Algorithm determines content of feed. Sends back HTML, CSS, Javascript files Application LogicApplication Logic Initial requestInitial request Following responseFollowing response
  • 10. How this relates to today Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascrip render newsfeed Request 10 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
  • 11. HTML - (HyperText Markup Language) <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag bit.ly/website-la 11
  • 12. HTML - structure <html> <body> <h1 class="title">Hello world!</h1> </body> </html> bit.ly/website-la 12
  • 13. HTML tags, elements, attributes 13
  • 14. HTML, by itself, is boring 14
  • 15. CSS - (Cascading Style Sheets) h1 { color: blue; } Value Property Selector bit.ly/website-la 15
  • 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/ 17
  • 18. Margin, border, and padding 18
  • 19. Margin, border, and padding 19
  • 20. Real developers use Google... a lot 20
  • 21. Assignments for tonight Go to: http://bit.ly/tf-html-classroom 21
  • 22. Ways to keep learning 22
  • 23. For aspiring developers... Source: Bureau of Labor Statistics 23
  • 24. 92%92%job-placement rate in tech roles + job guarantee Link for the third party audit jobs report: https://www.thinkful.com/outcomeshttps://www.thinkful.com/outcomes Thinkful's track record of getting students jobs 24
  • 25. Our students receive unprecedented support 1-on-1 Learning Mentor 1-on-1 Career MentorProgram Manager San Diego Community You 25
  • 26. 1-on-1 mentorship enables flexible learning Learn anywhere, anytime, and at your own schedule You don't have to quit your job to start career transition 26
  • 27. Thinkful Two-Week Trial Talk to one of us and email benjy@thinkful.combenjy@thinkful.com to learn more Two-week course with 4 mentor sessions for $50 ($750 value) Start with HTML, CSS and JavaScript Option to continue with full bootcamp Financing & scholarships available Offer valid for one week after eventOffer valid for one week after event BenjyBenjy SchechnerSchechner Education Advisor 27