SlideShare a Scribd company logo

Build Your Own Website - Intro to HTML & CSS

‱
T
TJ Stalcup

This document outlines the agenda and instructions for a workshop on building a website using HTML and CSS. The workshop will begin with introductions, an overview of Thinkful's teaching approach, and encouragement for participants to take advantage of support. Next, the agenda will cover key concepts of HTML and CSS through lecture and examples over 30 minutes each. Participants will then work on their own websites with instructor support for 30 minutes. The workshop concludes with steps for continuing learning after the session. WiFi network information and links to resources are provided throughout.

Technology
1 of 18
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

More Related Content

PDF
Thinkful build a website (html, css)
Thinkful
 
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7(1)
Thinkful
 
PDF
website phx
Thinkful
 
PDF
website la 11/28
Thinkful
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30
Thinkful
 
PDF
Build your Own Website with HTML/CSS
Aaron Lamphere
 
PDF
Build Your Own Website with HTML/CSS - July - LA
Thinkful
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Justin Ezor
 
Thinkful build a website (html, css)
Thinkful
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7(1)
Thinkful
 
website phx
Thinkful
 
website la 11/28
Thinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30
Thinkful
 
Build your Own Website with HTML/CSS
Aaron Lamphere
 
Build Your Own Website with HTML/CSS - July - LA
Thinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Justin Ezor
 

What's hot (20)

PDF
Build your own Website
Aaron Lamphere
 
PDF
html/CSS Crash course
Justin Ezor
 
PDF
html/CSS crash course correct free course link
Justin Ezor
 
PDF
html/CSS Crash course w/ interactive slides link
Justin Ezor
 
PDF
first website la
Thinkful
 
PDF
Build Your Own Website - Thinkful DC
TJ Stalcup
 
PDF
Build your own website - LA 2-13-18
Justin Ezor
 
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Justin Ezor
 
PDF
Build your own website - LA 3-20-18
Justin Ezor
 
PDF
Smooth website projects from start to finish
Mickey Mellen
 
PDF
Build Own Website
Ivy Rueb
 
PDF
Inbound Marketing and Automation
Mickey Mellen
 
PDF
Intro to JavaScript - Thinkful DC
TJ Stalcup
 
PDF
Build Your Own Website with HTML/CSS - July 17 - LA
Thinkful
 
PDF
Byoweb8:30 sd
Thinkful
 
PDF
Intro to JavaScript
Aaron Lamphere
 
PDF
Build a Game with Javascript
TJ Stalcup
 
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Justin Ezor
 
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Justin Ezor
 
PDF
How to Project-Manage and Implement a Responsive Website
Jj Jurgens
 
Build your own Website
Aaron Lamphere
 
html/CSS Crash course
Justin Ezor
 
html/CSS crash course correct free course link
Justin Ezor
 
html/CSS Crash course w/ interactive slides link
Justin Ezor
 
first website la
Thinkful
 
Build Your Own Website - Thinkful DC
TJ Stalcup
 
Build your own website - LA 2-13-18
Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Justin Ezor
 
Build your own website - LA 3-20-18
Justin Ezor
 
Smooth website projects from start to finish
Mickey Mellen
 
Build Own Website
Ivy Rueb
 
Inbound Marketing and Automation
Mickey Mellen
 
Intro to JavaScript - Thinkful DC
TJ Stalcup
 
Build Your Own Website with HTML/CSS - July 17 - LA
Thinkful
 
Byoweb8:30 sd
Thinkful
 
Intro to JavaScript
Aaron Lamphere
 
Build a Game with Javascript
TJ Stalcup
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Justin Ezor
 
How to Project-Manage and Implement a Responsive Website
Jj Jurgens
 
Ad

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

PDF
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
PDF
Build Your Own Website with HTML/CSS
Thinkful
 
PDF
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
PDF
Labuildwebsiteseptember5
Thinkful
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
Ivy Rueb
 
PDF
Buildwebsite 12.18.17
Thinkful
 
PDF
Websitebuildsd10.16
Thinkful
 
PDF
Build Your Own Website with HTML/CSS
Thinkful
 
PDF
Build your own Website
Aaron Lamphere
 
PDF
Websitesd1.15.17.
Thinkful
 
PDF
Build your own website July 2017 LA
Thinkful
 
PDF
BYOWHC823
Thinkful
 
PDF
S dwebsite12.18.17
Thinkful
 
PDF
Build Your Own Website with HTML/CSS
Thinkful
 
PDF
Byowphx97
Thinkful
 
PDF
Bwhtmlpdx0809
Thinkful
 
PDF
Tf bawa
Shannon Gallagher
 
PDF
Byowwhc126
Thinkful
 
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
Build Your Own Website with HTML/CSS
Thinkful
 
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
Labuildwebsiteseptember5
Thinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
Ivy Rueb
 
Buildwebsite 12.18.17
Thinkful
 
Websitebuildsd10.16
Thinkful
 
Build Your Own Website with HTML/CSS
Thinkful
 
Build your own Website
Aaron Lamphere
 
Websitesd1.15.17.
Thinkful
 
Build your own website July 2017 LA
Thinkful
 
BYOWHC823
Thinkful
 
S dwebsite12.18.17
Thinkful
 
Build Your Own Website with HTML/CSS
Thinkful
 
Byowphx97
Thinkful
 
Bwhtmlpdx0809
Thinkful
 
Tf bawa
Shannon Gallagher
 
Byowwhc126
Thinkful
 
Ad

More from TJ Stalcup (20)

PDF
Frontend Crash Course
TJ Stalcup
 
PDF
Intro to Python for Data Science
TJ Stalcup
 
PDF
Intro to Python for Data Science
TJ Stalcup
 
PDF
Intro to Python
TJ Stalcup
 
PDF
Intro to Python
TJ Stalcup
 
PDF
Predict the Oscars using Data Science
TJ Stalcup
 
PDF
Thinkful DC - Intro to JavaScript
TJ Stalcup
 
PDF
Data Science Your Vacation
TJ Stalcup
 
PDF
Data Science Your Vacation
TJ Stalcup
 
PDF
Thinkful DC FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
PDF
Build Your Own Instagram Filters
TJ Stalcup
 
PDF
Choosing a Programming Language
TJ Stalcup
 
PDF
Frontend Crash Course
TJ Stalcup
 
PDF
Thinkful FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
PDF
Thinkful FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
PDF
Build a Virtual Pet with JavaScript
TJ Stalcup
 
PDF
Intro to Javascript
TJ Stalcup
 
PDF
DC jQuery App
TJ Stalcup
 
PDF
Thinkful DC - Intro to JavaScript
TJ Stalcup
 
PDF
Thinkful DC - Building a Virtual Pet with JavaScript
TJ Stalcup
 
Frontend Crash Course
TJ Stalcup
 
Intro to Python for Data Science
TJ Stalcup
 
Intro to Python for Data Science
TJ Stalcup
 
Intro to Python
TJ Stalcup
 
Intro to Python
TJ Stalcup
 
Predict the Oscars using Data Science
TJ Stalcup
 
Thinkful DC - Intro to JavaScript
TJ Stalcup
 
Data Science Your Vacation
TJ Stalcup
 
Data Science Your Vacation
TJ Stalcup
 
Thinkful DC FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
Build Your Own Instagram Filters
TJ Stalcup
 
Choosing a Programming Language
TJ Stalcup
 
Frontend Crash Course
TJ Stalcup
 
Thinkful FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
Thinkful FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
Build a Virtual Pet with JavaScript
TJ Stalcup
 
Intro to Javascript
TJ Stalcup
 
DC jQuery App
TJ Stalcup
 
Thinkful DC - Intro to JavaScript
TJ Stalcup
 
Thinkful DC - Building a Virtual Pet with JavaScript
TJ Stalcup
 

Recently uploaded (20)

PDF
Doc9.....................................
SofiaCollazos
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
PPTX
IoT Sensor Integration 2025 Powering Smart Tech and Industrial Automation.pptx
Rejig Digital
 
PPTX
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...
Third Rock Techkno
 
PDF
Software Development Company | KodekX
KodekX
 
PDF
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
PDF
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
PPTX
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
PDF
How-Cloud-Computing-Impacts-Businesses-in-2025-and-Beyond.pdf
Artjoker Software Development Company
 
PDF
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
PDF
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Artjoker Software Development Company
 
PDF
Beyond Automation: The Role of IoT Sensor Integration in Next-Gen Industries
Rejig Digital
 
PDF
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
PDF
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
PDF
This slide provides an overview Technology
mineshkharadi333
 
PPTX
Comunidade Salesforce SĂŁo Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira JĂșnior
 
PDF
Advances in Ultra High Voltage (UHV) Transmission and Distribution Systems.pdf
Nabajyoti Banik
 
PPTX
Dev Dives: Automate, test, and deploy in one place—with Unified Developer Exp...
AndreeaTom
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
Doc9.....................................
SofiaCollazos
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
IoT Sensor Integration 2025 Powering Smart Tech and Industrial Automation.pptx
Rejig Digital
 
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...
Third Rock Techkno
 
Software Development Company | KodekX
KodekX
 
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
How-Cloud-Computing-Impacts-Businesses-in-2025-and-Beyond.pdf
Artjoker Software Development Company
 
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Artjoker Software Development Company
 
Beyond Automation: The Role of IoT Sensor Integration in Next-Gen Industries
Rejig Digital
 
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
This slide provides an overview Technology
mineshkharadi333
 
Comunidade Salesforce SĂŁo Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira JĂșnior
 
Advances in Ultra High Voltage (UHV) Transmission and Distribution Systems.pdf
Nabajyoti Banik
 
Dev Dives: Automate, test, and deploy in one place—with Unified Developer Exp...
AndreeaTom
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 

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