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

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
 

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
 
Ad

Recently uploaded (20)

PDF
Optimizing the trajectory of a wheel loader working in short loading cycles
Reno Filla
 
PDF
Proactive Server and System Monitoring with FME: Using HTTP and System Caller...
Safe Software
 
PDF
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
PDF
Kubernetes - Architecture & Components.pdf
geethak285
 
DOCX
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Pitch ...
Michele Kryston
 
PDF
Understanding The True Cost of DynamoDB Webinar
ScyllaDB
 
PDF
My Journey from CAD to BIM: A True Underdog Story
Safe Software
 
PDF
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
PDF
Dev Dives: Accelerating agentic automation with Autopilot for Everyone
UiPathCommunity
 
PDF
Bridging CAD, IBM TRIRIGA & GIS with FME: The Portland Public Schools Case
Safe Software
 
PDF
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
PDF
DoS Attack vs DDoS Attack_ The Silent Wars of the Internet.pdf
CyberPro Magazine
 
PDF
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
PDF
LLM Search Readiness Audit - Dentsu x SEO Square - June 2025.pdf
Nick Samuel
 
PDF
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
PPTX
01_Approach Cyber- DORA Incident Management.pptx
FinTech Belgium
 
PPSX
Usergroup - OutSystems Architecture.ppsx
Kurt Vandevelde
 
PDF
99 Bottles of Trust on the Wall — Operational Principles for Trust in Cyber C...
treyka
 
Optimizing the trajectory of a wheel loader working in short loading cycles
Reno Filla
 
Proactive Server and System Monitoring with FME: Using HTTP and System Caller...
Safe Software
 
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
Kubernetes - Architecture & Components.pdf
geethak285
 
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Pitch ...
Michele Kryston
 
Understanding The True Cost of DynamoDB Webinar
ScyllaDB
 
My Journey from CAD to BIM: A True Underdog Story
Safe Software
 
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Dev Dives: Accelerating agentic automation with Autopilot for Everyone
UiPathCommunity
 
Bridging CAD, IBM TRIRIGA & GIS with FME: The Portland Public Schools Case
Safe Software
 
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
DoS Attack vs DDoS Attack_ The Silent Wars of the Internet.pdf
CyberPro Magazine
 
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
LLM Search Readiness Audit - Dentsu x SEO Square - June 2025.pdf
Nick Samuel
 
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
01_Approach Cyber- DORA Incident Management.pptx
FinTech Belgium
 
Usergroup - OutSystems Architecture.ppsx
Kurt Vandevelde
 
99 Bottles of Trust on the Wall — Operational Principles for Trust in Cyber C...
treyka
 

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