SlideShare a Scribd company logo
Frontend Crash Course
Intro to HTML/CSS
March 2017
http://bit.ly/tf-html-css-dc
WiFi - In3-Guest
About me
• Tyler Brewer

• Web Developer @ Excella
Consulting

• Thinkful Alumni

• Former Graphic Designer
About us
Thinkful prepares students for web development & data
science jobs with 1-on-1 mentorship programs
About you - ‘round the room
• What’s your name?
• What’s your programming background?
• What’s your goal?
Goals
• Core concepts of HTML/CSS to build websites
• Drills to practice those concepts
• Build your first website
• Get more comfortable learning to code
• Take home challenges
How the web works
Type a URL from a client (e.g. google.com)
Browser communicates with DNS server to
find IP address
Browser sends an HTTP request asking
for specific files
Browser receives those files and renders
them as a website
Clients / Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manage what app does
How it relates to what we’re doing
When we write HTML & CSS today, we are creating
those files that are stored on a server which are then
sent and then rendered by your browser
Setup
http://bit.ly/tf-html-classroom
Normally to write our code we’d use a text editor or an
integrated development environment (IDE)
But since we’re learning we’re going to write our code
in a website to skip the setup, see our results
immediately, and make it easy for us to track progress
Let’s start with HTML
HTML is the content and structure of a webpage
It’s the skeleton of your website
By itself, HTML is ugly
We’ll make it pretty later
We will start with just HTML — we’ll then add a
Cascading Style Sheet (CSS) file to “style” our
website. More on that later…
Your first website
Copy this code (don’t worry if you don’t understand it)
<html>
<body>
<h1>Hello world!</h1>
</body>
</html>
Key HTML concepts
• Tags
• Elements
• Attributes
HTML tags
Every tag starts with a “less than” sign and ends with a
“greater than” sign
<html> #this is an HTML opening tag
<body> #this is a body opening tag
<h1>Hello world!</h1> #this is set of
H1 tags
</body> #this is a body closing tag
</html> #this is an HTML closing tag
More about tags
• There are opening tags and closing tags — closing tags
have a backslash before the tag name (</html> versus
<html>)
• Tags instruct a browser about the structure of our
website
• There are hundreds of built-in tags though you’ll use
the same few a lot
Non-exhaustive list of HTML tags
• <html> #html tags wrap your entire page
• <head> #head tags holds info about the page
• <body> #body tags wrap around your content
• <h1> #signifies the largest headline (through h6)
• <p> #wraps a paragraph of writing
• <div> #div tags are generic container tags
• <a> #anchor tags for text to be a link
• <ul><li> #unordered list of items
• <button> #this is a button
HTML elements
HTML elements usually consist of an opening tag,
closing tag, and some content
<html> #html element starts here
<body> #body element starts here
<h1>Hello world!</h1> #this is an
HTML element
</body> #body element ends here
</html> #html element ends here
More about elements
Some consist of just a self-closing tag
<img src=“http://i.imgur.com/Th5404r.jpg">
A note about <div>’s
We use <div> tags to separate sections of our site. This
will allow for sophisticated styling. It’s a good habit to
“wrap” most sections into a <div>
<div>
<h1>Hello world!</h1>
</div>
HTML attributes
HTML attributes set properties on an element — the are
attached in the opening tag
<a href=“https://somewhere.com">This is a
link</a>
href is an attribute that sets the destination of a link
<h1 class=“headline”>This is a headline</h1>
class is one attribute that identifies element (for CSS &
Javascript)
HTML Challenges
Complete the following assignments on
http://bit.ly/tf-html-classroom
• About me
• Images
• Links
What is CSS?
Cascading Style Sheets (CSS) interact with your HTML
to determine the visual presentation of your webpages
CSS example
p {
color: red;
font-size: 36px;
}
CSS solves two problems
• Visual presentation of each element
• Layout of elements
Key CSS concepts
• Selectors
• Property
• Value
• Declaration / Declaration Block
CSS selectors
• Determine HTML elements to target for styles
• Can target tags, classes, id’s and many more!
• Selectors can be combined
Example selectors
p (selects all paragraph tags)
.name (selects HTML elements with class “name”)
p.name (selects paragraph tags with class “name”)
CSS properties
Determines aspect of an element’s appearance to change
• color (set the font color)
• font-family (sets main and backup typefaces)
• background-image (sets background image)
• height (sets the height of an element)
More on CSS properties
• Each property has a default value — when you write
CSS, you override that default with a new value
• There are lots of CSS properties! For a full list see
http://www.htmldog.com/references/css/properties/
CSS values
Determines the aspect of the element’s appearance we
wish to change
• color: red, blue, green, #CCCCCC
acceptable values for the color property
• font-family: helvetica, arial, sans-serif
acceptable values for the font-family property
• background-image: url(“imageFile.jpg")
looks for a URL value for image file
• height: 40px, 50%
set in pixels or percentage of container height
Declarations and declaration blocks
This is a declaration block containing two declarations
p {
color: red;
font-size: 36px;
}
CSS challenges
Complete the following assignments on
http://bit.ly/tf-html-classroom
• Selectors
• Classes
Linking CSS to HTML
• Normally you’d have one HTML file for each webpage
(for example, home.html and profile.html), and a single
CSS file for the whole website’s styles (styles.css)
• To link your stylesheet to your HTML, you’d insert the
following line into the <head> section of your HTML
webpage
• <link rel="stylesheet" type="text/css"
href="theme.css">
Learning to learn
• Google is your friend!
• Practice at the edge of your abilities
• Ignore the hot new thing. Instead go deep with one
technology
Ways to keep learningLevelofsupport
Learning methods
1-on-1 mentorship enables flexibility
325+ mentors with an average of 10
years of experience in the field
Support ‘round the clock
Our results
Job Titles after GraduationMonths until Employed
Try us out!
• Initial 2-week trial
includes six mentor
sessions for $50
• Learn HTML/CSS and
JavaScript
• Option to continue
onto web
development
bootcamp
• Talk to me (or email
tj@thinkful.com) if
you’re interested

More Related Content

What's hot (20)

PDF
Intro to HTML + CSS
Jamal Sinclair O'Garro
 
PPTX
uptu web technology unit 2 Css
Abhishek Kesharwani
 
PDF
Introduction to HTML and CSS
Mario Hernandez
 
PDF
CSS Frameworks
Mike Crabb
 
PDF
An Intro to HTML & CSS
Shay Howe
 
PPTX
Design for Developers: Introduction to Bootstrap 3
John Bertucci
 
PPTX
Html5
Mohammed Qasem
 
PPT
Html & CSS - Best practices 2-hour-workshop
Vero Rebagliatte
 
PPTX
uptu web technology unit 2 Css
Abhishek Kesharwani
 
PPTX
Introduction to HTML and CSS
danpaquette
 
PDF
Modular HTML, CSS, & JS Workshop
Shay Howe
 
PDF
Html for beginners
Florian Letsch
 
PPTX
Web development basics
Kalluri Vinay Reddy
 
PPTX
HTML 5 Fundamental
Lanh Le
 
PPTX
How the Web Works Using HTML
Marlon Jamera
 
KEY
Artdm171 Week4 Tags
Gilbert Guerrero
 
PDF
Responsive Web Design (April 18th, Los Angeles)
Thinkful
 
PPSX
Steph's Html5 and css presentation
stephy123123
 
Intro to HTML + CSS
Jamal Sinclair O'Garro
 
uptu web technology unit 2 Css
Abhishek Kesharwani
 
Introduction to HTML and CSS
Mario Hernandez
 
CSS Frameworks
Mike Crabb
 
An Intro to HTML & CSS
Shay Howe
 
Design for Developers: Introduction to Bootstrap 3
John Bertucci
 
Html & CSS - Best practices 2-hour-workshop
Vero Rebagliatte
 
uptu web technology unit 2 Css
Abhishek Kesharwani
 
Introduction to HTML and CSS
danpaquette
 
Modular HTML, CSS, & JS Workshop
Shay Howe
 
Html for beginners
Florian Letsch
 
Web development basics
Kalluri Vinay Reddy
 
HTML 5 Fundamental
Lanh Le
 
How the Web Works Using HTML
Marlon Jamera
 
Artdm171 Week4 Tags
Gilbert Guerrero
 
Responsive Web Design (April 18th, Los Angeles)
Thinkful
 
Steph's Html5 and css presentation
stephy123123
 

Similar to Thinkful - Frontend Crash Course - Intro to HTML/CSS (20)

PDF
Thinkful - HTML/CSS Crash Course (May 4 2017)
TJ Stalcup
 
PDF
HTML/CSS Crash Course (april 4 2017)
Daniel Friedman
 
PDF
Frontend Crash Course: HTML and CSS
Thinkful
 
PPTX
Workshop 2 Slides.pptx
DaniyalSardar
 
PDF
Web Design & Development - Session 2
Shahrzad Peyman
 
PDF
Fccwc326
Shannon Gallagher
 
PPTX
Rapid HTML Prototyping with Bootstrap 4
UXPA International
 
PDF
Code & Design Your First Website (Downtown Los Angeles)
Thinkful
 
PPT
HTML & CSS.ppt
vaseemshaik21
 
ODP
Light introduction to HTML
abidibo Contini
 
PPTX
2 INTRO TO HTML.pptx
CHEYSERCHARRESEGATCH1
 
PPTX
gdg Introduction to HTML-CSS-Javascript.pptx
saurabh45tiwari
 
PPTX
Introduction to HTML-CSS-Javascript.pptx
deepak37877
 
DOCX
Lesson A.1 - Introduction to Web Development.docx
MarlonMagtibay3
 
PPTX
wd project.pptx
dsffsdf1
 
PPTX
Web Information Systems Html and css
Artificial Intelligence Institute at UofSC
 
PPTX
Introduction to Web Development.pptx
GDSCVJTI
 
PPTX
Introduction to Web Development.pptx
Alisha Kamat
 
PPTX
Introduction to Web Development.pptx
Alisha Kamat
 
PPTX
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Thinkful - HTML/CSS Crash Course (May 4 2017)
TJ Stalcup
 
HTML/CSS Crash Course (april 4 2017)
Daniel Friedman
 
Frontend Crash Course: HTML and CSS
Thinkful
 
Workshop 2 Slides.pptx
DaniyalSardar
 
Web Design & Development - Session 2
Shahrzad Peyman
 
Rapid HTML Prototyping with Bootstrap 4
UXPA International
 
Code & Design Your First Website (Downtown Los Angeles)
Thinkful
 
HTML & CSS.ppt
vaseemshaik21
 
Light introduction to HTML
abidibo Contini
 
2 INTRO TO HTML.pptx
CHEYSERCHARRESEGATCH1
 
gdg Introduction to HTML-CSS-Javascript.pptx
saurabh45tiwari
 
Introduction to HTML-CSS-Javascript.pptx
deepak37877
 
Lesson A.1 - Introduction to Web Development.docx
MarlonMagtibay3
 
wd project.pptx
dsffsdf1
 
Web Information Systems Html and css
Artificial Intelligence Institute at UofSC
 
Introduction to Web Development.pptx
GDSCVJTI
 
Introduction to Web Development.pptx
Alisha Kamat
 
Introduction to Web Development.pptx
Alisha Kamat
 
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Ad

More from TJ Stalcup (20)

PDF
Intro to JavaScript - Thinkful DC
TJ Stalcup
 
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
Build Your Own Website - Intro to HTML & CSS
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
Build a Game with Javascript
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
 
Intro to JavaScript - Thinkful DC
TJ Stalcup
 
Frontend Crash Course
TJ Stalcup
 
Intro to Python for Data Science
TJ Stalcup
 
Intro to Python for Data Science
TJ Stalcup
 
Build Your Own Website - Intro to HTML & CSS
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
 
Build a Game with Javascript
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
 
Ad

Recently uploaded (20)

PDF
Enhancing Environmental Monitoring with Real-Time Data Integration: Leveragin...
Safe Software
 
PDF
Database Benchmarking for Performance Masterclass: Session 2 - Data Modeling ...
ScyllaDB
 
PDF
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
PDF
Database Benchmarking for Performance Masterclass: Session 1 - Benchmarking F...
ScyllaDB
 
PDF
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
PDF
Plugging AI into everything: Model Context Protocol Simplified.pdf
Abati Adewale
 
PPTX
Simplifica la seguridad en la nube y la detección de amenazas con FortiCNAPP
Cristian Garcia G.
 
PDF
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
DOCX
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
PDF
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Pitch ...
Michele Kryston
 
PDF
The Growing Value and Application of FME & GenAI
Safe Software
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
PDF
Unlocking FME Flow’s Potential: Architecture Design for Modern Enterprises
Safe Software
 
PPTX
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
PDF
My Journey from CAD to BIM: A True Underdog Story
Safe Software
 
PPTX
𝙳𝚘𝚠𝚗𝚕𝚘𝚊𝚍—Wondershare Filmora Crack 14.0.7 + Key Download 2025
sebastian aliya
 
PDF
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Enhancing Environmental Monitoring with Real-Time Data Integration: Leveragin...
Safe Software
 
Database Benchmarking for Performance Masterclass: Session 2 - Data Modeling ...
ScyllaDB
 
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
Database Benchmarking for Performance Masterclass: Session 1 - Benchmarking F...
ScyllaDB
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
Plugging AI into everything: Model Context Protocol Simplified.pdf
Abati Adewale
 
Simplifica la seguridad en la nube y la detección de amenazas con FortiCNAPP
Cristian Garcia G.
 
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Pitch ...
Michele Kryston
 
The Growing Value and Application of FME & GenAI
Safe Software
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
Unlocking FME Flow’s Potential: Architecture Design for Modern Enterprises
Safe Software
 
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
My Journey from CAD to BIM: A True Underdog Story
Safe Software
 
𝙳𝚘𝚠𝚗𝚕𝚘𝚊𝚍—Wondershare Filmora Crack 14.0.7 + Key Download 2025
sebastian aliya
 
The Future of Product Management in AI ERA.pdf
Alyona Owens
 

Thinkful - Frontend Crash Course - Intro to HTML/CSS

  • 1. Frontend Crash Course Intro to HTML/CSS March 2017 http://bit.ly/tf-html-css-dc WiFi - In3-Guest
  • 2. About me • Tyler Brewer
 • Web Developer @ Excella Consulting
 • Thinkful Alumni
 • Former Graphic Designer
  • 3. About us Thinkful prepares students for web development & data science jobs with 1-on-1 mentorship programs
  • 4. About you - ‘round the room • What’s your name? • What’s your programming background? • What’s your goal?
  • 5. Goals • Core concepts of HTML/CSS to build websites • Drills to practice those concepts • Build your first website • Get more comfortable learning to code • Take home challenges
  • 6. How the web works Type a URL from a client (e.g. google.com) Browser communicates with DNS server to find IP address Browser sends an HTTP request asking for specific files Browser receives those files and renders them as a website
  • 7. Clients / Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manage what app does
  • 8. How it relates to what we’re doing When we write HTML & CSS today, we are creating those files that are stored on a server which are then sent and then rendered by your browser
  • 9. Setup http://bit.ly/tf-html-classroom Normally to write our code we’d use a text editor or an integrated development environment (IDE) But since we’re learning we’re going to write our code in a website to skip the setup, see our results immediately, and make it easy for us to track progress
  • 10. Let’s start with HTML HTML is the content and structure of a webpage It’s the skeleton of your website
  • 11. By itself, HTML is ugly
  • 12. We’ll make it pretty later We will start with just HTML — we’ll then add a Cascading Style Sheet (CSS) file to “style” our website. More on that later…
  • 13. Your first website Copy this code (don’t worry if you don’t understand it) <html> <body> <h1>Hello world!</h1> </body> </html>
  • 14. Key HTML concepts • Tags • Elements • Attributes
  • 15. HTML tags Every tag starts with a “less than” sign and ends with a “greater than” sign <html> #this is an HTML opening tag <body> #this is a body opening tag <h1>Hello world!</h1> #this is set of H1 tags </body> #this is a body closing tag </html> #this is an HTML closing tag
  • 16. More about tags • There are opening tags and closing tags — closing tags have a backslash before the tag name (</html> versus <html>) • Tags instruct a browser about the structure of our website • There are hundreds of built-in tags though you’ll use the same few a lot
  • 17. Non-exhaustive list of HTML tags • <html> #html tags wrap your entire page • <head> #head tags holds info about the page • <body> #body tags wrap around your content • <h1> #signifies the largest headline (through h6) • <p> #wraps a paragraph of writing • <div> #div tags are generic container tags • <a> #anchor tags for text to be a link • <ul><li> #unordered list of items • <button> #this is a button
  • 18. HTML elements HTML elements usually consist of an opening tag, closing tag, and some content <html> #html element starts here <body> #body element starts here <h1>Hello world!</h1> #this is an HTML element </body> #body element ends here </html> #html element ends here
  • 19. More about elements Some consist of just a self-closing tag <img src=“http://i.imgur.com/Th5404r.jpg">
  • 20. A note about <div>’s We use <div> tags to separate sections of our site. This will allow for sophisticated styling. It’s a good habit to “wrap” most sections into a <div> <div> <h1>Hello world!</h1> </div>
  • 21. HTML attributes HTML attributes set properties on an element — the are attached in the opening tag <a href=“https://somewhere.com">This is a link</a> href is an attribute that sets the destination of a link <h1 class=“headline”>This is a headline</h1> class is one attribute that identifies element (for CSS & Javascript)
  • 22. HTML Challenges Complete the following assignments on http://bit.ly/tf-html-classroom • About me • Images • Links
  • 23. What is CSS? Cascading Style Sheets (CSS) interact with your HTML to determine the visual presentation of your webpages
  • 24. CSS example p { color: red; font-size: 36px; }
  • 25. CSS solves two problems • Visual presentation of each element • Layout of elements
  • 26. Key CSS concepts • Selectors • Property • Value • Declaration / Declaration Block
  • 27. CSS selectors • Determine HTML elements to target for styles • Can target tags, classes, id’s and many more! • Selectors can be combined
  • 28. Example selectors p (selects all paragraph tags) .name (selects HTML elements with class “name”) p.name (selects paragraph tags with class “name”)
  • 29. CSS properties Determines aspect of an element’s appearance to change • color (set the font color) • font-family (sets main and backup typefaces) • background-image (sets background image) • height (sets the height of an element)
  • 30. More on CSS properties • Each property has a default value — when you write CSS, you override that default with a new value • There are lots of CSS properties! For a full list see http://www.htmldog.com/references/css/properties/
  • 31. CSS values Determines the aspect of the element’s appearance we wish to change • color: red, blue, green, #CCCCCC acceptable values for the color property • font-family: helvetica, arial, sans-serif acceptable values for the font-family property • background-image: url(“imageFile.jpg") looks for a URL value for image file • height: 40px, 50% set in pixels or percentage of container height
  • 32. Declarations and declaration blocks This is a declaration block containing two declarations p { color: red; font-size: 36px; }
  • 33. CSS challenges Complete the following assignments on http://bit.ly/tf-html-classroom • Selectors • Classes
  • 34. Linking CSS to HTML • Normally you’d have one HTML file for each webpage (for example, home.html and profile.html), and a single CSS file for the whole website’s styles (styles.css) • To link your stylesheet to your HTML, you’d insert the following line into the <head> section of your HTML webpage • <link rel="stylesheet" type="text/css" href="theme.css">
  • 35. Learning to learn • Google is your friend! • Practice at the edge of your abilities • Ignore the hot new thing. Instead go deep with one technology
  • 36. Ways to keep learningLevelofsupport Learning methods
  • 37. 1-on-1 mentorship enables flexibility 325+ mentors with an average of 10 years of experience in the field
  • 39. Our results Job Titles after GraduationMonths until Employed
  • 40. Try us out! • Initial 2-week trial includes six mentor sessions for $50 • Learn HTML/CSS and JavaScript • Option to continue onto web development bootcamp • Talk to me (or email tj@thinkful.com) if you’re interested