Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Development with Python and Javascript > HTML/SASS > Flashcards

HTML/SASS Flashcards

1
Q

Document Object Model

A

Tree-likes structure of HTML Web Page

Ex: Root is < html > having two children < head > and and < body > so on

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

HTML Tag

A

Pair of open/end

Ex: < html > < / html>

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

HTML Attribute

A

Addition about some structure or info of HTML Tag

Ex: < html lang = “en” > < div class = “general” >

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

< head > and < body >

A

< head > contains infomation for web browser
Ex: having < title > and < script > < href > tags

contains what to show to user

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

Basic HTML structure

A 
< !DOCTYPE html >
< html >
   < head >
      < title > Hello! < / title >
   < / head >
   < body >
      < h1 > Hello World < / h1 >
      < p > Nice to meet you < / p >
   < / body >
< / html >
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

HTML Lists

A 
< ul > or < ol >
   < li > 1st < / li >
   < li > 2nd < / li >
   < li > 3rd < / li >
< / ul > or < / ol >
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

HTML Images

A

< / img src=”Link of images” alt=”Alternate text if cannot display the image properly” >

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

HTML Link

A

< a href = “Destination Web (Absolute URL or relative URL) > Text to display (Ex: “Click Here”) < / a >

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

HTML Table

A

< table >

   < thead >  Name for each columns / feature of table
      < tr >   
         < th > Ocean Name < / th >
         < th > Average Depth < / th >
         < th > Maximum Depth < / th > 
      < / tr >
   < / thead >
   < tbody >
      < tr >    Each tr occupy one columns in table
         < td > Pacific Ocean < / td >
         < td > 4,654m < / td >
         < td > 8,567m < / td > 
      < / tr >
      < tr >
         < td > Alantic Ocean < / td >
         < td > 2,424m < / td >    Each td is a data cell
         < td > 6,224m < / td > 
      < / tr >
   < / tbody >
 < / table >
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

HTML Form

A

HTML < form > contains some < input > for user to interact
Attributes for < input >:
- type = “” : represent the way user input data input that input tag. Some examples: “text” for text, “password” for text but hidden, multiple “radio” < input > tag for multiple choice
- placeholder = “initial text show in text box input”
- name = “ref name” : An attribute saves a unique name for that input tags later serves as an reference names for Web Application to be able to pick and handle information from that input tags.
- value = “value” : the result of user input that Web App receive, using in tags that not text (radio)
- list = “list name” : new HTML5 feature able to scroll for a list, shrink down into correct option when types in

Web App use “name” to get input tags, and take value from “value” attribute

< form >
< div >
< input name=”username” type=”text” placeholder=”Your Name” >
< input name=”password” type=”password” placeholder=”Password” >
< / div >
< div >
Favorite Colors ? Four input tags same name attribute serve as one input in Web apps
< input name=”color” type=”radio” value=”red” >
< input name=”color” type=”radio” value=”green” >
< input name=”color” type=”radio” value=”yellow” >
< input name=”color” type=”radio” value=”blue” >
< / div >
< div >
< input name=”country” list=”countries” placeholder=”Country” >
< datalist id=”countries” >
< option value=”Murica” >
< option value=”French Fries” >
…
< / div >
< / form >

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

HTML Link

A

Link tag use for link this HTML file with other files by some relationship specified by “rel” attribute:
Ex: < link rel=”stylesheet” href=”styles.css” >
The HTML file is linking to styles.css file (href for the targeted file for linking to) with a relationship of a stylesheet meaning the file that linked will specify the style for this HTML.

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

External CSS

A 
styles.css:
h1 {
   color: blue;
   text-align: center;
}
index.html:
< !DOCTYPE html >
< html >
   < head >
      < title > Hello! < / title >
      < link rel="stylesheet" href="styles.css" >
   < / head >
   < body >
      < h1 > Hello World < / h1 >
      < h1 > This is TITLES < / h1 >
      < p > Nice to meet you < / p >
   < / body >
< / html >
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Internal CSS

A 
< !DOCTYPE html >
< html >
   < head >
      < title > Hello! < / title >
      < style >
         h1 {
            color: blue;
            text-align: center;
         }
         div {
            background-color: green;
            width: 400px;
            height: 100px;
      < / style >
   < / head >
   < body >
      < div >
         < h1 > Hello World < / h1 >
         < h1 > This is TITLES < / h1 >
         < p > Nice to meet you < / p >
      < / div >
   < / body >
< / html >
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

CSS Padding Margin

A

Padding adjusts how far the tag’s children element from its border (space out distance inside)
Margin adjusts how far the tag border from its parent or its siblings element (space out distance outside)

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

CSS Table Example

A 
table {
   border: 1px solid black;
   border-collapse: collapse;
td, th { 
   border: 1px solid black;
   padding: 5px;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

CSS Id, Class

A 
Id is an unique name given only for one HTML element for CSS reference
Class is a name can be given to multiple HTML element so CSS can style all of them within the same class similarly
Ex: < html >
   < head >
      < title > Titles < / titles >
      < style >
         #NameID {
            color: green;
         }
         .NameClass {
            color: blue;
         }
      < / style >
   < / head >
   < body >
      < h1 = id="NameID" > heading 1 < / h1 >
      < h1 class="NameClass" > heading 2 < / h1 >
      < h1 class="NameClass" > heading 3 < / h1 >
      < h1 > heading 4 < / h1 >
   < / body >
< / html >
17
Q

CSS Specificity

A

Having multiple CSS selectors could apply to the same HTML elements, have to specify one. Order of specificity:

1) Inline: put a style=”CSS_code” directly into a HTML element so highest priority, always follow inline CSS.
2) id: prioritize for uniqueness id specification
3) class: group of specific HTML element
4) type: specify by HTML type (h1, div, img,…)

18
Q

CSS Identifying Elements

A

Using: < div > < / div >, < span >, id = “” and class = “”

19
Q

CSS Selectors

A
  • Mutiple Selector: a, b {} styling both a and b
  • Descendant Selector: a b {} only style b if b is a’s descendant
  • Child Selector: a > b {} only style b if b is a’s direct child
  • Adjacent Siblings Selector: a + b {}
  • Attribute Selector: [ a=b ] {}
  • Pseudo Class Selector: a:b {} the styling for element “a” when on style “b”C
  • Pseudo Element Selector: a::b {}
20
Q

CSS Attribute Selector

A

selectors[attribute=”info”;] {}
Style only elements that has the same selector and satisfy the attribute info

< html >
< head >
< title > Titles < / titles >
< style >
a[href=”www.facebook.com”] {only “Facebook” on red
color: red;
}
< / style >
< / head >
< body >
<a> Google < / a >
</a><a> Facebook < / a >
</a><a> Amazon < / a >
< / body >
< / html ></a>

21
Q

CSS Pseudo Class Selector Example

A 
< html >
   < head >
      < title > Titles < / titles >
      < style >
         button {
            background-color: green;
            padding: 20px;
         }
         / Pseudo Class: only modified or add some styling, keeps the style of original class as much as possible /
         button:hover {
            background-color: orange;
         }
      < / style >
   < / head >
   < body >
      < button > Click me < / button >
   < / body >
< / html >
22
Q

Responsive Design

A

Use CSS property to change styling depends on how web pages are rendered (Ex: render on computer or phone, render with more or less 600px width). 4 types of responsive design:

  • viewport
  • @media
  • flexbox
  • grid
23
Q

CSS viewport

A

Control the info of the web browser property to affect CSS styling choice, for example change with to fit device width, then CSS media will render by the given width
< head >
/ Adding metadata to head of web page /
< meta name=”viewport” content =”width=device-width, initial-scale=1.0” >
< / head >

24
Q

CSS @media

A 
Control stylings of web page depends on how the web pages is rendered, what is current screensize the web browser, ...
Ex: < style >
   @media (min-width: 600px) {
      body {
         background-color: red;
      }
   }
   @media (max-width: 599px) {
      body {
         background-color: blue;
      }
   }
< / style >
25
Q

CSS Flexbox

A

Special layout type of CSS “display” properties that support some responsiveness (Ex: wrap-arround content to another line when broswer width is shrunk)
Ex: < head >
< title > Hello! < / title >
< style >
#container {
display: flex; / Calling flexbox display property, this element will be flexbox container /
flex-wrap: wrap;
}
#container > div {
background-color: red;
font-size: 20px;
padding: 20px;
margin: 20px;
width: 200px;
}
< / style >
< / head >
< body >
< div id=”container” >
< div > 1. Some example content < /div >
< div > 2. Some example content < /div >
< div > 3. Some example content < /div >
< div > 4. Some example content < /div >
< div > 5. Some example content < /div >
< div > 6. Some example content < /div >
< / body >

26
Q

CSS Grid

A

Special layout type of CSS “display” properties for arrange things in particular grid, certain columns or rows needs to be in certain width or height while others can be flexible

Ex: < head >
< title > Hello! < / title >
< style >
#grid {
padding: 20px;
display: flex; / Calling grid display property, this element will be grid container /
/ Some important grid property /
grid-column-gap: 20px;
grid-row-gap: 20px;
grid-template-columns: 200 auto 200; / Most important specify how many columns and how wide should each columns be /
}
#container > div {
background-color: red;
font-size: 20px;
padding: 20px;
margin: 20px;
width: 200px;
}
< / style >
< / head >
< body >
< div id=”grid” >
< div class=”grid-item” > 1. Some example content < /div >
< div class=”grid-item” > 2. Some example content < /div >
< div class=”grid-item” > 3. Some example content < /div >
< div class=”grid-item” > 4. Some example content < /div >
< div class=”grid-item” > 5. Some example content < /div >
< div class=”grid-item” > 6. Some example content < /div >
< / body >

27
Q

CSS Bootstrap

A

Pre-written CSS styling code as external link file, just link to bootstrap URL with href and rel=”stylesheet” and then your page will be styled by someone else code.
Then apply pre-written class-name given in Bootstrap documentation so that Bootstrap will handle the styling of particular element.
< head >
< link rel=”stylesheet” href=”bootstrap_lib_urls” >
< / head >
< body >
< h1 > Heading < / h1 > / This text style will be changed a bit by Bootstrap /
/ This button class “btn …” is pre-written by Bootstrap, so just apply to element and use /
Primary
< / body >

28
Q

Bootstrap Columns Unit

A

Bootstrap automatically divide web page into 12 columns parts, elements can occupy some of that 12 columns
< head >
< link rel=”stylesheet” href=”bootstrap_lib_urls” >
< style >
.row > div {
padding: 20px;
background-color: teal;
border: 2px solid black;
}
< / style >
< / head >
< body >
< div class=”containter” > / class=”col-3” means the element width will adjust to fill 3 in 12 columns that set by Bootstrap /
< div class = “row” >
< div class=”col-3” > This is an section < / div >
< div class=”col-3” > This is an section < / div >
< div class=”col-3” > This is an section < / div >
< div class=”col-3” > This is an section < / div >
< / div >
< / div >
< / body >

29
Q

Bootstrap Columns Unit Responsive

A

< head >
< link rel=”stylesheet” href=”bootstrap_lib_urls” >
< style >
.row > div {
padding: 20px;
background-color: teal;
border: 2px solid black;
}
< / style >
< / head >
< body >
< div class=”containter” > / class=”col-lg-3 col-sm-6” means the element width will adjust to fill 3 in 12 columns
when browser width is higher than an default figure and change to 6 in 12 columns when the browser shrink /
< div class = “row” >
< div class=”col-lg-3 col-sm-6” > This is an section < / div >
< div class=”col-lg-3 col-sm-6” > This is an section < / div >
< div class=”col-lg-3 col-sm-6” > This is an section < / div >
< div class=”col-lg-3 col-sm-6” > This is an section < / div >
< / div >
< / div >
< / body >

30
Q

Sass

A 
CSS extension gives ability to factors out similarity of properties by using variable and ability to nesting CSS element for nicer syntax original CSS like a:b, a > b
Ex: In variable.scss
/ variable starts with $ sign /
$color = blue;
ul {
   font-size: 16px;
   color: $color;
}
ol {
   font-size: 20px;
   color: $color;
}
31
Q

Sass compilation

A

Sass cannot linked to by HTML link since browser not understanding Sass. HTML file links to the raw CSS compiled from Sass using command:
“sass variable.scss:variable.css”
Automatic compilation:
“sass –watch variable.scss:variable.css”

32
Q

Sass Nesting

A 
Nesting CSS elements inside one CSS element showing descendant relationship. Ex:
In nesting.scss:
$color = blue;
div {
   font-size: 18px;
   ul {
      font-size: 16px;
      color: $color;
   }
   ol {
      font-size: 20px;
      color: $color;
   }
}
Compile into nesting.css:   
div {
   font-size: 18px;
}                                     [a b] means b descends from a
   div ul {
      font-size: 16px;
      color: blue;
   }
   div ol {
      font-size: 20px;
      color: blue;
   }
33
Q

Sass Inheritance

A 
Generic class starts with %, an template CSS elements that can be later extended to create an true CSS element, ex:
In inheritance.scss:
%message {
   font-family: san-serif;
   font-size: 18px; 
   font-weight: bold;
   border: 1px solid black;
   padding: 20px;
   margin: 20px;
}
/ success message block styling /
.success {
   @extend %message;
   backgorund-color: green;
}
/ warning message block styling /
.warning {
   @extend %message;
   backgorund-color: yellow;
}
/ error message block styling /
.error {
   @extend %message;
   backgorund-color: red;
}
Compile into inheritance.css:
.success .warning .error {
   font-family: san-serif;
   font-size: 18px; 
   font-weight: bold;
   border: 1px solid black;
   padding: 20px;
   margin: 20px;
}
.success {
   background-color: green;
}
.warning {
   background-color: yellow;
}
.error {
   background-color: red;
}
34
Q

HTML element multiple CSS styling

A

Ex: < div > element defined simutaneously by 2 class .btn and .btn-light with id=”form-btn”
< div class=”btn btn-light” id =”from-btn” > Submit < / div >

Web Development with Python and Javascript (6 decks)

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