Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

freingt > css/Bootstrap/html > Flashcards

css/Bootstrap/html Flashcards

1
Q

Appannie only accepts requests from

A

https

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

the appannie api domain is

A

https://api.appannie.com/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Python: The requests library allows you to

A

connect to APIs

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

A site designed for testing API calls is

A

http://httpbin.org/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

requests: r = requests.get(“http://httpbin.org/get”) returns a

A

response object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

requests: To return the status code of a response object, type

A

r.status_code for the code

or

r.ok for a check on all of them

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

requests: To return the header of a response object, type

A

r.headers
or
r.headers.keys()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Python: Most APIs return

A

JSON data

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

requests: To return just one value from the header by passing in the key name, type

A

r.headers[“Key name”]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

requests: To see the text of a response object, type

A

r.text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

requests: To return the text of a response object in json format, type

A

r.json()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

requests: To create an object through an API usually requires a

A

POST request and a payload of data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

requests: payloads are usually

A

dictionaries
eg,
payload = {“content”: “My string”, “user_id”: 1000}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

requests: To create a post request, type

A

r = requests.post(“http://httpbin.org/”, params=payload)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

API: A RESTful API request is fundamentally just

A

a url with parameters

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

requests: To send data in a payload where a key represents a list, type

A

payload = {list_name[]: [1000, 2000]}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

requests: To send a delete request, type

A

r = requests.delete(“http://httpbin.org/delete”, params=payload)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

requests: To see if your request was redirected, type

A

r.history

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

requests: To disallow redirects for a request, type

A

r = requests.get(“http://httpbin.org”, allow_redirects=False)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

APIs usually do authentication through

A

public and private keys.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

The two main type of authentication for websites (not APIs), use for authentication are

A

HTTPBasicAuth and HTTPDigestAuth

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

requests: to create a request with a HTTPBasicAuth, type

A

from requests.auth import HTTPBasicAuth

r = requests.get(“http://httpbin.org”, auth=HTTPBasicAuth(“username”, “password”))

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

requests: requests also support authentication through

A

oauth

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

json: To parse a list of dicts into a df, type

A 
for x in r.json()["proposals"]:
    df = df.append([[
            x["costToComplete"], 
            x["freeShipping"], 
            x["gradeLevel"]["id"],
            x["gradeLevel"]["name"]
        ]], ignore_index=True)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
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)
26
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"]
27
Python: to concat a string with a var you must
explicitly make the var a string.
28
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.
29
requests: the end point does not
need a trailing question mark or slash
30
Appannie: The create an app annie category payload is for Games / Strategy, type
"categories":"Overall > Games > Strategy"
31
Appannie: When passing in the "date":"yyyy-mm-dd" parameter with "granularity":"monthly"
The report generated counts forwards a month from the date inputted
32
Appannie: Weekly granularity always starts on
sunday
33
appannie: Granularity means
the time span
34
A free app mockup site is
ninjamock
35
twitter ads must have a
link
36
pandas: to use read_csv there cannot be
any non utf-8 characters in the file.
37
datetime: the datetime character for the hour of a 24hour clock is
"%H"
38
python: To import python libraries that are in a different directory, type
import sys sys.path.insert(0, '/users/student/desktop/') import file
39
html: a headline tag is

40
html: To start an html file, type
-!DOCTYPE html>
41
To make the cursor go directly to the end of the line, type
command right arrow
42
html: By default, you should set the encoding in the head tags by typing
- head> - meta charset="utf-8"> - /head>
43
html: first level headlines should be place in the
``` header element -header>

Home

Contact

-/header> ```
44
html: You should place paragraphs inside

45
html: The footer of your site should go in
-footer> Company, LLC -/footer>
46
html: Sections of your page should be placed in
-section>-section>
47
html: Place paragraphs inside

48
html: the format for an html entity is that they
start with an ampersand and end with a semi colon
49
flask: if you save two cookies by the same name the second will
overwrite the first one.
50
json: To parse json into a dict, type
json.loads(my_json)
51
json: To turn a dict into json, type
json.dumps(my_dict)
52
json: The json library is used to
turn json into dicts and dicts into json
53
The format for json is,
Dict surrounded by single quotes | Every key is a string
54
flask: To import the module for sending messages to the user, type
from flask import flash ``` app = Flask(__name__) app.secret_key = "bunchofrandomcharacters" ```
55
html: To create an bullet point list, type
- ul> - li>List Item 1-/li> - li>List Item 2-/li> - /ul>
56
html: to create an image, type
-img src="/imagepath", alt="">
57
css: To import the stylesheet to the html page, type
- head> - link rel="stylesheet" href="css/main.css"> - /head>
58
css: To apply styling to anchor tags inside nav tags, type
nav a { color: blue; }
59
css: To remove all underlines from links, type
text-decoration: none;
60
css: To create a divider for css selection purposes, type
-div>-/div>
61
To select a large amount of code
place cursor above it, hold shift and then click below it.
62
To indent a block of text
highlight it and press command, square bracket
63
css: To select a div with the id="wrapper", type
``` #wrapper { color: blue; } ```
64
css: To change the color of the background, type
background: blue;
65
css: To set the maximum width of an element, type
max-width:
66
css: To set how close to the browsers edge an element will reach, type
margin: 0px auto;
67
css: for "margin: 0px auto;" the first number controls
the top and bottom margins
68
css: To increase the space around the border from within an element, type
padding: 5% 5%;
69
css: to center align text, type
text-align: center;
70
css: to center a wrapper div, type
margin: 0 auto;
71
css files end in
.css
72
in html, staying consistent with tabs and spaces
does not matter
73
to use the "and" operator, type
if my_var == 5 and my_var2 == 10: | print("yes")
74
bootstrap by default is
responsive
75
you can get bootstrap by simply
including it in the -link rel= through a CDN
76
bootstrap: to automatically make images responsive, typw
-img src="my_image.png" class="img-responsive" alt="">
77
bootstrap: To automatically centre a page element, type
- div class="container"> | - /div>
78
bootstrap: To make a certain text line look the most important, type
- p class="lead"> | - /p>
79
bootstrap: to align text, type
- p class="text-left">-/p> - p class="text-center">-/p> - p class="text-right">-/p>
80
bootstrap: To import bootstrap, type
-link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
81
css: the css import should be in the order
bootstrap, google font, styles.css
82
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>
83
bootstrap: bootstrap places items on the page using a
grid system
84
bootstrap: the number of columns the grid usually has is
12
85
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>
86
css: To select multiple elements together, type
h1, h2, h3 { color: blue; }
87
css: To lower some text, type
``` #my_text { margin-top: 100px; } ```
88
css: to set the styling of a class, type
.my_class { color: blue; }
89
css: To apply two classes to one element, type
-div class="class1 class2">-/div> .class1.class2 { color: blue; }
90
css: To create a border on an image, type
border: 8px solid #333333;
91
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.
92
css: each browsers default styling is stored in what's called the
user agent stylesheet
93
css: When there are to selectors on the same element, the one that prevails is the one with
higher specificity
94
pythonanywhere: To see new changes I have to
both save and reload.
95
pandas: iterrows is a
generator which yields both index and packed rows for index, row in df.iterrows(): prin(row["c1"], row["c2"])
96
bootstrap: to create a modal, type
Launch demo modal
97
Hexadecimal means
base 16
98
css: colors start with a
#
99
css: The color white is
#ffffff
100
css: All id attributes must be
unique on the same page
101
css: To select a class tag that is within an anchor tag that is within a nav tag, type
nav a.myclass { color: blue; }
102
css: a sudo class is
a way to select an element in a specific state
103
css: to select the color of an anchor tag inside a nav tag on hover, type
nav a:hover { color: blue; }
104
css: The hexidecimal color black is
#000000
105
css: To write a comment, type
/* my comment */
106
the url for google fonts is
www.google.com/fonts
107
css: a common backup font for a google font is
sans-serif
108
css: By default, 1em is
16 pixels
109
css: To set a font size relative to the default, type
font-size: 1.5em;
110
css: to unbold a headline, type
h1 { font-weight: normal; }
111
css: to change the amount of space between lines, type
line-height: 0.8em;
112
css: To pull other elements closer on the top, type
margin: -15px 0 0;
113
css: To add padding just to the top, type
padding-top: 10px;
114
Pandas: To make columns with categorical data be stored more efficiently, type
df["Categorical Column"] = df["Categorical Column"].astype("category")
115
Pandas: To fill a columns nans with the mean, type
``` mean = df['column'].mean() df['column'] = df['column'].fillna(mean) ```
116
bootstrap: By default, you should centre all the page elements by
putting everything inside the body inside a
117
bootstrap: To create a header with a light grey line underneath, type
- header class="page-header"> - p>My Header-/p> - header>
118
bootstrap: In order for class="nav nav-tabs" to work, the
    must be
all anchor tags
119
bootstrap: To pull the navigation to the right, type
class="nav nav-pills pull-right"
120
bootstrap: To make a navigation option look active, type
-li class="active">
121
bootstrap: To create a large green button, type
-a href="" class="btn btn-success btn-lg">My Button Text-/a>
122
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>
123
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)
124
bootstrap: If you want to use columns that total less than 12 you need to
offset the columns to make them look even
125
bootstrap: To offset columns, type
126
bootstrap: a nested column must be put inside the
divs of its parent col-md
127
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> - /div>
128
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">
129
bootstrap: to hide an element for extra small screens, type
class="hidden-xs" or class="col-md-6 hidden-xs"
130
bootstrap: To make images rounded, thumbnail of circular, type
class="img-rounded" class="img-circle" class="img-thumbnail"
131
bootstrap: google jquery and bootstraps javascript should be placed
right before body end with the jquery first
132
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> -a href="" class="navbar-brand text-muted">My Brand-/a> - 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> - /div> - /div>
133
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>
134
bootstrap: To use a glyph icon, type
-b class="glyphicon glyphicon-name">-/b>
135
bootstrap: To create a divider in a dropdown menu, type
-li class="divider">-/li>
136
html5: you can now record audio into
the chrome browser
137
mysql: To see all the databases from with the sql console, type
SHOW DATABASES
138
mysql: To see all the tables in a specific database, type
SHOW TABLES IN databasename;
139
mysql: To create a new table in a specific database, type
CREATE TABLE databasename.New_Table_Name (column VARCHAR(50));
140
mysql: Column names cannot be
just a number
141
mysql: To see which user I am signed in as, type
SELECT user(), current_user();
142
mysql: To enter another database, type
USE databasename;
143
mysql: To delete a database, type
USE databasename; | DROP DATABASE databasename;
144
mysql: To close a mysql console, type
EXIT;
145
python: list(range(0,5)) returns
[0, 1, 2, 3, 4]
146
css: using -10px to push an element the opposite direction only works on the
margin property
147
regex: The operator for "or" is
|
148
regex: The regex /hi/ with return true for any string that
contains "hi" anywhere in it.
149
regex: To match on all "ar", "arr", "arrr", type the regex
/ar+/
150
regex: to match to a character within a range from a-c, type
[a-c]
151
regex: To make regex case insensitive, you must type
i after the final slash e.g. /hi/i
152
regex: To match with whitespace, such as a space, tab or new line, type
\s
153
regex: to match a character on a range of a-z and 1-2 and whitespace (case insensitive), type
/[\w\s]+/
154
regex: To match on any letter, type
\w
155
css: To remove the bullet points from a -li>, type
li { list-style-type: none; }
156
bootstrap: To use bootstraps main cdn do not use
the optional theme.
157
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; } ```
158
bootstrap: When adding bootstrap to layout.html remember to
add the viewport meta tag in the head
159
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>
160
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>
161
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>
162
boostrap: to increase the size of a glyphicon, type
font-size: 1.5em;
163
bootstrap: You should imbed scripts into the template only
after the jquery and bootstrap javascript imports
164
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.
165
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>
166
css: To make the image used as a background stay centered in an element, use the property
background-position: center;
167
css: To create good looking charts, use
highcharts
168
css: To round the corners of a div, type
border-radius: 25px;
169
css: To add a shadow to the bottom of a div, type
box-shadow:0px 1px 1px grey;
170
css: The order of the classes in class=
does not matter
171
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.
172
css: To find a site to choose color scheme
google flat ui colors
173
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>
174
bootstrap: nav bar collapsing only works if you have
jquery installed.
175
bootstrap: To center align text, type
-p class="text-center"> Text -/p>
176
bootstrap: the class="sr-only"
hides an element from all users except the visually impaired using screen readers.
177
bootstrap: To make a table striped, type
-table class="table table-striped">
178
css: To make a button span the full width of its div, type
display: block; width: 100%;
179
css: To remove the border from a bootstrap button, type
border: 0px;
180
bootstrap: To increase the opacity of a bootstrap modals background, type
.modal-backdrop { opacity: 0.8 !important; }
181
css: To make an element appear behind other elements, use the property.
z-index: -1;
182
css: To center text and images inside a div, use the div property
text-align: center;
183
html: To prepopulate a form input, add the attribute
value="value"
184
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;
185
css: The property that controls the indent of text is called
text-indent
186
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>
187
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%; } ```
188
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.
189
css: When using four numbers for the margin properties values, they associate with the sides
top, right, bottom, left
190
css: When using three numbers for the margin properties values, they associate with the sides
top, right/left, bottom
191
html: To make an -a> tag open the link in a new tag, type
target="_blank"
192
html: buttons are
tags, so you must put the label of it before a /button
193
css: To make a div it's own scrollable section, type
overflow: auto;
194
html: To make the form action point to the same URL as current with something appended,
do not start the action with a slash.
195
html: To make a form action url set the entire folder path and not just append,
start the path with a slash
196
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.
197
html: To make a link no follow, add the attribute
rel="nofollow"
198
css: To give the background two overlapping images, type
background: url(http://cdn.com/image1), url(http://cdn.com/image2);
199
css: when using background: url(http://cdn.com/image1), url(http://cdn.com/image2); the first image
shows up on top.
200
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
201
css: To preload two images, type
body:after{ display:none; content: url(http://cdn.com/image1.jpg) url(http://cdn.com/image2.jpg); }
202
html: To make a pop up that either confirms or cancels a link click, add the attribute
onclick="return confirm('string');"
203
html: To make a pop up that either confirms or cancels a form submit, add the attribute
onsubmit="return confirm('string');"
204
css: block type page elements
take up an entire line and create a new line above and below them
205
css: inline type page elements
fir inside their parent and only take the space they need.
206
css: The sections of the element box model are
content, padding, border, margin
207
css: To set the width of a border, type
border-width: 10px;
208
css: To set the style of a border, type
border-style: solid;
209
css: To set the color of a border, type
border-color: #ffffff;
210
css: To set the borders width, style and color in a shorter way, type
border: 10px solid #ffffff;
211
css: To set the height of a line, type
line-height: 1.2;
212
css: To set all the margins to be equal, type
margin: auto;
213
css: The most common display values are
none, block, inline, inline-block
214
css: set an element to display: none; will
make it take no space on the page and therefore disappear
215
css: The three main parts of responsive design are
fluid images, fluid grids, and media queries
216
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.
217
css: To set css for when a screen width is more than 480px, type
@media screen and (min-width: 480px) { | }
218
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.
219
css: To apply properties to an nth page element that matches the css selector, type
li:nth-child(3n) { | }
220
css: To make the background image of a div fill the whole container, type
background-size: cover;
221
css: To set the horizontal position of an element to not move, type
position: absolute;
222
css: To give a link a nice underline, type
text-decoration: none; | border-bottom: 2px solid #fff;
223
css: Sometimes to make a parent div contain its children divs within its height, you must type
position: relative
224
css: To set the border radius on just the top left corner, type
border-top-left-radius: 0.3em;
225
css: The four types of positions are
fixed, absolute, relative, static
226
css: To specify that the text in

elements will never wrap, type

white-space: nowrap;
227
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) { }
228
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
229
css: a shortcut in text editors to comment out highlighted text is
command slash
230
css: To convert all text to uppercase using css, type
text-transform: uppercase;
231
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)
232
css: In order to use z-index, you must
specify the position: of the elements being stacked BEFORE the z-index.
233
css: To blur an image, type
-webkit-filter: blur(5px);
234
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;
235
css: By default, html elements are positioned as
static
236
css: you can use the relative position property to
offset an element.
237
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
238
css: Setting the position to absolute
removes it from the documents flow and makes it be contained in it's parent div
239
css: z-index will not work on
elements with position: static; (which is the default)
240
css: To move an element with position: relative; above its top border, type
top: -10px;
241
css: The psuedo class for when an element is being clicked is
:active
242
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
243
html5: To add arbitrary attributes to html tags, you must
prefix the attribute name with "data-"
244
css: To allow only up and down scrolling in a div, add the property
overflow-y: auto;
245
bootstrap: To make the content stretch to the width of the entire page, use the div class
container-fluid
246
html: To make an image a link, just
surround it with a tags and set the href as an attribute of the a tag.
247
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; }
248
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
249
html: To create a meta description, type
-meta name="description" content="">
250
html: To create a title tag, type
-title>string-/title>
251
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.
252
html: To add a favicon to base.html, type
-link rel="shortcut icon" type="image/png" href="{% static "app_name/favicon.ico" %}"/>
253
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.
254
css: To make a flat button like levelsio you just
add a bottom border of slightly darker shade to a button
255
css: You must place the background-position: property
after the background: url() property so that the image is loaded after before you effect it.
256
css: to change the cursor a user has when over an element, use the property
cursor: url(http://path/image.png) auto
257
css: To easily make a div with an arrow, go to
http://cssarrowplease.com/
258
css/jquery: To unhide an element that has, display:none; type
$(".css-class").css("display", "initial");
259
jqueryui: always add the jqueryui import script
after the regular jquery import script.
260
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;
261
css: To eliminate the styling on a link, the two css selectors you must override are
a, a:hover
262
css: separating styles between pages is
necessary, so they do not compete with eachother
263
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; } ```
264
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%;
265
html: To refresh a page every set number of seconds, type
-meta http-equiv="Refresh" content="100">
266
html: You can set the height and width of an image using
html attributes. e.g. height="100" width="200"
267
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;
268
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">
269
css: for the background-position property, the options for the first and second arguments are
1st: left, right, center 2nd: top, bottom, center
270
html: To create a favicon from an image go to
http://www.favicon-generator.org/
271
html: the typical size of a favicon is
16x16
272
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
273
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">
274
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>
275
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
276
css: To improve the legibility of small text, add the property
text-rendering: optimizeLegibility;
277
css: To make the background of a div into a gradated color, type
background: linear-gradient(180deg, red, red, red, black);
278
html: Sometimes if your video tags aren't playing the video, ensure
the video is H.264 encoded
279
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
280
css: When setting widths and heights, opt for
using min and max rather than absolute
281
css: To make a container div adjust to contain its inner contents
use display: inline-block;
282
css: To increase or decrease space between letters, use
letter-spacing: 2px;
283
css: To change the font of an entire page
add an "add-font" class to the body tag and make the chosent font !important
284
javascript: To submit a file upload immediately after the user selects it, type
document.getElementById("my-id").onchange = function() { document.getElementById("my-id").submit(); };
285
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; } ```
286
bootstrap: To change the color of a glyphicon
color: blue;
287
html: To make a form field automatically have the cursor in it, add the attribute
autofocus
288
css: To select and element by any attribute and value, type
[data-attribute="value"] { }
289
css: To select and element by just the presence of a data attribute, type
[data-attribute] { }
290
css: A viewport is
the viewable area through the browser window
291
css: To set the height of an div relative to the viewport, type
height: 50vh
292
css: To set the width of an div relative to the viewport, type
width: 50vw
293
css: To make a div into a flexbox, type
display : flex; | flex-flow: row;
294
css: To use the full size of the browser viewport, type
``` body { margin: 0; padding: 0; height: 100vh; width: 100%; } ```
295
css: A flexbox is
a container element that makes everything inside it stretch out to fill it entirely
296
css: Some properties that make button text look better are
letter-spacing: 0.01em; text-transform: uppercase; font-weight: 700;
297
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; } ```
298
css: To make an element be aligned to the right side of a div instead of the left, type
float: right;
299
css: To make an element stretch out to fill its entire viewport container, type
flex: 1; display: flex; flex-direction: column; height: 100vh;
300
css: To center the content of a div with a flexbox, type
display: flex; justify-content: center; align-items: center;
301
css: To remove the blue border that shows when you click on a button or input field, type
outline: none;
302
html: To prevent the browser from auto suggesting values for input fields, type
autocomplete="off"
303
css: To style the label of a checkbox only if it is checked, type
input[type=checkbox]:checked + label { }
304
html: The same origin policy only applies to
javascript. A form can post to a different url.
305
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; } ```
306
css: To make the border of an input field invisible, type
border: 1px solid transparent;
307
css: Its best to set the fonts on
html, body {
308
bootstrap: To make the buttons in a button group stretch out to fill their outer div
give each one style="width:20%;"
309
bootstrap: To make a bootstrap button small, add the class
btn-sm
310
bootstrap: For free bootstrap themes go to
https://bootswatch.com/
311
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>
312
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
313
html: To return whatever is currently typed into a textarea use the property
.value
314
html: To tell the browser that your text is performatted, type
-pre>-/pre>
315
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
316
css: The order of the properties
does matter
317
css: To make the page render faster
move the style and script imports to before body end and minify them.
318
html: A data URI is
a base64 encoded string that represents a file
319
html: The format of a data URI is
data:[-MIME-type>][;charset=-encoding>][;base64],-data>
320
html: Data URIs can be used in
img src or css background: url()
321
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
322
css: To make a div cause its inner text to wrap, type
word-wrap: break-word;
323
html: When a form is also posting files, you must add the attribute
enctype="multipart/form-data"
324
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(); });
325
css: To import another stylesheet into a css file, type
@import url("https://fonts.googleapis.com/css?family=Roboto:300");
326
css: Some clean, unannoying sans serif fonts are
Lato, Roboto, Open Sans Source, Droid Sans, Source Sans Pro, Proxima Nova
327
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;
328
html: To disable a link hre from requesting, type
href="javascript:void(0);"
329
css: To rotate an element, type
- ms-transform: rotate(45deg); - webkit-transform: rotate(45deg) transform: rotate(45deg);
330
bootstrap: To make a dropdown menu align with the right side, use the class
dropdown-menu dropdown-menu-right
331
css: To allow for 3d animations, give the page a third dimension by typing
body { -webkit-perspective: 800px; }
332
css: If you flip over an element you will see
its back side, which is visible by defaut
333
css: To add css properties to the id set in the url e.g. site.com#css-id, type
.p:target { ... }
334
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);
335
html: To superscript from text, type
-sup>string-/sup>
336
css: To style back text that is above a black background so it is visible, type
background: #eee; padding: 5px; opacity: 0.7;
337
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)} }
338
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; } ```
339
css: Button text usually has increased
letter spacing
340
bootstrap: To make an element only visible on certain screen sizes, type
visible-md visible-sm
341
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.
342
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> - /div>
343
boostrap: To hide elements for certain screen sizes, use class
hidden-md | hidden-sm
344
bootstrap: To select the second p tag in every container div, type
.container p:nth-child(2n) { ... }
345
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
346
bootstrap: The bootstrap examples often
extend bootstrap, so make sure to copy the extension when mimicking
347
css: To make sure video backgrounds dont buffer,
keep them under 25 mb
348
css: Video streams
do not work on tablets or phones so hide them
349
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;
350
bootstrap: To eliminate the extra space on the right of the screen, add
.row { padding-right: 0px; margin-right: 0px; }
351
bootstrap: Bootstraps row class
add extra space to the right of the screen and must be extended .row { padding-right: 0px; margin-right: 0px; }
352
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
353
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;") } }) ```
354
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> - /div> - /div> $(".img-class").on("click", function(event) { $('#modal-img-tag').attr('src', $(event.target).attr('src')); $('#imagemodal').modal('show'); });
355
css: To append a string to the end a tag using css, type
tag:after { content: "string"; }
356
css: top: 10%; doesn't seems to
work on firefox, so just use px instead of %
357
css: To make an animation hold its last keyframe, type
animation-fill-mode: forwards; under where you choose the animation name and length
358
Graphic design: the best site background color is
White because it always feel bigger in an a/b with something else
359
Graphic design: Sometimes a div you put in a card
would look better on an open background instead
360
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()
361
html: To make a form submit from a new tab, type
target="_new"
362
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
363
css: divs with the name .container usually
have a max-width and are intended to contain the content in the center
364
css: to give an element multiple drop shadows, you can
comma separate them

freingt (64 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions