Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Community Codes: Intro to HTML/CSS
Search
Taylor Christensen
August 08, 2017
Programming
0
45
Community Codes: Intro to HTML/CSS
Slides for presentation/workshop at Community Codes meetup in San Marcos, Texas. (Aug 2017)
Taylor Christensen
August 08, 2017
Tweet
Share
More Decks by Taylor Christensen
See All by Taylor Christensen
WordCamp Austin: Google Webmaster Tools
taylortrc
1
190
Other Decks in Programming
See All in Programming
Fragment Composition of GraphQL
quramy
13
1.6k
Deep Dive into React Stream/Serialize
mugi_uno
3
760
Open standards for building event-driven applications in the cloud
meteatamel
0
190
SIMD Parallel Programming with the Vector API
josepaumard
0
240
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
12
4.2k
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
350
AppRouter Panel Talk
yosuke_furukawa
PRO
1
500
Going beyond Apache Parquet's default settings
xhochy
0
140
Folding Cheat Sheet #4
philipschwarz
PRO
0
100
GitHub Copilotのススメ
marcy731
1
240
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
480
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
880
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
We Have a Design System, Now What?
morganepeng
43
6.8k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
The Language of Interfaces
destraynor
151
23k
Building Applications with DynamoDB
mza
88
5.6k
Building Your Own Lightsaber
phodgson
100
5.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Transcript
Intro to HTML/CSS @communitycodes /communitycodes Taylor Christensen @taylortrc
Thanks to our sponsor! @SplashCoWork /SplashCowork
Introductions • Name • Tech Background (if any) • What
do you hope to learn? (tonight, this year, future)
Where do we start? • Browser (HTML, CSS, JS) •
Server (Java, Ruby, ASP, PHP, C+, JS Frameworks…) • Database (SQL, Mongo)
HTML • “markup language for creating Web pages” • “structure
of Web pages” • “building blocks” html head body doctype title meta header footer aside article nav logo h1 p p nav h3 p container
HTML Elements • <html> • <head> • <body> • <h1…h6>
• <p> • <img> • <a>
HTML Tagging <tagname>content, copy, media here…</tagname> <p>My first paragraph here!</p>
<title>My first website</title>
HTML Attributes • href • title • size • style
<a href=“index.html”>Link here!</a> <img src=“logo.png” alt=“Logo”> <p title=“Hover text here”> This is a paragraph. </p>
CSS Styles • color • font-size • font-family • background
<a href=“index.html” style=“color:red;”>Link here!</a> <p style=“font-size:14pt;”>Hi!</p> <p style=“background:blue;”> This is a paragraph. </p>
CSS Location <p style=“font-size:14pt;”>Hi!</p> Inline <style> p { font-size:14pt; }
</style> Internal External <link rel=“stylesheet” type=“text/css” href=“style.css”>
CSS Positioning From W3Schools - https://www.w3schools.com/css/css_boxmodel.asp
<div> + Classes “The <div> element is often used as
a container for other HTML elements.” <div style=“color:red;”>Content</div> <div class=“main-section”> <p>Paragraph content here.</p> </div> <style> .main-section p { font-size: 16px; } </style>
Advanced Elements • Form • Script • Aside (sidebar) •
Figure • Nav • Time • Progress • Video / Audio • Geolocation
Examples (demo)
Resource: References
Resource: References
Resource: References
Resource: References
Resource: References
Resource: References
Resource: Inspect Element
Resource: Code Editor • Notepad (PC) • TextEdit (Mac) •
Atom • Sublime
Resource: Validators • W3Schools Style Guide • HTML Validator •
CSS Validator W3Schools Style Guide (www.w3schools.com/html/html5_syntax.asp) W3C Markup Validators (validator.w3.org)
Resource: Server • Hosting • FTP • CodePen