SlideShare a Scribd company logo
Frontend Crash Course
March 2018
Network: Deskhub-main
Password: stake2017!
http://bit.ly/fe-crash-sd
1
Instructor
Jasmine Kim
Quality Assurance Engineer | Full
Stack Web Developer
Bootcamp Grad
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 speciļ¬c ļ¬les
Browser receives those ļ¬les 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 ļ¬les
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 ļ¬les
Application LogicApplication LogicInitial requestInitial request
Following responseFollowing response
We'll be writing
these ļ¬les 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
HTML, CSS and JavaScript
Unlimited mentor-led group sessions
Personal Program Manager
Special Workshop Events
bit.ly/tfsd-wdbit.ly/tfsd-wd
Free Two Week TrialFree Two Week Trial
23

More Related Content

What's hot

Top 8 Tools To Optimize Your Work Day!
Top 8 Tools To Optimize Your Work Day!Top 8 Tools To Optimize Your Work Day!
Top 8 Tools To Optimize Your Work Day!
Manny Sarmiento
Ā 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Mohammad Tahsin Alshalabi
Ā 
Lesson 01
Lesson 01Lesson 01
Lesson 01Gene Babon
Ā 
UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012impulsedev
Ā 
A Beginner's Guide To Web Design
A Beginner's Guide To Web DesignA Beginner's Guide To Web Design
A Beginner's Guide To Web Design
Ais Technolabs
Ā 
Lesson 01
Lesson 01Lesson 01
Lesson 01
Gene Babon
Ā 
New text document
New text documentNew text document
New text document
Aline Aguiar
Ā 
Gaining (and Not Betraying) User Trust in WordPress eCommerce
Gaining (and Not Betraying) User Trust in WordPress eCommerceGaining (and Not Betraying) User Trust in WordPress eCommerce
Gaining (and Not Betraying) User Trust in WordPress eCommerce
Andrew Wikel
Ā 
WooCommerce snippets
WooCommerce snippetsWooCommerce snippets
WooCommerce snippets
Rodolfo Melogli
Ā 
Php workshop L0 Introduction
Php workshop L0 IntroductionPhp workshop L0 Introduction
Php workshop L0 Introduction
Mohammad Tahsin Alshalabi
Ā 
Html tags
Html tagsHtml tags
Html tagsKumar
Ā 
Master WooCommerce Troubleshooting
Master WooCommerce TroubleshootingMaster WooCommerce Troubleshooting
Master WooCommerce Troubleshooting
Rodolfo Melogli
Ā 
Speedup with seo
Speedup with seoSpeedup with seo
Speedup with seo
Ashok Ragu
Ā 
Magento SEO
Magento SEOMagento SEO
Magento SEO
Joost de Valk
Ā 
WooCommerce: How to Customize WordPress via PHP Snippets
WooCommerce: How to Customize WordPress via PHP SnippetsWooCommerce: How to Customize WordPress via PHP Snippets
WooCommerce: How to Customize WordPress via PHP Snippets
Rodolfo Melogli
Ā 
Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event,...
Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event,...Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event,...
Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event,...
Martin Leyrer
Ā 
1 training intro
1 training intro1 training intro
1 training intro
Sayed Ahmed
Ā 
Jaleel Ahmad Portfolio
Jaleel Ahmad PortfolioJaleel Ahmad Portfolio
Jaleel Ahmad Portfolio
Jaleel Ahmad
Ā 

What's hot (20)

Top 8 Tools To Optimize Your Work Day!
Top 8 Tools To Optimize Your Work Day!Top 8 Tools To Optimize Your Work Day!
Top 8 Tools To Optimize Your Work Day!
Ā 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Ā 
Tf ffccjs
Tf ffccjsTf ffccjs
Tf ffccjs
Ā 
Lesson 01
Lesson 01Lesson 01
Lesson 01
Ā 
UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012
Ā 
A Beginner's Guide To Web Design
A Beginner's Guide To Web DesignA Beginner's Guide To Web Design
A Beginner's Guide To Web Design
Ā 
Lesson 01
Lesson 01Lesson 01
Lesson 01
Ā 
New text document
New text documentNew text document
New text document
Ā 
Gaining (and Not Betraying) User Trust in WordPress eCommerce
Gaining (and Not Betraying) User Trust in WordPress eCommerceGaining (and Not Betraying) User Trust in WordPress eCommerce
Gaining (and Not Betraying) User Trust in WordPress eCommerce
Ā 
WooCommerce snippets
WooCommerce snippetsWooCommerce snippets
WooCommerce snippets
Ā 
Php workshop L0 Introduction
Php workshop L0 IntroductionPhp workshop L0 Introduction
Php workshop L0 Introduction
Ā 
Html tags
Html tagsHtml tags
Html tags
Ā 
Master WooCommerce Troubleshooting
Master WooCommerce TroubleshootingMaster WooCommerce Troubleshooting
Master WooCommerce Troubleshooting
Ā 
Speedup with seo
Speedup with seoSpeedup with seo
Speedup with seo
Ā 
BUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITEBUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITE
Ā 
Magento SEO
Magento SEOMagento SEO
Magento SEO
Ā 
WooCommerce: How to Customize WordPress via PHP Snippets
WooCommerce: How to Customize WordPress via PHP SnippetsWooCommerce: How to Customize WordPress via PHP Snippets
WooCommerce: How to Customize WordPress via PHP Snippets
Ā 
Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event,...
Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event,...Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event,...
Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event,...
Ā 
1 training intro
1 training intro1 training intro
1 training intro
Ā 
Jaleel Ahmad Portfolio
Jaleel Ahmad PortfolioJaleel Ahmad Portfolio
Jaleel Ahmad Portfolio
Ā 

Similar to Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)

Fecc cg-cb-11.14.17
Fecc cg-cb-11.14.17 Fecc cg-cb-11.14.17
Fecc cg-cb-11.14.17
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
Ā 
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: Fundamentals(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals
Thinkful
Ā 
Fecc 12517-sd
Fecc 12517-sdFecc 12517-sd
Fecc 12517-sd
Thinkful
Ā 
Itjs124
Itjs124Itjs124
Itjs124
Thinkful
Ā 
Ffcc1120
Ffcc1120Ffcc1120
Ffcc1120
Thinkful
Ā 
Itjs111
Itjs111Itjs111
Itjs111
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
Ā 
Introjs2.13.18sd
Introjs2.13.18sdIntrojs2.13.18sd
Introjs2.13.18sd
Jordan Zurowski
Ā 
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
Ā 
Introjs1.9.18tf
Introjs1.9.18tfIntrojs1.9.18tf
Introjs1.9.18tf
Thinkful
Ā 
Front End Lecture 1.pptx
Front End Lecture 1.pptxFront End Lecture 1.pptx
Front End Lecture 1.pptx
malise2997
Ā 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB
Ā 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB
Ā 
Php mysql-training online-by_php2ranjan
Php mysql-training online-by_php2ranjanPhp mysql-training online-by_php2ranjan
Php mysql-training online-by_php2ranjan
php2ranjan
Ā 
php training in hyderabad
php training in hyderabadphp training in hyderabad
php training in hyderabad
php2ranjan
Ā 
Fcc1219
Fcc1219Fcc1219
Fcc1219
Thinkful
Ā 

Similar to Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4) (20)

Fecc cg-cb-11.14.17
Fecc cg-cb-11.14.17 Fecc cg-cb-11.14.17
Fecc cg-cb-11.14.17
Ā 
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
Ā 
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: Fundamentals(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals
Ā 
Fcchc424
Fcchc424Fcchc424
Fcchc424
Ā 
Fecc 12517-sd
Fecc 12517-sdFecc 12517-sd
Fecc 12517-sd
Ā 
Itjs124
Itjs124Itjs124
Itjs124
Ā 
Ffcc1120
Ffcc1120Ffcc1120
Ffcc1120
Ā 
Fcchc326
Fcchc326Fcchc326
Fcchc326
Ā 
Itjs111
Itjs111Itjs111
Itjs111
Ā 
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
Ā 
Introjs2.13.18sd
Introjs2.13.18sdIntrojs2.13.18sd
Introjs2.13.18sd
Ā 
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
Ā 
Introjs1.9.18tf
Introjs1.9.18tfIntrojs1.9.18tf
Introjs1.9.18tf
Ā 
Front End Lecture 1.pptx
Front End Lecture 1.pptxFront End Lecture 1.pptx
Front End Lecture 1.pptx
Ā 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
Ā 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
Ā 
Php mysql-training online-by_php2ranjan
Php mysql-training online-by_php2ranjanPhp mysql-training online-by_php2ranjan
Php mysql-training online-by_php2ranjan
Ā 
php training in hyderabad
php training in hyderabadphp training in hyderabad
php training in hyderabad
Ā 
Fcc1219
Fcc1219Fcc1219
Fcc1219
Ā 

More from Jordan Zurowski

Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Jordan Zurowski
Ā 
Virtual pet4.12.18sd
Virtual pet4.12.18sdVirtual pet4.12.18sd
Virtual pet4.12.18sd
Jordan Zurowski
Ā 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
Jordan Zurowski
Ā 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
Jordan Zurowski
Ā 
Intro js3.22.18
Intro js3.22.18Intro js3.22.18
Intro js3.22.18
Jordan Zurowski
Ā 
Jsgame 3.1.18-sd
Jsgame 3.1.18-sdJsgame 3.1.18-sd
Jsgame 3.1.18-sd
Jordan Zurowski
Ā 
How to choose a programming language 2.20.18 sd
How to choose a programming language   2.20.18 sdHow to choose a programming language   2.20.18 sd
How to choose a programming language 2.20.18 sd
Jordan Zurowski
Ā 
Gttech2.8.18
Gttech2.8.18Gttech2.8.18
Gttech2.8.18
Jordan Zurowski
Ā 

More from Jordan Zurowski (8)

Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Ā 
Virtual pet4.12.18sd
Virtual pet4.12.18sdVirtual pet4.12.18sd
Virtual pet4.12.18sd
Ā 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
Ā 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
Ā 
Intro js3.22.18
Intro js3.22.18Intro js3.22.18
Intro js3.22.18
Ā 
Jsgame 3.1.18-sd
Jsgame 3.1.18-sdJsgame 3.1.18-sd
Jsgame 3.1.18-sd
Ā 
How to choose a programming language 2.20.18 sd
How to choose a programming language   2.20.18 sdHow to choose a programming language   2.20.18 sd
How to choose a programming language 2.20.18 sd
Ā 
Gttech2.8.18
Gttech2.8.18Gttech2.8.18
Gttech2.8.18
Ā 

Recently uploaded

Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
Ā 
Dev Dives: Train smarter, not harder ā€“ active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder ā€“ active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder ā€“ active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder ā€“ active learning and UiPath LLMs for do...
UiPathCommunity
Ā 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
Ā 
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
Ā 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
Ā 
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
Ā 
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
Ā 
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
Ā 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
Ā 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
Ā 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
Ā 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
Ā 
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
Ā 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
Ā 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
Ā 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
Ā 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
Ā 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
Ā 
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
Ā 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
Ā 

Recently uploaded (20)

Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
Ā 
Dev Dives: Train smarter, not harder ā€“ active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder ā€“ active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder ā€“ active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder ā€“ active learning and UiPath LLMs for do...
Ā 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
Ā 
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...
Ā 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Ā 
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...
Ā 
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...
Ā 
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...
Ā 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Ā 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Ā 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Ā 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
Ā 
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...
Ā 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Ā 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Ā 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
Ā 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
Ā 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Ā 
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*
Ā 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Ā 

Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)

  • 1. Frontend Crash Course March 2018 Network: Deskhub-main Password: stake2017! http://bit.ly/fe-crash-sd 1
  • 2. Instructor Jasmine Kim Quality Assurance Engineer | Full Stack Web Developer Bootcamp Grad TAs 2
  • 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 speciļ¬c ļ¬les Browser receives those ļ¬les 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 ļ¬les 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 ļ¬les Application LogicApplication LogicInitial requestInitial request Following responseFollowing response We'll be writing these ļ¬les 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. HTML, CSS and JavaScript Unlimited mentor-led group sessions Personal Program Manager Special Workshop Events bit.ly/tfsd-wdbit.ly/tfsd-wd Free Two Week TrialFree Two Week Trial 23