Skip to content

Instantly share code, notes, and snippets.

View nextechu's full-sized avatar

Bruce Kyle nextechu

View GitHub Profile
@nextechu
nextechu / minimal-skeleton.html
Last active January 3, 2016 04:49
Minimal skeleton for HTML5 app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your title</title>
</head>
<body>
The document content
</body>
@nextechu
nextechu / html5-skeleton.html
Last active January 3, 2016 04:49
Skeleton of HTML5 code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Part 3</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body>
<header>masthead
</header>
@nextechu
nextechu / highlighted-rows.html
Last active January 3, 2016 17:09
Using CSS class selector to select rows in a table and highlighting every other row.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>highlighted rows</title>
<style>
table {
border-collapse: collapse;
}
td {
@nextechu
nextechu / checkbox-jquery.html
Last active January 3, 2016 17:09
A click event handler has been assigned to the HTML input button. When the button is clicked, jQuery finds all the checkboxes with name “chk” using input:checkbox[name=chk] selector and then the Id, value and state of the all HTML input checkboxes are displayed in alert using jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select checkboxes</title>
</head>
<body>
<input type="checkbox" id="Checkbox1" name ="chk" value ="1" />
<input type="checkbox" id="Checkbox2" name ="chk" value ="2" />
<input type="checkbox" id="Checkbox3" name ="chk" value ="3" />
@nextechu
nextechu / myred.html
Last active January 3, 2016 17:19
Examples make the text bold, the font style Verdana and its color to red.
<!-- CSS Inline -->
<p style="color=#FF0000; face='Verdana, Arial, Helvetica, sans-serif'; font-weight: bold;">This is red bold text</p>
<!-- CSS in style block -->
<style>
.myRed {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
@nextechu
nextechu / reset.html
Created January 18, 2014 20:17
Reset stylesheet reduces browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. This is a starting point, not a self-contained black box. If you want defaults set, look to Bootstrap http://getbootstrap.com/ or something similar.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Reset</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
@nextechu
nextechu / positioning-start.html
Created January 18, 2014 22:30
Positioning Example: beginning
<!DOCTYPE html>
<html lang="en">
<head>
<title>Positioning sample</title>
<meta charset="utf-8">
<style>
#example {
font-size: 1.2em;
width: 35%;
}
@nextechu
nextechu / position-static.css
Created January 18, 2014 22:38
#div-1 {
position:static;
}
@nextechu
nextechu / position-relative.css
Created January 18, 2014 22:43
position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
#div-1 {
position:relative;
top:20px;
left:-40px;
}
@nextechu
nextechu / position-absolute.css
Created January 18, 2014 22:53
When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}