SlideShare a Scribd company logo
HTML/CSS Crash Course:
Build Your Own Website
March 2018
WIFI: CrossCamp.us Members
Password: innovate
bit.ly/website-labit.ly/website-la
Interactive Slides: bit.ly/website-la-slidesInteractive Slides: bit.ly/website-la-slides
1
Instructor
Walter Guevara
Thinkful Web Dev Mentor
CTO & Co-founder @ Renly
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la
Justin Ezor - TA
Thinkful LA Community Manager
Web Developer
Co-founder @ Hacker Fund
2
About you
What's your name?
What brought you here today?
What is your programming experience?
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 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: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 4
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: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 5
This is what we're making
View example here
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 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: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 7
HTML - Hypertext Markup Language
<h1 class="intro">Hi there!</h1>
AttributeOpening tag
h1 element
Closing tag
bit.ly/website-la
Content
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website 8Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la
HTML
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 9
CSS - Cascading Style Sheets
h1 {
color: blue;
}
Value
Property
Selector
bit.ly/website-la
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none
10http://bit.ly/website-la
CSS selectors, properties, values
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 11
Margin, border, and padding
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 12
Margin, border, and padding
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 13
Real developers use Google... a lot
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 14
Glitch setup & first steps!
http://bit.ly/build-website-starter
Wi-Fi: Digital Ignition
Pass: Countdown54321 bit.ly/build-own-website
Wi-Fi: CrossCamp.usEvents
Pass: none http://bit.ly/website-la 15
Ways to keep learning
More Structure
Less Structure
More SupportLess Support
16
325+ mentors325+ mentors with an average of
10 years of experience10 years of experience in the
field
17
Support 'round the clock
Your Mentor
Q&A Sessions
Career Coach
In-person Workshops
Slack
Program Manager
YouYou
18
Our results
92%92%job-placement rate + job guarantee
Kaeside IwuagwuKaeside Iwuagwu
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-https://www.thinkful.com/bootcamp-jobs-
statsstats
Frontend Developer
Sierra GreggSierra Gregg
Software Engineer
JP EarnestJP Earnest
Web Developer
19
Thinkful's free resource
Talk to one of us and email justin.ezor@thinkful.comjustin.ezor@thinkful.com to learn more
Web Development Fundamentals
Covers HTML, CSS and JavaScript
Unlimited mentor-led Q&A sessions
Personal Program Manager to help you
set goals and navigate resources
Student Slack Channel
bit.ly/web-free-la
20

More Related Content

What's hot

Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30
Thinkful
 
website la 11/28
website la 11/28website la 11/28
website la 11/28
Thinkful
 
Build a Web App with JavaScript/jQuery Feb 2018
Build a Web App with JavaScript/jQuery Feb 2018Build a Web App with JavaScript/jQuery Feb 2018
Build a Web App with JavaScript/jQuery Feb 2018
Thinkful
 
Build Your Own Website - Intro to HTML & CSS
Build Your Own Website - Intro to HTML & CSSBuild Your Own Website - Intro to HTML & CSS
Build Your Own Website - Intro to HTML & CSS
TJ Stalcup
 
Build your Own Website with HTML/CSS
Build your Own Website with HTML/CSSBuild your Own Website with HTML/CSS
Build your Own Website with HTML/CSS
Aaron Lamphere
 
Build Your Own Website with HTML/CSS - July - LA
Build Your Own Website with HTML/CSS - July - LABuild Your Own Website with HTML/CSS - July - LA
Build Your Own Website with HTML/CSS - July - LA
Thinkful
 
Intro to js august 31
Intro to js august 31Intro to js august 31
Intro to js august 31
Thinkful
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
Aaron Lamphere
 
BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
Thinkful
 
SPS Calgary 2019 - What if your intranet was a simple bot?
SPS Calgary 2019 - What if your intranet was a simple bot?SPS Calgary 2019 - What if your intranet was a simple bot?
SPS Calgary 2019 - What if your intranet was a simple bot?
Nicolas Georgeault
 
first website la
first website lafirst website la
first website la
Thinkful
 
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
 
Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
Thinkful
 
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
 
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
 
Build a Game with JavaScript - Pasadena July
Build a Game with JavaScript - Pasadena JulyBuild a Game with JavaScript - Pasadena July
Build a Game with JavaScript - Pasadena July
Thinkful
 
Inbound Marketing and Automation
Inbound Marketing and AutomationInbound Marketing and Automation
Inbound Marketing and Automation
Mickey Mellen
 
Rather thin supporting slides for BMT207 lecture
Rather thin supporting slides for BMT207 lectureRather thin supporting slides for BMT207 lecture
Rather thin supporting slides for BMT207 lecture
Miles Metcalfe
 
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
 

What's hot (20)

Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-30
 
website la 11/28
website la 11/28website la 11/28
website la 11/28
 
Build a Web App with JavaScript/jQuery Feb 2018
Build a Web App with JavaScript/jQuery Feb 2018Build a Web App with JavaScript/jQuery Feb 2018
Build a Web App with JavaScript/jQuery Feb 2018
 
Build Your Own Website - Intro to HTML & CSS
Build Your Own Website - Intro to HTML & CSSBuild Your Own Website - Intro to HTML & CSS
Build Your Own Website - Intro to HTML & CSS
 
Build your Own Website with HTML/CSS
Build your Own Website with HTML/CSSBuild your Own Website with HTML/CSS
Build your Own Website with HTML/CSS
 
Build Your Own Website with HTML/CSS - July - LA
Build Your Own Website with HTML/CSS - July - LABuild Your Own Website with HTML/CSS - July - LA
Build Your Own Website with HTML/CSS - July - LA
 
Intro to js august 31
Intro to js august 31Intro to js august 31
Intro to js august 31
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
 
BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
 
SPS Calgary 2019 - What if your intranet was a simple bot?
SPS Calgary 2019 - What if your intranet was a simple bot?SPS Calgary 2019 - What if your intranet was a simple bot?
SPS Calgary 2019 - What if your intranet was a simple bot?
 
first website la
first website lafirst website la
first website la
 
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
 
Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
 
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
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
 
Build a Game with JavaScript - Pasadena July
Build a Game with JavaScript - Pasadena JulyBuild a Game with JavaScript - Pasadena July
Build a Game with JavaScript - Pasadena July
 
Inbound Marketing and Automation
Inbound Marketing and AutomationInbound Marketing and Automation
Inbound Marketing and Automation
 
Rather thin supporting slides for BMT207 lecture
Rather thin supporting slides for BMT207 lectureRather thin supporting slides for BMT207 lecture
Rather thin supporting slides for BMT207 lecture
 
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
 

Similar to html/CSS crash course correct free course link

Thinkful build a website (html, css)
Thinkful build a website (html, css)Thinkful build a website (html, css)
Thinkful build a website (html, css)
Thinkful
 
Build Own Website
Build Own WebsiteBuild Own Website
Build Own Website
Ivy Rueb
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
Aaron Lamphere
 
Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15
Thinkful
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
TJ Stalcup
 
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
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
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 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
 
Intro to js september 19
Intro to js september 19Intro to js september 19
Intro to js september 19
Thinkful
 
Build Your Own Website (Santa Monica, CA 06/20)
Build Your Own Website (Santa Monica, CA 06/20)Build Your Own Website (Santa Monica, CA 06/20)
Build Your Own Website (Santa Monica, CA 06/20)
Thinkful
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
Aaron Lamphere
 
Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28
Ivy Rueb
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming Language
Thinkful
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
Thinkful
 

Similar to html/CSS crash course correct free course link (16)

Thinkful build a website (html, css)
Thinkful build a website (html, css)Thinkful build a website (html, css)
Thinkful build a website (html, css)
 
Build Own Website
Build Own WebsiteBuild Own Website
Build Own Website
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15Build Your Own Website with HTML/CSS 8.15
Build Your Own Website with HTML/CSS 8.15
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
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
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSS
 
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
 
Frontend Crash Course
Frontend Crash CourseFrontend Crash Course
Frontend Crash Course
 
Intro to js september 19
Intro to js september 19Intro to js september 19
Intro to js september 19
 
Build Your Own Website (Santa Monica, CA 06/20)
Build Your Own Website (Santa Monica, CA 06/20)Build Your Own Website (Santa Monica, CA 06/20)
Build Your Own Website (Santa Monica, CA 06/20)
 
Build your own Website
Build your own WebsiteBuild your own Website
Build your own Website
 
Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming Language
 
Build Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSSBuild Your Own Website with HTML/CSS
Build Your Own Website with HTML/CSS
 

More from Justin Ezor

Deck 6-456 (1)
Deck 6-456 (1)Deck 6-456 (1)
Deck 6-456 (1)
Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454
Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Justin Ezor
 
Deck 4-361-414-444
Deck 4-361-414-444Deck 4-361-414-444
Deck 4-361-414-444
Justin Ezor
 
Deck 6-130-441
Deck 6-130-441Deck 6-130-441
Deck 6-130-441
Justin Ezor
 
Deck 6-80-140-196-213-271-321-364-438 (2)
Deck 6-80-140-196-213-271-321-364-438 (2)Deck 6-80-140-196-213-271-321-364-438 (2)
Deck 6-80-140-196-213-271-321-364-438 (2)
Justin Ezor
 
Deck 6-80-140-196-213-271-321-364-438 (1)
Deck 6-80-140-196-213-271-321-364-438 (1)Deck 6-80-140-196-213-271-321-364-438 (1)
Deck 6-80-140-196-213-271-321-364-438 (1)
Justin Ezor
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78-171-219-304-310-388 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78-171-219-304-310-388 (1)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78-171-219-304-310-388 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78-171-219-304-310-388 (1)
Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)
Justin Ezor
 
Deck 4-361-414-420
Deck 4-361-414-420Deck 4-361-414-420
Deck 4-361-414-420
Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417
Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Justin Ezor
 
Deck 6-80-140-196-213-271-321-364-413
Deck 6-80-140-196-213-271-321-364-413Deck 6-80-140-196-213-271-321-364-413
Deck 6-80-140-196-213-271-321-364-413
Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Justin Ezor
 
Intro to JavaScript: FUNdamentals (3/7/18)
Intro to JavaScript: FUNdamentals (3/7/18)Intro to JavaScript: FUNdamentals (3/7/18)
Intro to JavaScript: FUNdamentals (3/7/18)
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
 

More from Justin Ezor (20)

Deck 6-456 (1)
Deck 6-456 (1)Deck 6-456 (1)
Deck 6-456 (1)
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-454
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-52-74-451
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
 
Deck 4-361-414-444
Deck 4-361-414-444Deck 4-361-414-444
Deck 4-361-414-444
 
Deck 6-130-441
Deck 6-130-441Deck 6-130-441
Deck 6-130-441
 
Deck 6-80-140-196-213-271-321-364-438 (2)
Deck 6-80-140-196-213-271-321-364-438 (2)Deck 6-80-140-196-213-271-321-364-438 (2)
Deck 6-80-140-196-213-271-321-364-438 (2)
 
Deck 6-80-140-196-213-271-321-364-438 (1)
Deck 6-80-140-196-213-271-321-364-438 (1)Deck 6-80-140-196-213-271-321-364-438 (1)
Deck 6-80-140-196-213-271-321-364-438 (1)
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78-171-219-304-310-388 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78-171-219-304-310-388 (1)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78-171-219-304-310-388 (1)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78-171-219-304-310-388 (1)
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-9-431 (1)
 
Deck 4-361-414-420
Deck 4-361-414-420Deck 4-361-414-420
Deck 4-361-414-420
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408 (1)
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
 
Deck 6-80-140-196-213-271-321-364-413
Deck 6-80-140-196-213-271-321-364-413Deck 6-80-140-196-213-271-321-364-413
Deck 6-80-140-196-213-271-321-364-413
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
 
Intro to JavaScript: FUNdamentals (3/7/18)
Intro to JavaScript: FUNdamentals (3/7/18)Intro to JavaScript: FUNdamentals (3/7/18)
Intro to JavaScript: FUNdamentals (3/7/18)
 
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
 

Recently uploaded

Francesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptxFrancesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptx
EduSkills OECD
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
RaedMohamed3
 
678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf
CarlosHernanMontoyab2
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
vaibhavrinwa19
 
Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345
beazzy04
 
Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
Jisc
 
Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
DeeptiGupta154
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
Jheel Barad
 
Honest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptxHonest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptx
timhan337
 
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
EugeneSaldivar
 
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
Nguyen Thanh Tu Collection
 
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdfAdversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Po-Chuan Chen
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
Tamralipta Mahavidyalaya
 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
siemaillard
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
SACHIN R KONDAGURI
 
Chapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptxChapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptx
Mohd Adib Abd Muin, Senior Lecturer at Universiti Utara Malaysia
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
EverAndrsGuerraGuerr
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
camakaiclarkmusic
 
How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...
Jisc
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
Jisc
 

Recently uploaded (20)

Francesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptxFrancesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptx
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
 
678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
 
Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345
 
Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
 
Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
 
Honest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptxHonest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptx
 
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
 
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
 
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdfAdversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
 
Chapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptxChapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptx
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
 
How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
 

html/CSS crash course correct free course link

  • 1. HTML/CSS Crash Course: Build Your Own Website March 2018 WIFI: CrossCamp.us Members Password: innovate bit.ly/website-labit.ly/website-la Interactive Slides: bit.ly/website-la-slidesInteractive Slides: bit.ly/website-la-slides 1
  • 2. Instructor Walter Guevara Thinkful Web Dev Mentor CTO & Co-founder @ Renly Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la Justin Ezor - TA Thinkful LA Community Manager Web Developer Co-founder @ Hacker Fund 2
  • 3. About you What's your name? What brought you here today? What is your programming experience? Wi-Fi: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la 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: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la 4
  • 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: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la 5
  • 6. This is what we're making View example here Wi-Fi: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la 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: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la 7
  • 8. HTML - Hypertext Markup Language <h1 class="intro">Hi there!</h1> AttributeOpening tag h1 element Closing tag bit.ly/website-la Content Wi-Fi: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website 8Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la
  • 9. HTML Wi-Fi: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la 9
  • 10. CSS - Cascading Style Sheets h1 { color: blue; } Value Property Selector bit.ly/website-la Wi-Fi: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website Wi-Fi: CrossCamp.usEvents Pass: none 10http://bit.ly/website-la
  • 11. CSS selectors, properties, values Wi-Fi: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la 11
  • 12. Margin, border, and padding Wi-Fi: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la 12
  • 13. Margin, border, and padding Wi-Fi: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la 13
  • 14. Real developers use Google... a lot Wi-Fi: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la 14
  • 15. Glitch setup & first steps! http://bit.ly/build-website-starter Wi-Fi: Digital Ignition Pass: Countdown54321 bit.ly/build-own-website Wi-Fi: CrossCamp.usEvents Pass: none http://bit.ly/website-la 15
  • 16. Ways to keep learning More Structure Less Structure More SupportLess Support 16
  • 17. 325+ mentors325+ mentors with an average of 10 years of experience10 years of experience in the field 17
  • 18. Support 'round the clock Your Mentor Q&A Sessions Career Coach In-person Workshops Slack Program Manager YouYou 18
  • 19. Our results 92%92%job-placement rate + job guarantee Kaeside IwuagwuKaeside Iwuagwu Link for the third party audit jobs report: https://www.thinkful.com/bootcamp-jobs-https://www.thinkful.com/bootcamp-jobs- statsstats Frontend Developer Sierra GreggSierra Gregg Software Engineer JP EarnestJP Earnest Web Developer 19
  • 20. Thinkful's free resource Talk to one of us and email justin.ezor@thinkful.comjustin.ezor@thinkful.com to learn more Web Development Fundamentals Covers HTML, CSS and JavaScript Unlimited mentor-led Q&A sessions Personal Program Manager to help you set goals and navigate resources Student Slack Channel bit.ly/web-free-la 20