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
49
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
200
Other Decks in Programming
See All in Programming
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
250
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
260
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
380
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
670
Prolog入門
qnighy
4
1k
はじめてみよう量子プログラミング
itokoichi01
0
220
Rubyのobject_id
qnighy
6
1.3k
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
Code Reviewing Like a Champion
maltzj
517
39k
A Tale of Four Properties
chriscoyier
155
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
130
Unsuck your backbone
ammeep
667
57k
The Language of Interfaces
destraynor
153
23k
Clear Off the Table
cherdarchuk
91
320k
Rails Girls Zürich Keynote
gr2m
93
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Invisible Side of Design
smashingmag
296
50k
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