Community Codes: Intro to HTML/CSS

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: 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

Community Codes: Intro to HTML/CSS

Community Codes: Intro to HTML/CSS

Taylor Christensen

More Decks by Taylor Christensen

Other Decks in Programming

Featured

Transcript

Intro to HTML/CSS @communitycodes /communitycodes Taylor Christensen @taylortrc

Thanks to our sponsor! @SplashCoWork /SplashCowork

Introductions • Name • Tech Background (if any) • What

Where do we start? • Browser (HTML, CSS, JS) •

HTML • “markup language for creating Web pages” • “structure

HTML Elements • <html> • <head> • <body> • <h1…h6>

HTML Tagging <tagname>content, copy, media here…</tagname> <p>My first paragraph here!</p>

HTML Attributes • href • title • size • style

CSS Styles • color • font-size • font-family • background

CSS Location <p style=“font-size:14pt;”>Hi!</p> Inline <style> p { font-size:14pt; }

CSS Positioning From W3Schools - https://www.w3schools.com/css/css_boxmodel.asp

<div> + Classes “The <div> element is often used as

Advanced Elements • Form • Script • Aside (sidebar) •

Examples (demo)

Resource: References

Resource: References

Resource: References

Resource: References

Resource: References

Resource: References

Resource: Inspect Element

Resource: Code Editor • Notepad (PC) • TextEdit (Mac) •

Resource: Validators • W3Schools Style Guide • HTML Validator •

Resource: Server • Hosting • FTP • CodePen