Akira - GA - Intro-To-Coding-Html-Css

Intro to Coding
HTML & CSS

Instructor: Akira Wong
akira.wong@ga.co
@awongh
Editors:
https://gph.is/2JpUtP7
https://www.sublimetext.com/
Notepad (windows)
INTRO TO CODING 3
Learning Objectives
•Explain the purpose of HTML & CSS
•Develop a Basic Website using HTML & CSS
INTRO TO CODING
What is coding
INTRO TO CODING
precise instructions to the computer

INTRO TO CODING
always in order of
first to last, top to bottom, left to right
INTRO TO CODING
builds from simple to complex

INTRO TO CODING
Internet ≠ HTML Pages

INTRO TO CODING
INTRO TO CODING
INTRO TO CODING 11
Client vs. Server

INTRO TO CODING 12
What is a Web Client?

INTRO TO CODING
INTRO TO CODING
INTRO TO CODING 15
Front-end / Client-side Development
structure look dynamism

INTRO TO CODING
Hypertext Markup
Language (HTML)
Document tags
INTRO TO CODING 17
INTRO TO CODING 18
Basic Document Structure

<html> html
<head> head
Meta Data goes here title
</head>
body
<body>
Document Content goes here h1
</body>
</html> p
INTRO TO CODING 19
Headings
<h1>Most Important Title</h1>
<h2>Second Most Important</h2>
<h3>A Less Important Title</h3>
<h4>Even Less Important Title</h4>
<h5>No One Really Uses This Title</h5>
<h6>Title Too Deep, Time To Stop</h6>
INTRO TO CODING
Let’s add a header with the name

of our company:
<h1>Name</h1>
<h2>Some Tag Line</h2>
INTRO TO CODING 21
Text
<p>A paragraph of text</p>
<em>Stress this point</em>
<strong>Pay Attention Here</strong>
<hr>
<br>
INTRO TO CODING
Let’s add company info:
<p>Name: Doing things with stuff.</p>

INTRO TO CODING 23
Lists
<ol>
<li>1st item</li>
<li>2nd item</li>
</ol>
<ul>
<li>an item</li>
<li>another item</li>
</ul>
INTRO TO CODING
Let’s add a list of products and

prices.
<ul>
<li>Deluxe: $4569.99</li>
<li>Basic: $49.95</li>
</ul>
INTRO TO CODING 25
Images
<img src=“path/to/image.png” alt=“image desc”>
INTRO TO CODING
Let’s add a product illustration

image.
<img src=”banana.jpeg” />

INTRO TO CODING 27
Links
<a href=“path/to/page.html”>Internal Link</a>
<a href=“http://google.com”>External Link</a>
url goes here display text goes here

INTRO TO CODING
Let’s add a link to a sign-up page.

<a href=”http://www.google.com”>Sign Up</a>
INTRO TO CODING
Cascading
Stylesheets (CSS)
Element Styling
INTRO TO CODING 30
Linking To A Stylesheet
<html>
<head>
<link rel=”stylesheet” href=“styles.css”>
</head>
</html>
INTRO TO CODING 31
SELECTOR
body { DECLARATION
color: black;
} PROPERTY VALUE
INTRO TO CODING 32
Selectors: Type
body {
background-color: pink;
}
div {
color: black;
}
INTRO TO CODING 33
Text Properties
p{
color: pink;
font-size: 16px;
font-weight: 700;
font-family: Arial, sans-serif;
letter-spacing: 5px;
text-transform: uppercase;
}
INTRO TO CODING 34
Background Properties
header {
background-color: pink;
background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/funky-lines.png");
background-position: center;
background-size: cover;
}
INTRO TO CODING
Let’s add styling to our whole

document:
body{
background-color:red;
font-size:12px;
}
INTRO TO CODING
Hypertext Markup
Language (HTML)
Layout tags
INTRO TO CODING 37
Containers
<span>simple grouping</span>
<div>simple container</div>
<header>container for header content</header>

<nav>container for navigation links</nav>
<main>container for main content</main>
<article>Self standing content group</article>
<section>a section of content</section>
<footer>container for footer content</footer>
INTRO TO CODING
Let’s add containers around each

section of our page.
<div>
</div>
INTRO TO CODING
Cascading
Stylesheets (CSS)
Layout
INTRO TO CODING 40
Box Model
html
head
title
body
h1
p
INTRO TO CODING 41
Selectors: Class
<p>Normal text</p>
<p class=“special”>Special text</p>
<p class=“summary special”>Multiple classes</p>
.special {
font-weight: bold;
}
INTRO TO CODING 42
Padding & Margins

.sidebar {
padding-top: 10px;
padding-right: 20px;
}
Or swap padding with margin

INTRO TO CODING
Let’s add classes to each of our

sections.
Now we can style them.
INTRO TO CODING 44
Additional Reading
HTML and CSS Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference
INTRO TO CODING 45
Additional Reading
Make your website responsive with media queries
https://www.smashingmagazine.com/2010/07/how-to-use-css3-media
-queries-to-create-a-mobile-version-of-your-website/
Questions?

Akira - GA - Intro-To-Coding-Html-Css

Uploaded by

Akira - GA - Intro-To-Coding-Html-Css

Uploaded by

Intro to Coding

HTML & CSS

precise instructions to the computer

builds from simple to complex

Internet ≠ HTML Pages

Client vs. Server

What is a Web Client?

Front-end / Client-side Development

structure look dynamism

Basic Document Structure

Let’s add a header with the name

Let’s add company info:

<p>Name: Doing things with stuff.</p>

Let’s add a list of products and

Let’s add a product illustration

<img src=”banana.jpeg” />

<a href=“http://google.com”>External Link</a>

url goes here display text goes here

Let’s add a link to a sign-up page.

Let’s add styling to our whole

<header>container for header content</header>

Let’s add containers around each

Padding & Margins

Or swap padding with margin

Let’s add classes to each of our

You might also like