Web Fellowship: Lesson #1 - Intro into HTML, CSS and Javascript

Summer 2015 Intro to Intro to HTML, CSS and Javascript

“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

HTML, CSS & Javascript A high level overview

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

HTML CSS JS A traditional breakdown

HTML HyperText Markup Language

HTML Basics Structure & Tags Tags are the primary way
to control HTML. The almost always start with an opening tag: <html> and end with a closing tag: </html> <html> <body> </body> <head> </head> </html> <!DOCTYPE html> Structure Tags

Always use a Doctype <!DOCTYPE html> <html> <body> </body> <head>
</head> </html> <!DOCTYPE html> 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 <!DOCTYPE html>

HTML wrapper <html> <html> <body> </body> <head> </head> </html> <!DOCTYPE
html> There are always two parts to an HTML file: the head and the body.

What goes in the head? <head> <html> <body> </body> <head>
</head> </html> <!DOCTYPE html> 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.

What should your page display? <body> <html> <body> </body> <head>
</head> </html> <!DOCTYPE html> The body tag contains all the information that you want your browser to display. Place all of your images, text links here.

Don’t forget! <html> <html> <body> </body> <head> </head> </html> <!DOCTYPE
html> Don’t forget to close your </html> tag

Just a few important ones to start HTML5 Tags <section>
<article> <div> <span> <hgroup> <pre> <aside> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <p> <em> <strong> <b> <i> Structure Tags Content Tags <table> <thead> <tbody> <tr> <td> Table Tags <form> <input type="button"> <input type=“text"> <input type="submit"> <input type="hidden"> Form Tags

Just a few important ones to start Example HTML Page

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. <img src=“/images/apple.jpg“ />

Create links to other pages Links The href tag allows
you to link. A normal link looks something like this: <a href=“http://google.com”>Visit my link!</a> You can also wrap links around other tags, like images: <a href=“http://google.com”><img src=“/images/my_image_name.jpg”></a> You can also control if images open in the same window (default) or a new window by using the target attribute <a href=“http://google.com” target=“_blank”>Visit my link!</a>

Control the chaos with Ordered and Unordered Lists <ol> <li>Cheese</li>
<li>Sour Cream</li> </ol> <ul> <li>Cheese</li> <li>Sour Cream</li> </ul> Ordered Lists Unordered Lists • Cheese • Sour Cream HTML Display

Control the chaos with Multi-level Lists <ol> <li>Dad's interests <ul>
<li>football</li> <li>knitting</li> </ul> </li> <li>Mom's interests <ul> <li>hating football</li> <li>skydiving</li> </ul> </li> </ol> Ordered Lists 1. Dad's interests ° football ° knitting 2. Mom’s interests ° hating football ° skydiving HTML Display

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 <h1><p> 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.

Giving your site a backbone Structure tags Tables Build it
yourself <table> <tr> <td></td> <td></td> <td></td> </tr> <td></td> <td></td> <td></td> <tr> <td></td> <td></td> <td></td> </tr> </table> <div height=“50px” width=“50px” background-color=“red”></div> You can substitute <div> for your preference: <span>, <section>, <article>, <figure>. Use the tag that is most approbate for the content it contains.

CSS Cascading Style Sheets

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.

Link to an external style sheet Stylesheet.css <link type="text/css" rel="stylesheet"
href="stylesheet.css"/> To use a stylesheet you must add a link into the <head> of your html document:

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

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 <head> (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.

CSS Selectors The details of CSS (1 of 5) HTML
Selectors ID and Class names HTML selectors are naturally occurring tags such as: <h1>, <h2>, <h3> <p> <div> <span> <section> IDs and Class names are give to HTML selectors to give them specificity such as <h1 class=“my_heading”></h1> or <div id=“my_div_name”></div> 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

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.

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; }

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

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

(4 of 5) Margin div { margin: 10px 10px 10px 10px; } 10px 10px 10px 10px div { margin: Top Right Bottom Left; }

(4 of 5) Padding div { padding: 10px 10px 10px 10px; } 10px 10px 10px 10px div { padding: Top Right Bottom Left; }

(4 of 5) Floats div { float:left; } div { float:right; } div {clear:both;}

(4 of 5) Position: static, relative, absolute and fixed div { display:block; width: 100px; height: 50px; } Position: static (default)

(4 of 5) Position: static, relative, absolute and fixed div { display:block; position:relative; width: 100px; height: 50px; top:20px; } Position: relative 20px 50px

(4 of 5) Position: static, relative, absolute and fixed div { display:block; position:absolute; width: 100px; height: 50px; top:20px; } Position: absolute 20px 50px

(4 of 5) Position: static, relative, absolute and fixed div { display:block; position:fixed; width: 100px; height: 50px; top:20px; } Position: fixed 20px 50px

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.

Javascript Client-side programing language

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.

Link to jQuery and your javascript file jQuery + scripts.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src=“/js/script.js”></script> To use a javascript and jquery you must add a link into the <body> of your html document just before the close of your </body> tag.

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"); });

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

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

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

Q&A + Break time!

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

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

Web Fellowship: Lesson #1 - Intro into HTML, CS...

Web Fellowship: Lesson #1 - Intro into HTML, CSS and Javascript

More Decks by mccombs

Other Decks in Technology

Featured

Transcript