SlideShare a Scribd company logo
Build Your Own WebsiteBuild Your Own Website
2F & 2G
April 2018
http://bit.ly/build-website-html-csshttp://bit.ly/build-website-html-css
WiFi: MakeOf ces 5Ghz
Password: Internet!23
1
Instructor
TJ Stalcup
Lead DC Mentor @Thinkful
SE Lead @540
Pokemon Master
TAs
bit.ly/build-website-html-css
2
About you
What's your name? 
What brought you here today?
What is your programming experience?
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-cssWi-Fi: In3-Guest
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
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.
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-css
Wi-Fi: In3-Guest
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
4
Take advantage of support
Don't treat this as a drill, we're making something real
Don't get discouraged, struggle leads to mastery
Don't be shy, take full advantage of our support
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-cssWi-Fi: In3-Guest
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
5
This is what we're making
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-css
Wi-Fi: In3-Guest bit.ly/build-website-html-css
bit.ly/build-website-html-css
tf-website-livehttp://bit.ly/
6
Agenda
Learn key HTML and CSS concepts (30 min)
Go over starter code (10 min)
Build your site with our support! (30 min)
Steps to continue learning (10 min)
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
7
Real developers use Google... a lot
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
8
HTML - Hypertext Markup Language
<h1 class="intro">Hi there!</h1>
AttributeOpening tag
h1 element
Closing tagContent
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-css
9
bit.ly/build-website-html-css
HTML
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
10
First steps!
http://bit.ly/tf-website-start
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
11
CSS - Cascading Style Sheets
h1 {
color: blue;
}
Value
Property
Selector
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
12
CSS selectors, properties, values
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
13
Margin, border, and padding
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
14
Margin, border, and padding
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
15
Continue with CSS ...
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
16
Complete Website
17
Solution
Wi-Fi: MakeOf ces 5GHz
Pass: Internet!23
 
bit.ly/build-website-html-cssbit.ly/build-website-html-css
18
Ad

More Related Content

What's hot (20)

Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
Aaron Lamphere
 
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
 
first website la
first website lafirst website la
first website la
Thinkful
 
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 your own website - LA 2-13-18
Build your own website - LA 2-13-18Build your own website - LA 2-13-18
Build your own website - LA 2-13-18
Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Justin Ezor
 
Build your own website - LA 3-20-18
Build your own website - LA 3-20-18Build your own website - LA 3-20-18
Build your own website - LA 3-20-18
Justin Ezor
 
Smooth website projects from start to finish
Smooth website projects from start to finishSmooth website projects from start to finish
Smooth website projects from start to finish
Mickey Mellen
 
Build Own Website
Build Own WebsiteBuild Own Website
Build Own Website
Ivy Rueb
 
Inbound Marketing and Automation
Inbound Marketing and AutomationInbound Marketing and Automation
Inbound Marketing and Automation
Mickey Mellen
 
Intro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DCIntro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DC
TJ Stalcup
 
Build Your Own Website with HTML/CSS - July 17 - LA
Build Your Own Website with HTML/CSS - July 17 - LABuild Your Own Website with HTML/CSS - July 17 - LA
Build Your Own Website with HTML/CSS - July 17 - LA
Thinkful
 
Byoweb8:30 sd
Byoweb8:30 sdByoweb8:30 sd
Byoweb8:30 sd
Thinkful
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Aaron Lamphere
 
Build a Game with Javascript
Build a Game with JavascriptBuild a Game with Javascript
Build a Game with Javascript
TJ Stalcup
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Justin Ezor
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
Jj Jurgens
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
Aaron Lamphere
 
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
 
first website la
first website lafirst website la
first website la
Thinkful
 
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 your own website - LA 2-13-18
Build your own website - LA 2-13-18Build your own website - LA 2-13-18
Build your own website - LA 2-13-18
Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Justin Ezor
 
Build your own website - LA 3-20-18
Build your own website - LA 3-20-18Build your own website - LA 3-20-18
Build your own website - LA 3-20-18
Justin Ezor
 
Smooth website projects from start to finish
Smooth website projects from start to finishSmooth website projects from start to finish
Smooth website projects from start to finish
Mickey Mellen
 
Build Own Website
Build Own WebsiteBuild Own Website
Build Own Website
Ivy Rueb
 
Inbound Marketing and Automation
Inbound Marketing and AutomationInbound Marketing and Automation
Inbound Marketing and Automation
Mickey Mellen
 
Intro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DCIntro to JavaScript - Thinkful DC
Intro to JavaScript - Thinkful DC
TJ Stalcup
 
Build Your Own Website with HTML/CSS - July 17 - LA
Build Your Own Website with HTML/CSS - July 17 - LABuild Your Own Website with HTML/CSS - July 17 - LA
Build Your Own Website with HTML/CSS - July 17 - LA
Thinkful
 
Byoweb8:30 sd
Byoweb8:30 sdByoweb8:30 sd
Byoweb8:30 sd
Thinkful
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Aaron Lamphere
 
Build a Game with Javascript
Build a Game with JavascriptBuild a Game with Javascript
Build a Game with Javascript
TJ Stalcup
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Justin Ezor
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
Jj Jurgens
 

Similar to Build Your Own Website - Intro to HTML & CSS (19)

BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
Thinkful
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
TJ Stalcup
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
Aaron Lamphere
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
Thinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSSThinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
TJ Stalcup
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
Aaron Lamphere
 
Batbwjs117
Batbwjs117Batbwjs117
Batbwjs117
Thinkful
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
TJ Stalcup
 
Batbwjs27
Batbwjs27Batbwjs27
Batbwjs27
Shannon Gallagher
 
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
 
Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScript
Ivy Rueb
 
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
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37
Thinkful
 
Intro to js august 31
Intro to js august 31Intro to js august 31
Intro to js august 31
Thinkful
 
Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScript
Ivy Rueb
 
Batbwjs14
Batbwjs14Batbwjs14
Batbwjs14
Thinkful
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
Aaron Lamphere
 
BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
Thinkful
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
TJ Stalcup
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
Aaron Lamphere
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
Thinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSSThinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
TJ Stalcup
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
Aaron Lamphere
 
Batbwjs117
Batbwjs117Batbwjs117
Batbwjs117
Thinkful
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
TJ Stalcup
 
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
 
Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScript
Ivy Rueb
 
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
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-37
Thinkful
 
Intro to js august 31
Intro to js august 31Intro to js august 31
Intro to js august 31
Thinkful
 
Intro To JavaScript
Intro To JavaScriptIntro To JavaScript
Intro To JavaScript
Ivy Rueb
 
Batbwjs14
Batbwjs14Batbwjs14
Batbwjs14
Thinkful
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
Aaron Lamphere
 
Ad

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
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
 
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
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScript
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 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 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
 
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
 
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
 
Thinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScriptThinkful DC - Intro to JavaScript
Thinkful DC - Intro to JavaScript
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 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 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
 
Ad

Recently uploaded (20)

Big Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur MorganBig Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur Morgan
Arthur Morgan
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...
Vishnu Singh Chundawat
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
Generative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in BusinessGenerative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in Business
Dr. Tathagat Varma
 
Quantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur MorganQuantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur Morgan
Arthur Morgan
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
HCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser EnvironmentsHCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser Environments
panagenda
 
Drupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy ConsumptionDrupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy Consumption
Exove
 
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
organizerofv
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptx2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptx
Samuele Fogagnolo
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
Big Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur MorganBig Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur Morgan
Arthur Morgan
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...
Vishnu Singh Chundawat
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
Generative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in BusinessGenerative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in Business
Dr. Tathagat Varma
 
Quantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur MorganQuantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur Morgan
Arthur Morgan
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
HCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser EnvironmentsHCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser Environments
panagenda
 
Drupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy ConsumptionDrupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy Consumption
Exove
 
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
organizerofv
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptx2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptx
Samuele Fogagnolo
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 

Build Your Own Website - Intro to HTML & CSS

  • 1. Build Your Own WebsiteBuild Your Own Website 2F & 2G April 2018 http://bit.ly/build-website-html-csshttp://bit.ly/build-website-html-css WiFi: MakeOf ces 5Ghz Password: Internet!23 1
  • 2. Instructor TJ Stalcup Lead DC Mentor @Thinkful SE Lead @540 Pokemon Master TAs bit.ly/build-website-html-css 2
  • 3. About you What's your name?  What brought you here today? What is your programming experience? Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-cssWi-Fi: In3-Guest   bit.ly/build-website-html-cssbit.ly/build-website-html-css 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. Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-css Wi-Fi: In3-Guest   bit.ly/build-website-html-cssbit.ly/build-website-html-css 4
  • 5. Take advantage of support Don't treat this as a drill, we're making something real Don't get discouraged, struggle leads to mastery Don't be shy, take full advantage of our support Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-cssWi-Fi: In3-Guest   bit.ly/build-website-html-cssbit.ly/build-website-html-css 5
  • 6. This is what we're making Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-css Wi-Fi: In3-Guest bit.ly/build-website-html-css bit.ly/build-website-html-css tf-website-livehttp://bit.ly/ 6
  • 7. Agenda Learn key HTML and CSS concepts (30 min) Go over starter code (10 min) Build your site with our support! (30 min) Steps to continue learning (10 min) Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-cssbit.ly/build-website-html-css 7
  • 8. Real developers use Google... a lot Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-cssbit.ly/build-website-html-css 8
  • 9. HTML - Hypertext Markup Language <h1 class="intro">Hi there!</h1> AttributeOpening tag h1 element Closing tagContent Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-css 9 bit.ly/build-website-html-css
  • 10. HTML Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-cssbit.ly/build-website-html-css 10
  • 11. First steps! http://bit.ly/tf-website-start Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-cssbit.ly/build-website-html-css 11
  • 12. CSS - Cascading Style Sheets h1 { color: blue; } Value Property Selector Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-cssbit.ly/build-website-html-css 12
  • 13. CSS selectors, properties, values Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-cssbit.ly/build-website-html-css 13
  • 14. Margin, border, and padding Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-cssbit.ly/build-website-html-css 14
  • 15. Margin, border, and padding Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-cssbit.ly/build-website-html-css 15
  • 16. Continue with CSS ... Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-cssbit.ly/build-website-html-css 16
  • 18. Solution Wi-Fi: MakeOf ces 5GHz Pass: Internet!23   bit.ly/build-website-html-cssbit.ly/build-website-html-css 18