css/Bootstrap/html Flashcards
Appannie only accepts requests from
https
the appannie api domain is
https://api.appannie.com/
Python: The requests library allows you to
connect to APIs
A site designed for testing API calls is
http://httpbin.org/
requests: r = requests.get(“http://httpbin.org/get”) returns a
response object
requests: To return the status code of a response object, type
r.status_code for the code
or
r.ok for a check on all of them
requests: To return the header of a response object, type
r.headers
or
r.headers.keys()
Python: Most APIs return
JSON data
requests: To return just one value from the header by passing in the key name, type
r.headers[“Key name”]
requests: To see the text of a response object, type
r.text
requests: To return the text of a response object in json format, type
r.json()
requests: To create an object through an API usually requires a
POST request and a payload of data.
requests: payloads are usually
dictionaries
eg,
payload = {“content”: “My string”, “user_id”: 1000}
requests: To create a post request, type
r = requests.post(“http://httpbin.org/”, params=payload)
API: A RESTful API request is fundamentally just
a url with parameters
requests: To send data in a payload where a key represents a list, type
payload = {list_name[]: [1000, 2000]}
requests: To send a delete request, type
r = requests.delete(“http://httpbin.org/delete”, params=payload)
requests: To see if your request was redirected, type
r.history
requests: To disallow redirects for a request, type
r = requests.get(“http://httpbin.org”, allow_redirects=False)
APIs usually do authentication through
public and private keys.
The two main type of authentication for websites (not APIs), use for authentication are
HTTPBasicAuth and HTTPDigestAuth
requests: to create a request with a HTTPBasicAuth, type
from requests.auth import HTTPBasicAuth
r = requests.get(“http://httpbin.org”, auth=HTTPBasicAuth(“username”, “password”))
requests: requests also support authentication through
oauth
json: To parse a list of dicts into a df, type
for x in r.json()["proposals"]:
df = df.append([[
x["costToComplete"],
x["freeShipping"],
x["gradeLevel"]["id"],
x["gradeLevel"]["name"]
]], ignore_index=True)requests: To authenticate with OAuth, type
from requests_oauthlib import OAuth1
auth = OAuth1(“YOUR_APP_KEY”, “YOUR_APP_SECRET”, “USER_OAUTH_TOKEN”, “USER_OAUTH_TOKEN_SECRET”)
r = requests.get(“http://endpoint.com”, auth=auth)
json: When parsing json, if you see a dictionary inside of a value, just
ignore the container key name and make the next column the value from the dictionary by using [“Inner KeyName”]
Python: to concat a string with a var you must
explicitly make the var a string.
API: To send a get request with a Authorization Bearer key, type
headers = {"Authorization":"Bearer MYREALLYLONGTOKENIGOT"}
r = requests.get("endpoint.com", headers=headers, params=payload)
Note: Bearer must be capitalized.
requests: the end point does not
need a trailing question mark or slash
Appannie: The create an app annie category payload is for Games / Strategy, type
“categories”:”Overall > Games > Strategy”
Appannie: When passing in the “date”:”yyyy-mm-dd” parameter with “granularity”:”monthly”
The report generated counts forwards a month from the date inputted
Appannie: Weekly granularity always starts on
sunday
appannie: Granularity means
the time span
A free app mockup site is
ninjamock
twitter ads must have a
link
pandas: to use read_csv there cannot be
any non utf-8 characters in the file.
datetime: the datetime character for the hour of a 24hour clock is
“%H”
python: To import python libraries that are in a different directory, type
import sys
sys.path.insert(0, ‘/users/student/desktop/’)
import file
html: a headline tag is
<h1></h1>
html: To start an html file, type
-!DOCTYPE html>
To make the cursor go directly to the end of the line, type
command right arrow
html: By default, you should set the encoding in the head tags by typing
- head>
- meta charset=”utf-8”>
- /head>
html: first level headlines should be place in the
header element -header> <h1>Home</h1> <h2>Contact</h2> -/header>
html: You should place paragraphs inside
<p></p>
html: The footer of your site should go in
-footer>
Company, LLC
-/footer>
html: Sections of your page should be placed in
-section>-section>
html: Place paragraphs inside
<p></p>
html: the format for an html entity is that they
start with an ampersand and end with a semi colon
flask: if you save two cookies by the same name the second will
overwrite the first one.
json: To parse json into a dict, type
json.loads(my_json)
json: To turn a dict into json, type
json.dumps(my_dict)
json: The json library is used to
turn json into dicts and dicts into json
The format for json is,
Dict surrounded by single quotes
Every key is a string
flask: To import the module for sending messages to the user, type
from flask import flash
app = Flask(\_\_name\_\_) app.secret_key = "bunchofrandomcharacters"
html: To create an bullet point list, type
- ul>
- li>List Item 1-/li>
- li>List Item 2-/li>
- /ul>
html: to create an image, type
-img src=”/imagepath”, alt=””>
css: To import the stylesheet to the html page, type
- head>
- link rel=”stylesheet” href=”css/main.css”>
- /head>
css: To apply styling to anchor tags inside nav tags, type
nav a {
color: blue;
}
css: To remove all underlines from links, type
text-decoration: none;
css: To create a divider for css selection purposes, type
-div>-/div>
To select a large amount of code
place cursor above it, hold shift and then click below it.
To indent a block of text
highlight it and press command, square bracket
css: To select a div with the id=”wrapper”, type
#wrapper {
color: blue;
}css: To change the color of the background, type
background: blue;
css: To set the maximum width of an element, type
max-width:
css: To set how close to the browsers edge an element will reach, type
margin: 0px auto;
css: for “margin: 0px auto;” the first number controls
the top and bottom margins
css: To increase the space around the border from within an element, type
padding: 5% 5%;
css: to center align text, type
text-align: center;
css: to center a wrapper div, type
margin: 0 auto;
css files end in
.css
in html, staying consistent with tabs and spaces
does not matter
to use the “and” operator, type
if my_var == 5 and my_var2 == 10:
print(“yes”)
bootstrap by default is
responsive
you can get bootstrap by simply
including it in the -link rel= through a CDN
bootstrap: to automatically make images responsive, typw
-img src=”my_image.png” class=”img-responsive” alt=””>
bootstrap: To automatically centre a page element, type
- div class=”container”>
- /div>
bootstrap: To make a certain text line look the most important, type
- p class=”lead”>
- /p>
bootstrap: to align text, type
- p class=”text-left”>-/p>
- p class=”text-center”>-/p>
- p class=”text-right”>-/p>
bootstrap: To import bootstrap, type
-link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
css: the css import should be in the order
bootstrap, google font, styles.css
bootstrap: To create a clean pill navigation, type
- ul class=”nav nav-pills”>
- li>-a href=”“>Page 1-/a>-/li>
- li>-a href=”“>Page 2-/a>-/li>
- /ul>
bootstrap: bootstrap places items on the page using a
grid system
bootstrap: the number of columns the grid usually has is
12
bootstrap: To create a new row in the grid with two columns, type
- div class=”row”>
- div class=”col-md-5”> My content
- /div>
- div class=”col-md-7”> My content
- /div>
- /div>
css: To select multiple elements together, type
h1, h2, h3 {
color: blue;
}
css: To lower some text, type
#my_text {
margin-top: 100px;
}css: to set the styling of a class, type
.my_class {
color: blue;
}
css: To apply two classes to one element, type
-div class=”class1 class2”>-/div>
.class1.class2 {
color: blue;
}
css: To create a border on an image, type
border: 8px solid #333333;
css: After you import the google fonts, to set the font on some text, type
into styles.css
h1 {
font-family: “Fontname”, backup-font;
}
The link and the instructions are all provided upon checkout from google.
css: each browsers default styling is stored in what’s called the
user agent stylesheet
css: When there are to selectors on the same element, the one that prevails is the one with
higher specificity
pythonanywhere: To see new changes I have to
both save and reload.
pandas: iterrows is a
generator which yields both index and packed rows
for index, row in df.iterrows():
prin(row[“c1”], row[“c2”])
bootstrap: to create a modal, type
Launch demo modal
Hexadecimal means
base 16
css: colors start with a
#
css: The color white is
ffffff
css: All id attributes must be
unique on the same page
css: To select a class tag that is within an anchor tag that is within a nav tag, type
nav a.myclass {
color: blue;
}
css: a sudo class is
a way to select an element in a specific state
css: to select the color of an anchor tag inside a nav tag on hover, type
nav a:hover {
color: blue;
}
css: The hexidecimal color black is
000000
css: To write a comment, type
/* my comment */
the url for google fonts is
www.google.com/fonts
css: a common backup font for a google font is
sans-serif
css: By default, 1em is
16 pixels
css: To set a font size relative to the default, type
font-size: 1.5em;
css: to unbold a headline, type
h1 {
font-weight: normal;
}
css: to change the amount of space between lines, type
line-height: 0.8em;
css: To pull other elements closer on the top, type
margin: -15px 0 0;
css: To add padding just to the top, type
padding-top: 10px;
Pandas: To make columns with categorical data be stored more efficiently, type
df[“Categorical Column”] = df[“Categorical Column”].astype(“category”)
Pandas: To fill a columns nans with the mean, type
mean = df['column'].mean() df['column'] = df['column'].fillna(mean)
bootstrap: By default, you should centre all the page elements by
putting everything inside the body inside a <div class="container"> </div>
bootstrap: To create a header with a light grey line underneath, type
- header class=”page-header”>
- p>My Header-/p>
- header>
bootstrap: In order for class=”nav nav-tabs” to work, the <ul> must be</ul>
all anchor tags
bootstrap: To pull the navigation to the right, type
class=”nav nav-pills pull-right”
bootstrap: To make a navigation option look active, type
-li class=”active”>
bootstrap: To create a large green button, type
-a href=”” class=”btn btn-success btn-lg”>My Button Text-/a>
bootstrap: To group two buttons together, type
- p class=”btn-group”>
- a href=”” class=”btn btn-success btn-lg”>My Button Text-/a>
- a href=”” class=”btn btn-success btn-lg”>My Button Text-/a>
- /p>
bootstrap: the md in class=”col-md-6” controls
at what device size the elements in a row will switch from stacked to horizontal (when expanding window)
bootstrap: If you want to use columns that total less than 12 you need to
offset the columns to make them look even
bootstrap: To offset columns, type
<div></div>
bootstrap: a nested column must be put inside the
divs of its parent col-md
bootstrap: To create a large text input area, type
- div class=”form-horizontal”>
- div class=”form-group”>
- div class=”col-md-6”>
- textarea class=”form-control” rows=”20” placeholder=”Notes” required>
- /div>
- div class=”col-md-6”>
- /div>
- div class=”form-group”>
- /div>
bootstrap: To make two column trade positions for medium sized browsers, type
- div class=”col-md-6 col-md-push-6”>
- div class=”col-md-6 col-md-pull-6”>
bootstrap: to hide an element for extra small screens, type
class=”hidden-xs”
or
class=”col-md-6 hidden-xs”
bootstrap: To make images rounded, thumbnail of circular, type
class=”img-rounded”
class=”img-circle”
class=”img-thumbnail”
bootstrap: google jquery and bootstraps javascript should be placed
right before body end with the jquery first
bootstrap: to make a collapsing nav bar, type
- div class=”nav navbar-default navbar-fixed-top navbar-header”>
- div class=”container”>
- button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”>
- span class=”icon-bar”>
- span class=”icon-bar”>
- /button>
- div class="collapse navbar-collapse"> - ul class="nav navbar-nav navbar-right"> - li class="active">-a href="">Contact - li>-a href="">FAQ-/a>-/li> - li>-a href="">Buy Now-/a>-/li> - /ul> - /div>
- button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”>
- /div>
- div class=”container”>
- /div>
bootstrap: To add a dropdown menu to one of the navigation options, type
- li class=”dropdown”>-a data-toggle=”dropdown” data-target=””> My Drobdown -b class=”caret”>-/b>-/a>
- ul class=”dropdown-menu”>
- li>-a href=”“>Item 1-/a>-/li>
- li>-a href=”“>Item 2-/a>-/li>
- /ul>
- /li>
bootstrap: To use a glyph icon, type
-b class=”glyphicon glyphicon-name”>-/b>
bootstrap: To create a divider in a dropdown menu, type
-li class=”divider”>-/li>
html5: you can now record audio into
the chrome browser
mysql: To see all the databases from with the sql console, type
SHOW DATABASES
mysql: To see all the tables in a specific database, type
SHOW TABLES IN databasename;
mysql: To create a new table in a specific database, type
CREATE TABLE databasename.New_Table_Name (column VARCHAR(50));
mysql: Column names cannot be
just a number
mysql: To see which user I am signed in as, type
SELECT user(), current_user();
mysql: To enter another database, type
USE databasename;
mysql: To delete a database, type
USE databasename;
DROP DATABASE databasename;
mysql: To close a mysql console, type
EXIT;
python: list(range(0,5)) returns
[0, 1, 2, 3, 4]
css: using -10px to push an element the opposite direction only works on the
margin property
regex: The operator for “or” is
|
regex: The regex /hi/ with return true for any string that
contains “hi” anywhere in it.
regex: To match on all “ar”, “arr”, “arrr”, type the regex
/ar+/
regex: to match to a character within a range from a-c, type
[a-c]
regex: To make regex case insensitive, you must type
i after the final slash e.g. /hi/i
regex: To match with whitespace, such as a space, tab or new line, type
\s
regex: to match a character on a range of a-z and 1-2 and whitespace (case insensitive), type
/[\w\s]+/
regex: To match on any letter, type
\w
css: To remove the bullet points from a -li>, type
li {
list-style-type: none;
}
bootstrap: To use bootstraps main cdn do not use
the optional theme.
css: To make a class override other classes acting on the same element despite not having highest specificity, type
!important;
e.g.
.button {
background: #fff !important;
}bootstrap: When adding bootstrap to layout.html remember to
add the viewport meta tag in the head
bootstrap: To create a login form, type
- h2 class=”form-signin-heading”>Please Sign In-/h2>
- form action=”” method=”post” class=”form-signin”>
- input type=”email” placeholder=”Email” class=”form-control” name=”username”>
- input type=”password” placeholder=”Password” class=”form-control” name=”password”>
- button class=”btn btn-lg btn-primary btn-block” type=”submit”>Sign in-/button>
- /form>
bootstrap: To create a good looking file upload button, type
-label class=”btn btn-primary” for=”my-file-selector”>
-input id=”my-file-selector” type=”file” style=”display:none;”>
Button Text
-/label>
bootstrap: To make a file upload that displays the filename you are uploading, type
-div style=”position:relative;”>
-a class=’btn btn-primary’ href=’javascript:;’>
Choose File…
-input type=”file” style=’position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;opacity:0;background-color:transparent;color:transparent;’ name=”file_source” size=”40” onchange=’$(“#upload-file-info”).html($(this).val());’>
-/a>
-span class=’label label-info’ id=”upload-file-info”>-/span>
-/div>
boostrap: to increase the size of a glyphicon, type
font-size: 1.5em;
bootstrap: You should imbed scripts into the template only
after the jquery and bootstrap javascript imports
bootstrap: When invoking javascript that is stored in the static folder make sure the contents of the folder
does not have script tags around it.
bootstrap: To make a horizontal button group that spans the entire width of the div, type
- div class=”btn-group btn-group-justified” role=”group” aria-label=”…”>
- div class=”btn-group” role=”group”>
- a href=”” class=”btn btn-default”>Left-/a>
- /div>
- div class=”btn-group” role=”group”>
- a href=”” class=”btn btn-default”>Right-/a>
- /div>
- div class=”btn-group” role=”group”>
- /div>
css: To make the image used as a background stay centered in an element, use the property
background-position: center;
css: To create good looking charts, use
highcharts
css: To round the corners of a div, type
border-radius: 25px;
css: To add a shadow to the bottom of a div, type
box-shadow:0px 1px 1px grey;
css: The order of the classes in class=
does not matter
css: If you are using a sticky header, to make sure it doesn’t cover page content, you should
create a class
.move-down {
margin-top: 50px;
}
and add that class to the bodies main “container” div.
css: To find a site to choose color scheme
google flat ui colors
bootstrap: To install jquery and jqueryui, type before body end tag
- script src=”http://code.jquery.com/jquery-2.1.4.min.js”>-/script>
- script src=”http://code.jquery.com/ui/1.11.4/jquery-ui.js”>-/script>
bootstrap: nav bar collapsing only works if you have
jquery installed.
bootstrap: To center align text, type
-p class=”text-center”> Text -/p>
bootstrap: the class=”sr-only”
hides an element from all users except the visually impaired using screen readers.
bootstrap: To make a table striped, type
-table class=”table table-striped”>
css: To make a button span the full width of its div, type
display: block;
width: 100%;
css: To remove the border from a bootstrap button, type
border: 0px;
bootstrap: To increase the opacity of a bootstrap modals background, type
.modal-backdrop {
opacity: 0.8 !important;
}
css: To make an element appear behind other elements, use the property.
z-index: -1;
css: To center text and images inside a div, use the div property
text-align: center;
html: To prepopulate a form input, add the attribute
value=”value”
css: To create a fixed background image from cloudfront, type
background-image: url(‘http://d24d6ca2ggyz18.cloudfront.net/file.jpg’);
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
css: The property that controls the indent of text is called
text-indent
bootstrap: To make a form with inline labels, type
- form action=”” method=”” class=”form-horizontal”>
- div class=”form-group”>
- label for=”input_id” class=”col-sm-3 control-label”>Field Label
- div class=”col-sm-9”>
- input class=”form-control” id=”input_id” type=”text”>
- /div>
- /div>
- div class=”form-group”>
css: To crop an image with css, type
- div class=”cropper”>
- img src=”http://your-source.com” alt=”alt” />
- /div>
.cropper {
width: 418px;
height: 240px;
overflow: hidden;
}
.cropper img {
width: 100%;
}
css: The trick to cropping an image to make it the correct size but maintain the aspect ratio is to
make it the background of a div and then have the original img tag inside of it with the opacity of 0 so you can still copy and paste and SEO.
css: When using four numbers for the margin properties values, they associate with the sides
top, right, bottom, left
css: When using three numbers for the margin properties values, they associate with the sides
top, right/left, bottom
html: To make an -a> tag open the link in a new tag, type
target=”_blank”
html: buttons are
tags, so you must put the label of it before a /button
css: To make a div it’s own scrollable section, type
overflow: auto;
html: To make the form action point to the same URL as current with something appended,
do not start the action with a slash.
html: To make a form action url set the entire folder path and not just append,
start the path with a slash
Bootstrap: when creating a complicated table using the row and col-md-x classes
It helps to create the closing div and indent the contents right after opening the div and before entering the content in order to mentally keep track.
html: To make a link no follow, add the attribute
rel=”nofollow”
css: To give the background two overlapping images, type
background: url(http://cdn.com/image1), url(http://cdn.com/image2);
css: when using background: url(http://cdn.com/image1), url(http://cdn.com/image2); the first image
shows up on top.
css: To go into the css file of a page element from the chrome console,
click on the page element, hold control, click on the relevant class on the right css pane
css: To preload two images, type
body:after{
display:none;
content: url(http://cdn.com/image1.jpg) url(http://cdn.com/image2.jpg);
}
html: To make a pop up that either confirms or cancels a link click, add the attribute
onclick=”return confirm(‘string’);”
html: To make a pop up that either confirms or cancels a form submit, add the attribute
onsubmit=”return confirm(‘string’);”
css: block type page elements
take up an entire line and create a new line above and below them
css: inline type page elements
fir inside their parent and only take the space they need.
css: The sections of the element box model are
content, padding, border, margin
css: To set the width of a border, type
border-width: 10px;
css: To set the style of a border, type
border-style: solid;
css: To set the color of a border, type
border-color: #ffffff;
css: To set the borders width, style and color in a shorter way, type
border: 10px solid #ffffff;
css: To set the height of a line, type
line-height: 1.2;
css: To set all the margins to be equal, type
margin: auto;
css: The most common display values are
none, block, inline, inline-block
css: set an element to display: none; will
make it take no space on the page and therefore disappear
css: The three main parts of responsive design are
fluid images, fluid grids, and media queries
css: To add the code that makes a site responsive
add a new file called responsive.css and import it below styles.css to if any media queries are met it will override the standard styles.
css: To set css for when a screen width is more than 480px, type
@media screen and (min-width: 480px) {
}
css: To override the properties affecting an element only under a media query condition
create a class in the media query with the preferred properties and add the class to the page element. This way the new class is undefined until the condition is met at which point it overrides the previous class.
css: To apply properties to an nth page element that matches the css selector, type
li:nth-child(3n) {
}
css: To make the background image of a div fill the whole container, type
background-size: cover;
css: To set the horizontal position of an element to not move, type
position: absolute;
css: To give a link a nice underline, type
text-decoration: none;
border-bottom: 2px solid #fff;
css: Sometimes to make a parent div contain its children divs within its height, you must type
position: relative
css: To set the border radius on just the top left corner, type
border-top-left-radius: 0.3em;
css: The four types of positions are
fixed, absolute, relative, static
css: To specify that the text in <p> elements will never wrap, type</p>
white-space: nowrap;
css: To create a media query with more than one condition that can or must be met, type
@media only screen and (min-width: 768px), @media only screen and (min-width: 768px) and (orientation: landscape) {
}
css: To customize the styles for every bootstrap breakpoint, type
into responsive.css
@media only screen and (min-width : 1400px) {
/*set max-width ~1500px */
}
@media only screen and (max-width : 1200px) {
}
@media only screen and (max-width : 992px) {
}
@media only screen and (max-width : 768px) {
}
@media only screen and (max-width : 480px) {
/*set font-size ~1em */
}
@media only screen and (max-width : 320px) {
}
Note:
Must put css selector (e.g. #css-id) inside the media query
Make the logo change color in each media query for development
css: a shortcut in text editors to comment out highlighted text is
command slash
css: To convert all text to uppercase using css, type
text-transform: uppercase;
css: The main element positions and their meanings are
fixed (stays in one part of the computer screen, eg, by levels)
relative (stays in one part of the parent div)
absolute (stays fixed on one part of the page)
css: In order to use z-index, you must
specify the position: of the elements being stacked BEFORE the z-index.
css: To blur an image, type
-webkit-filter: blur(5px);
css: When you are floating the elements, and one of them gets caught rather than going to the next line, you must
add the clear property
clear: both;
css: By default, html elements are positioned as
static
css: you can use the relative position property to
offset an element.
css: using the relative position property to offset an element
moves if relative to where it would have been had you left the position as static
css: Setting the position to absolute
removes it from the documents flow and makes it be contained in it’s parent div
css: z-index will not work on
elements with position: static; (which is the default)
css: To move an element with position: relative; above its top border, type
top: -10px;
css: The psuedo class for when an element is being clicked is
:active
css: The easiest way to see the break point when making a design responsive is to
make each media query’s body background alternate black and white
html5: To add arbitrary attributes to html tags, you must
prefix the attribute name with “data-“
css: To allow only up and down scrolling in a div, add the property
overflow-y: auto;
bootstrap: To make the content stretch to the width of the entire page, use the div class
container-fluid
html: To make an image a link, just
surround it with a tags and set the href as an attribute of the a tag.
css: To give an h1 tag a border-bottom underline that does not span the whole screen, type
h1 {
display: inline-block;
border-bottom:2px solid;
}
css: To keep the style separate between one app and another
give the main container div of the app a class name and then use that class name before all of the css selectors in it’s styles.css
html: To create a meta description, type
-meta name=”description” content=””>
html: To create a title tag, type
-title>string-/title>
html: The favicon should be placed
on your server in that static folder, since some user agent expect it there and not on a CDN.
html: To add a favicon to base.html, type
-link rel=”shortcut icon” type=”image/png” href=”{% static “app_name/favicon.ico” %}”/>
css: when giving a div a position: you must also
give it a side distance, in order for it to show. e.g. top, right, bottom, left.
css: To make a flat button like levelsio you just
add a bottom border of slightly darker shade to a button
css: You must place the background-position: property
after the background: url() property so that the image is loaded after before you effect it.
css: to change the cursor a user has when over an element, use the property
cursor: url(http://path/image.png) auto
css: To easily make a div with an arrow, go to
http://cssarrowplease.com/
css/jquery: To unhide an element that has, display:none; type
$(“.css-class”).css(“display”, “initial”);
jqueryui: always add the jqueryui import script
after the regular jquery import script.
css: To center align an element that has position:absolute; type
position:absolute;
bottom:0px;
z-index:2;
right:0;
left:0;
margin-left:auto;
margin-right:auto;
text-align:center;
css: To eliminate the styling on a link, the two css selectors you must override are
a, a:hover
css: separating styles between pages is
necessary, so they do not compete with eachother
css: To set a full page background image, type
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}css: When making a backdrop div to cover the whole screen
No not use position:fixed; since it doesn’t scroll properly, so use position:absolute with both a min-height and height:100%;
html: To refresh a page every set number of seconds, type
-meta http-equiv=”Refresh” content=”100”>
html: You can set the height and width of an image using
html attributes. e.g. height=”100” width=”200”
css: When creating a mobile first site
it’s easiest to arrange of the elements with a distance from the top. e.g. top: 20px;
html: The meta tags all sites should have are
- meta charset=”utf-8”>
- title>string-/title>
- meta name=”Description” content=”string”>
- link rel=”icon” type=”image/png” href=”http://cdn.com/favicon.ico”>
css: for the background-position property, the options for the first and second arguments are
1st: left, right, center
2nd: top, bottom, center
html: To create a favicon from an image go to
http://www.favicon-generator.org/
html: the typical size of a favicon is
16x16
css3: To give an element an animation, type
.css-class {
position: relative;
-webkit-animation: animation-name 5s infinite;
animation: animation-name 5s infinite;
}
@keyframes animation-name {
from {transform:rotate(0deg);left:-1000px; top:0px;}
to {transform:rotate(360deg);left:0px; top:0px;}
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
@-webkit-keyframes animation-name {
from {transform:rotate(0deg);left:-1000px; top:0px;}
to {transform:rotate(360deg);left:0px; top:0px;}
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
note: For motion animations, changing top works better than margin
html5: If rendering html5 video you should
convert the video into mp4, webm, and ogg and add them as fallbacks inside the video tags
- source src=”http://cdn.com/video.webm” type=”video/webm”>
- source src=”http://cdn.com/video.ogg” type=”video/ogg”>
html5: To stream a video from a cdn onto the page, type
- video id=”video-player” preload=”metadata” autoplay loop controls muted>
- source src=”http://cdn.com/video.mp4” type=”video/mp4”>
- /video>
css: To place an icon inside of a forms input field, type
- div id=”input_container”>
- input type=”text”>
- img src=”https://cdn.com/icon.png”>
- /div>
Then give the input tag some padding-left
css: To improve the legibility of small text, add the property
text-rendering: optimizeLegibility;
css: To make the background of a div into a gradated color, type
background: linear-gradient(180deg, red, red, red, black);
html: Sometimes if your video tags aren’t playing the video, ensure
the video is H.264 encoded
css: One way to make a slide out side menu is
to create the whole menu with a lower z-index and then on click have the page body move to the right
css: When setting widths and heights, opt for
using min and max rather than absolute
css: To make a container div adjust to contain its inner contents
use display: inline-block;
css: To increase or decrease space between letters, use
letter-spacing: 2px;
css: To change the font of an entire page
add an “add-font” class to the body tag and make the chosent font !important
javascript: To submit a file upload immediately after the user selects it, type
document.getElementById(“my-id”).onchange = function() {
document.getElementById(“my-id”).submit();
};
bootstrap: To make a file upload that looks like a bootstrap button, type
-span class=”btn btn-primary btn-file”>
Browse-input type=”file”>
-/span>
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
bootstrap: To change the color of a glyphicon
color: blue;
html: To make a form field automatically have the cursor in it, add the attribute
autofocus
css: To select and element by any attribute and value, type
[data-attribute=”value”] {
}
css: To select and element by just the presence of a data attribute, type
[data-attribute] {
}
css: A viewport is
the viewable area through the browser window
css: To set the height of an div relative to the viewport, type
height: 50vh
css: To set the width of an div relative to the viewport, type
width: 50vw
css: To make a div into a flexbox, type
display : flex;
flex-flow: row;
css: To use the full size of the browser viewport, type
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
}css: A flexbox is
a container element that makes everything inside it stretch out to fill it entirely
css: Some properties that make button text look better are
letter-spacing: 0.01em;
text-transform: uppercase;
font-weight: 700;
css: To make an input and submit button box, type
.btn {
background: #4AB969;
border: none;
padding: 10px 20px;
text-align: center;
min-width: 100px;
}
input {
outline: none;
padding: 12px;
border: 1px solid #ccc;
}
form {
display: flex;
flex-direction: row;
justify-content: stretch;
}css: To make an element be aligned to the right side of a div instead of the left, type
float: right;
css: To make an element stretch out to fill its entire viewport container, type
flex: 1;
display: flex;
flex-direction: column;
height: 100vh;
css: To center the content of a div with a flexbox, type
display: flex;
justify-content: center;
align-items: center;
css: To remove the blue border that shows when you click on a button or input field, type
outline: none;
html: To prevent the browser from auto suggesting values for input fields, type
autocomplete=”off”
css: To style the label of a checkbox only if it is checked, type
input[type=checkbox]:checked + label {
}
html: The same origin policy only applies to
javascript. A form can post to a different url.
css: To create an overlay semi opaque div
.overlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(51,51,51,0.7);
z-index: 2147483644;
}css: To make the border of an input field invisible, type
border: 1px solid transparent;
css: Its best to set the fonts on
html, body {
bootstrap: To make the buttons in a button group stretch out to fill their outer div
give each one style=”width:20%;”
bootstrap: To make a bootstrap button small, add the class
btn-sm
bootstrap: For free bootstrap themes go to
https://bootswatch.com/
bootstrap: To import the windows 8 and IE10 workarounds from cdn, type
-script src=”https://maxcdn.bootstrapcdn.com/js/ie10-viewport-bug-workaround.js” type=”text/javascript”>-/script>
html: To copy someones webpage template
copy their html
save their scripts files
save their css files
fix the paths to the scripts and css from where you put their page
html: To return whatever is currently typed into a textarea use the property
.value
html: To tell the browser that your text is performatted, type
-pre>-/pre>
css: To create a footer that sticks to the bottom with bootstrap, use the syles
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 40px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
background-color: black;
}
note: The footer goes parallel
css: The order of the properties
does matter
css: To make the page render faster
move the style and script imports to before body end and minify them.
html: A data URI is
a base64 encoded string that represents a file
html: The format of a data URI is
data:[-MIME-type>][;charset=-encoding>][;base64],-data>
html: Data URIs can be used in
img src or css background: url()
html: Some things to consider when using data URIs is
mobile browsers are slow to render them
they do not get cached by the browser
they total size of the file will be a third bigger than the binary
css: To make a div cause its inner text to wrap, type
word-wrap: break-word;
html: When a form is also posting files, you must add the attribute
enctype=”multipart/form-data”
bootstrap: To create a tooltip, type
-a href=”#” data-toggle=”tooltip” data-placement=”top” title=”string”>String-/a>
$(document).ready(function(){
$(‘[data-toggle=”tooltip”]’).tooltip();
});
css: To import another stylesheet into a css file, type
@import url(“https://fonts.googleapis.com/css?family=Roboto:300”);
css: Some clean, unannoying sans serif fonts are
Lato, Roboto, Open Sans Source, Droid Sans, Source Sans Pro, Proxima Nova
bootstrap: To improve on bootswatch’s paper theme
make font Open Sans Source
add a card class
.card {
padding: 3% 5% 5% 5%;
background-color: #fff;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}
or
.card{
padding: 3% 5% 5% 5%;
position: relative;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
and make
background-color: #f9f9f9;
html: To disable a link hre from requesting, type
href=”javascript:void(0);”
css: To rotate an element, type
- ms-transform: rotate(45deg);
- webkit-transform: rotate(45deg)
transform: rotate(45deg);
- webkit-transform: rotate(45deg)
bootstrap: To make a dropdown menu align with the right side, use the class
dropdown-menu dropdown-menu-right
css: To allow for 3d animations, give the page a third dimension by typing
body {
-webkit-perspective: 800px;
}
css: If you flip over an element you will see
its back side, which is visible by defaut
css: To add css properties to the id set in the url e.g. site.com#css-id, type
.p:target {
…
}
css: the styling for a google material design card is
position: relative;
display: inline-block;
vertical-align: top;
background-color: #fff;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
html: To superscript from text, type
-sup>string-/sup>
css: To style back text that is above a black background so it is visible, type
background: #eee;
padding: 5px;
opacity: 0.7;
css: To make facebook style 3d button
button {
padding: 10px 30px;
min-width: 194px;
text-align: center;
font-weight: bold;
background: -webkit-linear-gradient(#67ae55, #578843);
background: linear-gradient(#67ae55, #578843);
background-color: #69a74e;
box-shadow: inset 0 1px 1px #a4e388;
border-color: #3b6e22 #3b6e22 #2c5115;
border: 1px solid;
border-radius: 5px;
cursor: pointer;
letter-spacing: 1px;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
outline:none;
}
button:hover {
background:-webkit-linear-gradient(#79bc64, #578843);
background:linear-gradient(#79bc64, #578843)}
}
css: To make a video with an overlay dark grid, type
- div class=”video-background-container”>
- video preload=”auto” autoplay=”” loop=”” muted=”” class=”video-background”>
- source type=”video/mp4” src=”http://cdn.com”>- /video>
- /div>
- div class=”grid-overlay”>-/div>
.video-background-container {
position: absolute;
top: 0px;
left: 0;
right: 0;
height: 100%;
width: 100%;
overflow:hidden;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.video-background {
width: 100%;
background: black;
}
.grid-overlay {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index:10;
background: url("overaly.png") repeat;
}
css: Button text usually has increased
letter spacing
bootstrap: To make an element only visible on certain screen sizes, type
visible-md visible-sm
css: To create the effect of a line across the whole screen with a word in the middle
create a 1px height grey div with width 100% on both sides of the span text.
html: To make an image card with a title and button, type
- div class=”card”>
- img src=”image.jpg” class=”img-responsive” alt=””>
- div class=”card-heading”>
- h5 style=”display:inline-block;”>String-/h5>-button class=”btn btn-default pull-right”>-i class=”glyphicon glyphicon-option-vertical”>-/i>-/button>
- div class=”card-heading”>
- /div>
- /div>
boostrap: To hide elements for certain screen sizes, use class
hidden-md
hidden-sm
bootstrap: To select the second p tag in every container div, type
.container p:nth-child(2n) {
…
}
bootstrap: since col-md-push-6 and col-md-pull-6 are applied to all screen sizes greater than specified, you must
hard code the correct column order for the small screen sizes, and then use col-md-push-6 to change the order for larger sizes
bootstrap: The bootstrap examples often
extend bootstrap, so make sure to copy the extension when mimicking
css: To make sure video backgrounds dont buffer,
keep them under 25 mb
css: Video streams
do not work on tablets or phones so hide them
css: To center a div… To center an element…
div: set its margin to 0 auto
element: set it’s parent to text-align: center;
bootstrap: To eliminate the extra space on the right of the screen, add
.row {
padding-right: 0px;
margin-right: 0px;
}
bootstrap: Bootstraps row class
add extra space to the right of the screen and must be extended
.row {
padding-right: 0px;
margin-right: 0px;
}
The best workflow for creating a web app is
ninjamock wireframe
create the UI using normal bootstrap in a .html with styles in head and scripts in body
Change the bootstrap theme
create responsive.css
jquery: To toggle the transparency of the navbar, type
$(document).scroll(function() {
console.log($(this).scrollTop())
if($(this).scrollTop() > 4) {
document.querySelector(".navbar").setAttribute("style","background:black;")
} else {
document.querySelector(".navbar").setAttribute("style","background:none;")
}
})bootstrap: To open the image you clicked in a modal, type
- div class=”modal fade” id=”imagemodal” tabindex=”-1” role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”>
- div class=”modal-dialog”>
- div class=”modal-content”>
- div class=”modal-body”>
- img src=”” id=”imagepreview” class=”img-responsive” style=”margin:0 auto;”>
- /div>
- div class=”modal-body”>
- /div>
- div class=”modal-content”>
- /div>
- div class=”modal-dialog”>
- /div>
$(“.img-class”).on(“click”, function(event) {
$(‘#modal-img-tag’).attr(‘src’, $(event.target).attr(‘src’));
$(‘#imagemodal’).modal(‘show’);
});
css: To append a string to the end a tag using css, type
tag:after {
content: “string”;
}
css: top: 10%; doesn’t seems to
work on firefox, so just use px instead of %
css: To make an animation hold its last keyframe, type
animation-fill-mode: forwards;
under where you choose the animation name and length
Graphic design: the best site background color is
White because it always feel bigger in an a/b with something else
Graphic design: Sometimes a div you put in a card
would look better on an open background instead
html: You cannot run javascript
from a parent page into it’s child iframe, unless it is on the same domain as iframe
then:
document.querySelector(‘iframe’).contentWindow.targetFunction()
html: To make a form submit from a new tab, type
target=”_new”
html: To add a label to a form input that allows you to click on it and focus the input
give the input and id and create label tags with a for attribute set to the id of the input
css: divs with the name .container usually
have a max-width and are intended to contain the content in the center
css: to give an element multiple drop shadows, you can
comma separate them
