HTML Basics
MDN: Mozilla Developer Network has some good reference and tutorials.
MDN element ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Tags
<strong>bold</strong>
<i>italic</i>
<!-- ordered list, nested -->
<ol>
<li>a
<ul>
<li>a1</li>
<li>a2</li>
</ul>
</li>
<li>b</li>
</ol>
<!-- unordered list -->
<ul>
<li>a</li>
<li>b</li>
</ul>
Divs and spans
They allows to group thing together.
- div is a block level container, will push following content to new line
- span is a generic container, inline
Attributes
MDN attribute ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
<!-- image -->
<img src= "./pic.png">
<!-- links -->
<a href="url">Text</a>
Tables
MDN table ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
<table>
<!-- thead: table header block -->
<thead>
<!-- tr: table row -->
<tr>
<!-- th: table header -->
<th>First Col</th>
<th>Sec Col</th>
</tr>
</thead>
<!-- tbody: table body block -->
<tbody>
<tr>
<!-- td: column -->
<td>A</td>
<td>AA</td>
</tr>
<tr>
<td>BBB</td>
<td>BBBB</td>
</tr>
</tbody>
</table>
Forms
MDN input tag ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
<form action="where_the_form_send_data_to" method="what_HTTP_method_post/get">
<label>Username:
<!-- validation -->
<input type="text" name="username" id="" placeholder="Name" required>
</label>
<label>Email:
<!-- validation -->
<input type="email" name="email" id="email" placeholder="Email" required pattern=".{5,10}" title="Password must be 5 to 10 chars">
</label>
<!-- or label for id-->
<label for="password">Password:</label>
<input type="password" name="password" id="password" placeholder="Password">
<input type="date" name="" id="">
<input type="color" name="" id="">
<input type="file" name="" id="">
<input type="checkbox" name="" id="">
<!-- button -->
<button>Submit</button>
<input type="submit" name="" id="">
</form>
- radio button
- radio: User has only one choice
- checkbox can be checked multiple.
- select tag
- textarea tag
<!-- radio button -->
<form action="action" method="post">
<!-- use the same name for the same radio group -->
<!-- value will be sent -->
<label for="dogs">Dogs:</label>
<input type="radio" name="pet" id="dogs" value="dogs">
<label for="cats">Cats:</label>
<input type="radio" name="pet" id="cats" value="cats">
<!-- if button is the last element in form, it will submit -->
<button>Go!</button>
</form>
<!-- select tag -->
<form action="action" method="post">
<!-- value will be sent -->
<select name="color" id="">
<option value="RED">Red</option>
<option value="BLUE">Blue</option>
<option value="Green">Green</option>
</select>
</form>
<!-- textarea tag -->
<!-- for input with multiple lines -->
<textarea name="para" id="" cols="30" rows="10"></textarea>
CSS
Introduction
Cascading Style Sheets
general rule:
selector {
property1: value1;
property2: value2;
}
example:
h1 {
color: purple;
font-size: 56px;
}
Embedded in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- define style -->
<style type="text/css">
h1 {
color: purple;
}
li {
color: orange;
}
</style>
</head>
<body>
</body>
</html>
link tag
Preferred: Use <link> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- use link tag -->
<link rel="stylesheet" type="text/css" href="path_to_dot_css_file">
</head>
<body>
</body>
</html>
Color
define by
- name like ‘red’
- hexadecimal: ‘#’ + String of 6 hexadecimal numbers(from 0-F)
- RGB: rgb(r, g, b). r, g, b range from 0-255
- RGBA: last is alpha standing for transparency form 0.0-1.0
h1 {
color: #4b0082;
}
h2 {
color: rgb(0, 255, 0);
}
h3 {
color: rgba(100, 100, 100, 0.6);
}
We can use a color picker to get the hexadecimal of a color.
Background and border
h1 {
background: green;
border-color: purple;
border-width: 5px;
border-style: solid;
/* equivalent to */
border: 5px solid purple;
}
body {
/* set image as bgd */
background: url(path_to_img);
background-repeat: no-repeat;
/* cover whole page */
background-size: cover;
}
We can find pictures that can be used at https://unsplash.com/
Set a background pic:
body {
background: url(#);
background-size: cover;
background-position: center;
}
html {
height: 100%;
}
CSS selectors
The basics: element, id and class
- element: select all instances of a given element
- id: select an element with a given ID, only one per page!
- class: select all elements with a given class
/* element */
h1 {
color: red;
}
/* id */
#specialID {
color: yellow;
}
/* class */
.high {
background: blue;
text-decoration: line-through;
}
<div>
<p>Hey</p>
<p class="high">Hi</p>
<p id="specialID">hello</p>
<p class="high">Howdy</p>
</div>
More advanced selectors:
The 30 CSS Selectors You Must Memorize
- star: select every thing
- descendant selector: take two or more tags and chain them together
- adjacent selector: select adjacent tags on the same level (apply on the later one)
- attribute selector: select all elements with this href/other stuff
- nth of type: select the nth element in every group of that type
/* star */
* {
color: red;
}
/* descendant
select all <a> inside <li> */
li a {
color: blue;
}
li .hello {
}
/* adjacent */
h4 + ul {
color: green;
}
/* attribute */
a[href="http://www.google.com"] {
color: yellow;
}
input[type="text"] {
color: black;
}
/* pseudo-class */
a:hover {
}
input:checked {
}
/* nth of type */
li:nth-of-type(3) {
color: purple;
}
/* select every other */
li {
background: #fff;
}
li:nth-child(2n) {
background: #f7f7f7;
}
Chrome inspector
- Right click -> view page source
- Right click -> inspect elements
- the style can be changed
Cascade and specificity
If we specify properties of parent, the child elements will inherit those properties(current or the nearest).
Which selector wins?
id > class, attribute, pseudo-class > type > universal
Font
We can generate random paragraph for test using ipsum generator. bacon ipsum
- font-family
- font-size
- font-weight
- line-height
- text-align
- text-decoration: underline or else
- text-transform: change case
- letter-spacing: space between letters
/* font-family: specify font */
p {
font-family: "Arial";
}
/* font-size */
/* can use "inspect elements" to change size */
/* can use "em" unit to change font size relatively to the parent tag*/
body {
font-size: 16px;
}
p {
font-size: 1.0em;
}
p {
font-size: 12px;
}
/* font-weight */
/* some fonts can have range from 100 to 800 */
p {
font-weight: bold;
}
/* line-height: use it to center text vertically by set it taking entire area*/
p {
line-height: 2px;
}
li {
height: 40px;
line-height:40px;
}
/* text-align */
h1 {
text-align: right;
}
/* text-decoration */
h1 {
text-decoration: underline;
}
Google fonts
Google fonts: https://fonts.google.com/
- search the right font
- click the red plus sign circle to the right of the font name
- click the bottom grey tab
- click embed, copy the link tag and paste it into the head tag in project
Box model
Every element has a rectangular box around it. It has four edges: margin, border, padding and content.
- content: the width and height of the content box
- padding: the space between content and border
- border
- margin
p {
/* content - width and height */
/* percentage relative the the parent */
max-width: 700px;
width: 80%;
height: 80%;
/* border */
border: 2px solid blue;
/* or */
border-left: 1px solid black;
/* padding */
padding: 10px;
/* or */
padding-left: 40px;
/* margin */
/* margin top, right, bot, left*/
margin: 100px 20px, 50px, 10px;
/* or */
margin-top: 50px;
/* margin auto will do center */
margin: 0 auto 0 auto;
}
Float
float: left will put the element on the same line of the previous one and to the left of it. It will delete the default white space between images.
img {
width: 30%;
float: left;
margin: 1.66%;
}
Bootstrap
It includes a CSS file and a js file.
<button class="btn btn-success btn-xs" disabled="disabled">Click</button>
Forms and inputs
Jumbotron
We can put jumbotron or other stuff inside a container to have proper margin on the whole page.
<div class="container">
<div class="jumbotron">
</div>
</div>
Forms
- Use
form-groupto wrap each pair of label and input to have optimal spacing. - Use
form-controlfor input tag - Use
form-inlineto create inline form
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Nav bars
<!-- fix the nav bar on the top -->
<nav class="navbar navbar-default navbar-fixed-top">
<!-- add container to make the margin right -->
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Brand</a>
</div>
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<!-- make content on the right -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign up</a></li>
<li><a href="#">Sign in</a></li>
</ul>
</div>
</nav>
<!-- default nav bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<!-- button for toggling -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- all stuff inside this div will be collapsed -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- put script at the end of script -->
<!-- add jquery script before js -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- add bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
Grid system
The grid system scales up to 12 columns. A row can be divided into several parts whose width sum to 12. The grid should be used inside a container.
4 sizes:
- xs
- sm
- md
- lg
<div class="container">
<!-- this is a row -->
<div class="row">
<!-- nested -->
<div class="col-lg-3 col-md-6">
<!-- another 12 units inside this row -->
<div class="row">
<div class="col-lg-6">FIRST</div>
<div class="col-lg-6">SECOND</div>
</div>
</div>
<div class="col-lg-3 col-md-6">COL LG 3</div>
<div class="col-lg-3 col-md-6">COL LG 3</div>
<div class="col-lg-3 col-md-6">COL LG 3</div>
</div>
</div>
With thumbnail div, image will be properly scaled and get a nice border.
<div class="thumbnail">
<img src="#">
</div>
Font-awesome
Font Awesome can now be found at http://fontawesome.io/. A lot of icons.
CDN: https://www.bootstrapcdn.com/fontawesome/
To change color or size, just change the font color or size.
Mobile
If you want your bootstrap styled website to be responsive on mobile then be sure to add the following meta tag to your <head> element, above the <title> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Misc
CSS
box-sizing
/* border box will not include the margin */
input {
box-sizing: border-box;
}
input focus
/* while some input is being conducted */
input:focus {
background-color: #fff;
border: 3px solid #2980b9;
outline: none;
}
Color gradients
UIgradients: https://uigradients.com/#DigitalWater
Fill a space
/* fill the space with border box */
.delete {
background-color: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 40px;
display: inline-block;
}
Make grid flexible with different-size images
<!-- note the style, can add to css file -->
<div class="row" style="display:flex; flex-wrap: wrap;">
<% campgrounds.forEach(function(camp) { %>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="<%= camp.image %>" height="150">
<div class="caption">
<h4><%= camp.name %></h4>
</div>
</div>
</div>
<% }); %>
</div>
Bootstrap
Text under pic
<div class="thumbnail">
<img class="img-responsive" src="<%= camp.image %>" height="150">
<div class="caption"> <!-- or caption-full -->
<h4><%= camp.name %></h4>
</div>
</div>
Center text
<div class="row text-center">
</div>
Simple navbar
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" herf="/">Home</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Log in</a></li>
<li><a href="#">Sign up</a></li>
<li><a href="#">Log out</a></li>
</ul>
</div>
</div>
</nav>
Button takes entire width
<!-- use btn-block-->
<div style="width=30%; margin: 0 auto;">
<form action="/campgrounds" method="POST">
<input class="form-control" type="text" placeholder="Name" name="name">
<input class="form-control" type="text" placeholder="Image url" name="image">
<button class="btn btn-default btn-lg btn-block">Submit</button>
</form>
</div>
A block with grey background
<div class="well"></div>
Pull content to the right
<h4 class="pull-right">$9.00/night</h4>
<h4><a><%= campground.name %></a></h4>
