SlideShare a Scribd company logo

Build your Own Website with HTML/CSS

A
Aaron Lamphere

This document outlines an agenda for a workshop on building a website using HTML and CSS. The workshop will be led by an instructor from Thinkful and include introductions, learning key concepts of HTML and CSS through presentations and examples, working on a starter code project with support from TAs, and suggestions for continuing to learn after the workshop. Attendees will learn how to structure HTML pages with elements like headings and paragraphs, style elements with CSS using properties, values, and selectors, and deploy their initial website project using Glitch.

Technology
1 of 20
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Build Your Own Website October 2017 WIFI: In3-Guest http://bit.ly/build-website-html-css 1
Instructor Brittany Walker Thinkful Alumni CSS Extraordinar TAs Wi-Fi: In3-Guest 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: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.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.These workshops are built using this approach. Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-cssWi-Fi: In3-Guest 4 bit.ly/build-website-html-css
Suggestions for learning Don't treat this as a drill, we're making something realwe're making something real 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 Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-cssWi-Fi: In3-Guest 5 bit.ly/build-website-html-css
This is what we're making View example here Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-css Wi-Fi: In3-Guest bit.ly/build-website-html- Wi-Fi: In3-Guest 6 bit.ly/build-website-html-css
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: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 7
HTML - Hypertext Markup Language <h1 class="intro">Hi there!</h1> AttributeOpening tag h1 element Closing tagContent Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-css 8Wi-Fi: In3-Guest bit.ly/build-website-html-css
HTML Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 9
CSS - Cascading Style Sheets h1 { color: blue; } Value Property Selector Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest 10 bit.ly/build-website-html-css
CSS selectors, properties, values Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 11
Margin, border, and padding Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 12
Margin, border, and padding Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 13
Real developers use Google... a lot Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 14
Glitch setup & first steps! http://bit.ly/build-website-starter Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 15
Ways to keep learning 16
For aspiring developers, bootcamps fill the gap Source: Bureau of Labor Statistics 17
Our students receive unprecedented support 1-on-1 Learning Mentor 1-on-1 Career MentorProgram Manager Los Angeles Community You 18
91%91% job-placement rate + job guarantee Link for the third party audit jobs report: https://www.thinkful.com/bootcamp-jobs-statshttps://www.thinkful.com/bootcamp-jobs-stats Thinkful's track record of getting students jobs 19
Thinkful Two-Week Trial Talk to one of us and email benjy@thinkful.combenjy@thinkful.com to learn more Two-week Free Course Trial Start with HTML, CSS and JavaScript Unlimited Q&A Sessions Option to continue with full bootcamp Financing & scholarships available Offer valid for one week after eventOffer valid for one week after event BenjyBenjy SchechnerSchechner Education Advisor 20

More Related Content

PDF
Build your own Website
Aaron Lamphere
 
PDF
Thinkful build a website (html, css)
Thinkful
 
PDF
Build your own Website
Aaron Lamphere
 
PDF
BYOWHC823
Thinkful
 
PDF
Build Your Own Website - Intro to HTML & CSS
TJ Stalcup
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30
Thinkful
 
PDF
website phx
Thinkful
 
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7(1)
Thinkful
 
Build your own Website
Aaron Lamphere
 
Thinkful build a website (html, css)
Thinkful
 
Build your own Website
Aaron Lamphere
 
BYOWHC823
Thinkful
 
Build Your Own Website - Intro to HTML & CSS
TJ Stalcup
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30
Thinkful
 
website phx
Thinkful
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7(1)
Thinkful
 

What's hot (20)

PDF
Build your own website - LA 2-13-18
Justin Ezor
 
PDF
Build Your Own Website with HTML/CSS - July - LA
Thinkful
 
PDF
Build Own Website
Ivy Rueb
 
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Justin Ezor
 
PDF
html/CSS Crash course w/ interactive slides link
Justin Ezor
 
PDF
html/CSS crash course correct free course link
Justin Ezor
 
PDF
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
PDF
Build Your Own Website with HTML/CSS
Thinkful
 
PDF
html/CSS Crash course
Justin Ezor
 
PDF
Intro to JavaScript
Aaron Lamphere
 
PDF
website la 11/28
Thinkful
 
PDF
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
PDF
Build a Game with Javascript
TJ Stalcup
 
PDF
Build Your Own Website with HTML/CSS - July 17 - LA
Thinkful
 
PDF
Frontend Crash Course
Aaron Lamphere
 
PDF
Build your own website - LA 3-20-18
Justin Ezor
 
PDF
Byoweb8:30 sd
Thinkful
 
PDF
Thinkful DC FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
PDF
Intro to Javascript
TJ Stalcup
 
PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Justin Ezor
 
Build your own website - LA 2-13-18
Justin Ezor
 
Build Your Own Website with HTML/CSS - July - LA
Thinkful
 
Build Own Website
Ivy Rueb
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-353-412-457
Justin Ezor
 
html/CSS Crash course w/ interactive slides link
Justin Ezor
 
html/CSS crash course correct free course link
Justin Ezor
 
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
Build Your Own Website with HTML/CSS
Thinkful
 
html/CSS Crash course
Justin Ezor
 
Intro to JavaScript
Aaron Lamphere
 
website la 11/28
Thinkful
 
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
Build a Game with Javascript
TJ Stalcup
 
Build Your Own Website with HTML/CSS - July 17 - LA
Thinkful
 
Frontend Crash Course
Aaron Lamphere
 
Build your own website - LA 3-20-18
Justin Ezor
 
Byoweb8:30 sd
Thinkful
 
Thinkful DC FrontEnd Crash Course - HTML & CSS
TJ Stalcup
 
Intro to Javascript
TJ Stalcup
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (1)
Justin Ezor
 
Ad

Similar to Build your Own Website with HTML/CSS (15)

PDF
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Justin Ezor
 
PDF
first website la
Thinkful
 
PDF
Build Your Own Website - Thinkful DC
TJ Stalcup
 
PDF
Labuildwebsiteseptember5
Thinkful
 
PDF
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
Ivy Rueb
 
PDF
Byowwhc126
Thinkful
 
PDF
Htmlcssphx1018
Thinkful
 
PDF
S dwebsite12.18.17
Thinkful
 
PDF
BYOWHC823
Thinkful
 
PDF
Byowphx97
Thinkful
 
PDF
Buildwebsite 12.18.17
Thinkful
 
PDF
Build Your Own Website with HTML/CSS
Thinkful
 
PPTX
Web development integrated with cybersecurity.
saivjadhav2003
 
PDF
Websitebuildsd10.16
Thinkful
 
PDF
Byowwhc26
Shannon Gallagher
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-405 (2)
Justin Ezor
 
first website la
Thinkful
 
Build Your Own Website - Thinkful DC
TJ Stalcup
 
Labuildwebsiteseptember5
Thinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
Ivy Rueb
 
Byowwhc126
Thinkful
 
Htmlcssphx1018
Thinkful
 
S dwebsite12.18.17
Thinkful
 
BYOWHC823
Thinkful
 
Byowphx97
Thinkful
 
Buildwebsite 12.18.17
Thinkful
 
Build Your Own Website with HTML/CSS
Thinkful
 
Web development integrated with cybersecurity.
saivjadhav2003
 
Websitebuildsd10.16
Thinkful
 
Byowwhc26
Shannon Gallagher
 
Ad

More from Aaron Lamphere (18)

PDF
Become a Data Analyst
Aaron Lamphere
 
PDF
Web Development or Data Science
Aaron Lamphere
 
PDF
Getting Started in Tech
Aaron Lamphere
 
PPTX
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Build a Game with Javascript
Aaron Lamphere
 
PDF
Intro to JavaScript
Aaron Lamphere
 
PDF
Frontend Crash Course
Aaron Lamphere
 
PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Intro to JavaScript
Aaron Lamphere
 
PDF
Intro to JavaScript
Aaron Lamphere
 
PDF
Frontend Crash Course
Aaron Lamphere
 
PDF
Frontend Crash Course
Aaron Lamphere
 
PDF
HTML/CSS Crash Course
Aaron Lamphere
 
PDF
Getting Started in Tech
Aaron Lamphere
 
PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
PDF
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Become a Data Analyst
Aaron Lamphere
 
Web Development or Data Science
Aaron Lamphere
 
Getting Started in Tech
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Build a Game with Javascript
Aaron Lamphere
 
Intro to JavaScript
Aaron Lamphere
 
Frontend Crash Course
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Intro to JavaScript
Aaron Lamphere
 
Intro to JavaScript
Aaron Lamphere
 
Frontend Crash Course
Aaron Lamphere
 
Frontend Crash Course
Aaron Lamphere
 
HTML/CSS Crash Course
Aaron Lamphere
 
Getting Started in Tech
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 
Build an App with JavaScript & jQuery
Aaron Lamphere
 

Recently uploaded (20)

PDF
A comparative analysis of optical character recognition models for extracting...
IAESIJAI
 
PDF
Assigned Numbers - 2025 - Bluetooth® Document
Bloombase
 
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PPTX
A Presentation on Artificial Intelligence
memembruh336
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PDF
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PPTX
Cloud computing and distributed systems.
kkkkkhan
 
PDF
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PPTX
Machine Learning_overview_presentation.pptx
kondavamsidharreddy2
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PDF
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
A comparative analysis of optical character recognition models for extracting...
IAESIJAI
 
Assigned Numbers - 2025 - Bluetooth® Document
Bloombase
 
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
Teaching material agriculture food technology
LiaRayya
 
A Presentation on Artificial Intelligence
memembruh336
 
Approach and Philosophy of On baking technology
30anthuong17
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
Cloud computing and distributed systems.
kkkkkhan
 
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
Machine Learning_overview_presentation.pptx
kondavamsidharreddy2
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 

Build your Own Website with HTML/CSS

  • 1. Build Your Own Website October 2017 WIFI: In3-Guest http://bit.ly/build-website-html-css 1
  • 2. Instructor Brittany Walker Thinkful Alumni CSS Extraordinar TAs Wi-Fi: In3-Guest 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: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.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.These workshops are built using this approach. Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-cssWi-Fi: In3-Guest 4 bit.ly/build-website-html-css
  • 5. Suggestions for learning Don't treat this as a drill, we're making something realwe're making something real 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 Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-cssWi-Fi: In3-Guest 5 bit.ly/build-website-html-css
  • 6. This is what we're making View example here Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-css Wi-Fi: In3-Guest bit.ly/build-website-html- Wi-Fi: In3-Guest 6 bit.ly/build-website-html-css
  • 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: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 7
  • 8. HTML - Hypertext Markup Language <h1 class="intro">Hi there!</h1> AttributeOpening tag h1 element Closing tagContent Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-css 8Wi-Fi: In3-Guest bit.ly/build-website-html-css
  • 9. HTML Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 9
  • 10. CSS - Cascading Style Sheets h1 { color: blue; } Value Property Selector Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest 10 bit.ly/build-website-html-css
  • 11. CSS selectors, properties, values Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 11
  • 12. Margin, border, and padding Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 12
  • 13. Margin, border, and padding Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 13
  • 14. Real developers use Google... a lot Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 14
  • 15. Glitch setup & first steps! http://bit.ly/build-website-starter Wi-Fi: MakeOffices 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css 15
  • 16. Ways to keep learning 16
  • 17. For aspiring developers, bootcamps fill the gap Source: Bureau of Labor Statistics 17
  • 18. Our students receive unprecedented support 1-on-1 Learning Mentor 1-on-1 Career MentorProgram Manager Los Angeles Community You 18
  • 19. 91%91% job-placement rate + job guarantee Link for the third party audit jobs report: https://www.thinkful.com/bootcamp-jobs-statshttps://www.thinkful.com/bootcamp-jobs-stats Thinkful's track record of getting students jobs 19
  • 20. Thinkful Two-Week Trial Talk to one of us and email [email protected]@thinkful.com to learn more Two-week Free Course Trial Start with HTML, CSS and JavaScript Unlimited Q&A Sessions Option to continue with full bootcamp Financing & scholarships available Offer valid for one week after eventOffer valid for one week after event BenjyBenjy SchechnerSchechner Education Advisor 20