Slide 1

Slide 1 text

Summer 2015 Intro to Intro to HTML, CSS and Javascript

Slide 2

Slide 2 text

“The journey of a thousand miles begins with one step.” - Lao Tzu, Tao Te Ching | Chinese Philosopher 6th century BC A journey of a thousand li [Chinese mile] starts beneath one's feet

Slide 3

Slide 3 text

HTML, CSS & Javascript A high level overview

Slide 4

Slide 4 text

HTML CSS Javascript HyperText Markup Language Cascading Style Sheets Client-side programing language A quick overview HTML is the structure and backbone of your webpage CSS allows you to control the design and layout Javascript provides interaction & functionality

Slide 5

Slide 5 text

HTML CSS JS A traditional breakdown

Slide 6

Slide 6 text

HTML HyperText Markup Language

Slide 7

Slide 7 text

HTML Basics Structure & Tags Tags are the primary way to control HTML. The almost always start with an opening tag: and end with a closing tag: Structure Tags

Slide 8

Slide 8 text

Always use a Doctype A document type declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a document type definition (DTD) With HTML5 this almost doesn’t matter anymore. Just use

Slide 9

Slide 9 text

HTML wrapper There are always two parts to an HTML file: the head and the body.

Slide 10

Slide 10 text

What goes in the head? The head is the control center for your page. It contains information about your page like the page title, your page description, and what external files (CSS & JS) you are going to require.

Slide 11

Slide 11 text

What should your page display? The body tag contains all the information that you want your browser to display. Place all of your images, text links here.

Slide 12

Slide 12 text

Don’t forget! Don’t forget to close your tag

Slide 13

Slide 13 text

Just a few important ones to start HTML5 Tags

,

,

,

,

,

Structure Tags Content Tags

Table Tags Form Tags

Slide 14

Slide 14 text

Just a few important ones to start Example HTML Page

Slide 15

Slide 15 text

Add images to your pages Images The image tag uses the src attribute to set the url of the image. You can also add specific width and heights to your images, but we’ll leave that to CSS.

Slide 16

Slide 16 text

Create links to other pages Links The href tag allows you to link. A normal link looks something like this: Visit my link! You can also wrap links around other tags, like images: You can also control if images open in the same window (default) or a new window by using the target attribute Visit my link!

Slide 17

Slide 17 text

Control the chaos with Ordered and Unordered Lists
  1. Cheese
  2. Sour Cream
  • Cheese
  • Sour Cream
Ordered Lists Unordered Lists • Cheese • Sour Cream HTML Display

Slide 18

Slide 18 text

Control the chaos with Multi-level Lists
  1. Dad's interests
    • football
    • knitting
  2. Mom's interests
    • hating football
    • skydiving
Ordered Lists 1. Dad's interests ° football ° knitting 2. Mom’s interests ° hating football ° skydiving HTML Display

Slide 19

Slide 19 text

Things you can do HTML Misc. options HTML still allows you to set several basic options when working with different tags. While it’s always preferred to set things like this using CSS, these options are still available. For instance: On content tags like

etc. you can set the font size, font color and font family. On structure tags, you can set the width, height and background color and other style attributes.

Slide 20

Slide 20 text

Giving your site a backbone Structure tags Tables Build it yourself
You can substitute
for your preference: , , , . Use the tag that is most approbate for the content it contains.

Slide 21

Slide 21 text

CSS Cascading Style Sheets

Slide 22

Slide 22 text

Introduction to [vanilla] Cascading Style Sheets Style sheets allow you to control how your webpage looks. CSS can be augmented by preprocessors like Sass, less and PostCSS. But this is a lesson for another day. Recently, CSS has started being referred to as vanilla CSS because of it’s straightforward and minimal functionality.

Slide 23

Slide 23 text

Link to an external style sheet Stylesheet.css To use a stylesheet you must add a link into the of your html document:

Slide 24

Slide 24 text

How does this work? The basics of CSS p { font-size:12px; } Selector Property Value

Slide 25

Slide 25 text

Let’s talk logistics A primer on CSS Why CSS? Your own style • CSS exists to keep your front-end markup (html) clean. • In the “old days” we wrote everything inline • You can write both inline CSS and Styles in the (But you shouldn’t) • CSS evolves just like any other language • CSS3 means CSS version 3 • More changes are coming to CSS! • Ask yourself: Should I write it on one line? Should my brackets be on one line? Should I include a space? • Be consistent! Write each of your decorations the same way so it’s easy to read. • Make comments above sections to keep track of your code • Most companies will ask you to write CSS in some sort of ‘spec’. Be flexible.

Slide 26

Slide 26 text

CSS Selectors The details of CSS (1 of 5) HTML Selectors ID and Class names HTML selectors are naturally occurring tags such as:

,

,

IDs and Class names are give to HTML selectors to give them specificity such as

or
h1 { text-color: #000; } p { font-size:16px; } h1.my_heading { text-color: #000; } div#my_div_name { height: 30px;
 } .my_heading { text-color: #000; } #my_div_name { height: 30px;
 } or

Slide 27

Slide 27 text

CSS Reset and Normalize The details of CSS (2 of 5) By default every browser has some level of styles built in that we want to override. You can do this one of two ways: The Eric Meyer Reset http://meyerweb.com/eric/tools/css/reset/ or normalize.css https://necolas.github.io/normalize.css/ These files ‘reset’ the built in browser CSS allowing you to write clean CSS from the beginning. Failure to not use one of these files will lead you down the path of insanity.

Slide 28

Slide 28 text

Margin, Padding, Box sizing The details of CSS (3 of 5) html {box-sizing: border-box;} *, *:before, *:after {box-sizing: inherit;} Box Sizing: Height Width Margin (Gray) Padding (Green) div { height: 50px; width: 50px; } div { padding: 5px; width: 5px; }

Slide 29

Slide 29 text

Margin, Padding, Box sizing The details of CSS (3.5 of 5) Borrowed with love from http://www.codecademy.com/

Slide 30

Slide 30 text

Positioning - Part 1 of 8 The details of CSS (4 of 5) Display Type div { display: block; } display: block display: inline display: inline-block

Slide 31

Slide 31 text

Positioning - Part 2 of 8 The details of CSS (4 of 5) Margin div { margin: 10px 10px 10px 10px; } 10px 10px 10px 10px div { margin: Top Right Bottom Left; }

Slide 32

Slide 32 text

Positioning - Part 3 of 8 The details of CSS (4 of 5) Padding div { padding: 10px 10px 10px 10px; } 10px 10px 10px 10px div { padding: Top Right Bottom Left; }

Slide 33

Slide 33 text

Positioning - Part 4 of 8 The details of CSS (4 of 5) Floats div { float:left; } div { float:right; } div {clear:both;}

Slide 34

Slide 34 text

Positioning - Part 5 of 8 The details of CSS (4 of 5) Position: static, relative, absolute and fixed div { display:block; width: 100px; height: 50px; } Position: static (default)

Slide 35

Slide 35 text

Positioning - Part 6 of 8 The details of CSS (4 of 5) Position: static, relative, absolute and fixed div { display:block; position:relative; width: 100px; height: 50px; top:20px; } Position: relative 20px 50px

Slide 36

Slide 36 text

Positioning - Part 7 of 8 The details of CSS (4 of 5) Position: static, relative, absolute and fixed div { display:block; position:absolute; width: 100px; height: 50px; top:20px; } Position: absolute 20px 50px

Slide 37

Slide 37 text

Positioning - Part 8 of 8 The details of CSS (4 of 5) Position: static, relative, absolute and fixed div { display:block; position:fixed; width: 100px; height: 50px; top:20px; } Position: fixed 20px 50px

Slide 38

Slide 38 text

Working with fonts The details of CSS (5 of 5) @font-face is your friend Font Service Fonts are hosted for you and served up as an external resource. Some font services include • Google fonts • Typekit • typography.com • Font deck • myfonts.com Host them yourself locally You can call .ttf .otf and other font files locally but this can be against the font license. Check first. Always use a fallback You never know what could happen, it’s best to always specify a fallback font, even if it is just serif or san-serif.

Slide 39

Slide 39 text

Javascript Client-side programing language

Slide 40

Slide 40 text

Getting started with Javascript What’s this jQuery thing? 99% of users have javascript enabled Progressive enhancement is a very real thing but lets buy some beers and talk about it. “…I heard using jQuery was bad” For now, use javascript and use jQuery. Also note: Just like CSS3, Javascript continues to evolve.

Slide 41

Slide 41 text

Link to jQuery and your javascript file jQuery + scripts.js To use a javascript and jquery you must add a link into the of your html document just before the close of your tag.

Slide 42

Slide 42 text

Document load vs. ready Getting comfortable with jQuery Document Ready Window Load $(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready alert("document is ready"); }); $(window).load(function() { // executes when complete page is fully loaded, including all frames, objects and images alert("window is loaded"); });

Slide 43

Slide 43 text

Console.log() Getting comfortable with jQuery Using console $(document).ready(function() { console.log(‘this is a console message’); });

Slide 44

Slide 44 text

Fades Getting comfortable with jQuery Fade Out $(document).ready(function() { $(‘.class’).fadeOut(); }); Fade In $(document).ready(function() { $(‘.class’).fadeIn(); });

Slide 45

Slide 45 text

Click action Getting comfortable with jQuery Alert on Click $(document).ready(function() { $('.menu_toggle').click(function(e) { alert(‘hello world’); }) });

Slide 46

Slide 46 text

Q&A + Break time!

Slide 47

Slide 47 text

Codepen.io Example #001 - [mccombs/pen/EjwrzM]

Slide 48

Slide 48 text

Codepen.io Example #002 - [mccombs/pen/XbeOvO]