Geek Girl Tech Con Charlotte - Intro to HTML & CSS

HTML & CSS FOR BEGINNERS http://bit.ly/geekgirl-html

ERIC ALLEN @ALLENERICR @THISISSOCIAL

I BUILD THE INTERNET… …AND YOU CAN, TOO.

HYPER TEXT MARKUP LANGUAGE (HTML) HTML is a markup language
for describing web documents (web pages). - W3Schools

HTML5 HTML5 is the latest iteration of HTML. It brings
some new elements and some awesome new features like audio and video playback, better form inputs, and offline storage.

THE BUILDING BLOCKS OF THE INTERNET Everything you see on
the Internet is HTML being interpreted by your browser. If you right-click on a web page and click “View Source” you can see the HTML elements that make up that page.

CASCADING STYLE SHEETS (CSS) CSS defines how HTML elements are
to be displayed. - W3Schools

CSS3 CSS3 is the latest iteration of CSS. It brings
some new features like shadows, rounded corners, and animation.

MAKING THE INTERNET PRETTY CSS can make the HTML building
blocks look much better. (Or much worse! Wield its power carefully.) CSS gives you control over placement, size, typeface, color, spacing, and pretty much anything else that controls how things look.

HTML is your content CSS is the presentation of your
content

HTML ANATOMY HTML is composed of individual parts called elements.
Elements are denoted by HTML tags, which are written with angled brackets, like <p> which creates a paragraph. Elements can also have attributes and values

HTML ANATOMY EXAMPLES <a href=“http://www.google.com/“>Google</a> <img src=“http://placekitten.com/g/400/300” /> <ul> <li>Item
One</li> <li>Item Two</li> </ul>

Let’s head over to http://codepen.io and give those a try.
LET’S SEE WHAT THOSE TURN INTO

CSS ANATOMY CSS is composed of parts called rules. Rules
begin with a selector, which tells the browser what elements this rule will apply to. Rules contain at least one property and one value for that property. These property value pairs are called declarations.

CSS ANATOMY EXAMPLES a { text-decoration: none; color: #ccc; }
a:hover { color: #333; text-decoration: underline; }

Let’s head over to http://codepen.io again and give those styles
a try, too. LET’S SEE WHAT THOSE TURN INTO

LET’S BUILD SOMETHING FROM SCRATCH

Open a text document in any text editor. Note: This
does not include something like Microsoft Word. If you are on Windows, you should have a program called Notepad, and if you are on OS X you should have something called TextEdit. Eventually you will want a programming-specific text-editor, but we can start with these programs for now.

There are a few important things our document will need:
<!DOCTYPE html> <html> <head> <title>Geek Girl Tech Con - Intro to HTML & CSS</title> </head> <body> <!- - Our content will go here - -> </body> </html>

Let’s add a little content: <h1>Geek Girl Tech Con Charlotte</h1>
<h2>My Website</h2> <p>This is my site for the Intro to HTML and CSS workshop</p>

Notice those default browser styles? Let’s make this look a
little nicer.

h1 { color: #434343; font-size: 54px; font-family: Helvetica, Arial, san-serif;
}

h2 { color: #999; font-size: 36px; font-weight: normal; font-family: Helvetica,
Arial, san-serif; }

p { color: #999; font-size: 14px; font-family: Helvetica, Arial, san-serif;
}

LOOKING BETTER, BUT LET’S PUSH IT FURTHER

This part of the presentation is being live-coded. Sorry.

http://www.w3schools.com/

QUESTIONS?

Geek Girl Tech Con Charlotte - Intro to HTML & CSS

Geek Girl Tech Con Charlotte - Intro to HTML & CSS

Eric Allen

More Decks by Eric Allen

Other Decks in Education

Featured

Transcript

HTML & CSS FOR BEGINNERS http://bit.ly/geekgirl-html

ERIC ALLEN @ALLENERICR @THISISSOCIAL

I BUILD THE INTERNET… …AND YOU CAN, TOO.

HYPER TEXT MARKUP LANGUAGE (HTML) HTML is a markup language

HTML5 HTML5 is the latest iteration of HTML. It brings

THE BUILDING BLOCKS OF THE INTERNET Everything you see on

CASCADING STYLE SHEETS (CSS) CSS defines how HTML elements are

CSS3 CSS3 is the latest iteration of CSS. It brings

MAKING THE INTERNET PRETTY CSS can make the HTML building

HTML is your content CSS is the presentation of your

HTML ANATOMY HTML is composed of individual parts called elements.

HTML ANATOMY EXAMPLES <a href=“http://www.google.com/“>Google</a> <img src=“http://placekitten.com/g/400/300” /> <ul> <li>Item

Let’s head over to http://codepen.io and give those a try.

CSS ANATOMY CSS is composed of parts called rules. Rules

CSS ANATOMY EXAMPLES a { text-decoration: none; color: #ccc; }

Let’s head over to http://codepen.io again and give those styles

LET’S BUILD SOMETHING FROM SCRATCH

Open a text document in any text editor. Note: This

There are a few important things our document will need:

Let’s add a little content: <h1>Geek Girl Tech Con Charlotte</h1>

Notice those default browser styles? Let’s make this look a

h1 { color: #434343; font-size: 54px; font-family: Helvetica, Arial, san-serif;

h2 { color: #999; font-size: 36px; font-weight: normal; font-family: Helvetica,

p { color: #999; font-size: 14px; font-family: Helvetica, Arial, san-serif;

LOOKING BETTER, BUT LET’S PUSH IT FURTHER

This part of the presentation is being live-coded. Sorry.

http://www.w3schools.com/

QUESTIONS?