HTML and CSS Fundamentals
This element allows us to create links to other web pages (or even to other areas within our own web page). You will always see this element used with the href attribute to tell the browser what address you want the link to point to.
What is the a tag?
<a href="http://www.lambdaschool.com">Here is a link!</a>
In JavaScript, this is a way to store the value of something to use later
What are variables
>, >=, <, <=, ===, !-- are all examples of what.
What are comparison operators.
Given the following CSS and HTML, what would the color of the <div> element be?
.red{
background: red;
}
#blue{
background: blue;
}
<div class = "red" id ="blue">
<p>blue</p>
</div>
Blue
reason: rule of specificity. Id attributes are considered to be more specific than a class attribute.
storage containers for collections of data in list form
What are arrays
This element will display an image on the screen. It will always have an ‘src’ attribute which points to the address of the image to be displayed.
What is img?
<img src="https://picsum.photos/500/300" />
What would you see in the console when the following commands are executed?
let add = "1" + "1"
console.log(add)
11
What is the difference between == and ===?
(What is) == checks that values are the same, regardless of type, === checks that values are identical, including type.
Which element(s) would the following CSS refer to?
div, .red {
padding: 3%;
}
<div class ="div1">
<p class ="red" id="p1">Hello world</p>
<p class ="blue" id="p2">Hello world</p>
<div>
<div id="div2">
<p class="blue" id="p3">Hello world</p>
</div>
div1, div2, p1
reason: a comma between 2 selectors means "choose this one, and this one too". In this case, it says select the div as well as any elements with the class of "red".
const potterFriends = ['Ron', 'Hermione', 'Neville', 'Luna', 'Dobby', 'Hagrid', 'Firenze', 'Lupin']
console.log(potterFriends.length);
What would be logged in the above console.log
8
This element represents an “unordered list”. This is the parent element and will contain list items.
What is ul?
<ul>
<li>List item One</li>
<li>List item Two</li>
<li>List item Three</li>
</ul>
This is the ES6 variable keyword for variables that can be changed or reassigned.
What is let?
What are the two main logical operators?
What are || (or) and && (and)
What is the main issue with this HTML? (hint: how and when should we use an h1 element?)
<h1>Hello World</h1>
<h1>Hello Again</h1>
<h1>Hello Once More </h1>
<h2>Hi<h2>
You shouldn't use more than one h1 element.
const potterFriends = ['Ron', 'Hermione', 'Neville', 'Luna', 'Dobby', 'Hagrid', 'Firenze', 'Lupin']
console.log(potterFriends[0]);
what would be logged by this console.log?
What is 'Ron'
How do you select an element that has a class named "class-selector"?
.class-selector
This is the ES6 variable keyword for variables that cannot be changed or reassigned.
What is const
This will be the value of x after this if else statement runs?
if (1+1 === 2) {
let x = 10;
} else {
let x = 5
}
What is 10
what would the following CSS select and what would be the result?
div .red:hover {
color: purple
}
selects all elements with the class of "red" inside a div. On hover, the color of the text would be purple.
const potterFriends = ['Ron', 'Hermione', 'Neville', 'Luna', 'Dobby', 'Hagrid', 'Firenze', 'Lupin']
console.log(potterFriends[potterFriends.length - 1]);
what would be logged by this console.log?
'Lupin'
How do you select an element that has an id named "id-selector"?
These are the 3 primitive data types
What are String, Number, and Boolean
What will be shown in the console if the following commands are executed?
if(1 + 1 === 2 || 1 + 2 === 3){
console.log("yasss")
} else if (1 + 2 === 3 && 1+2 ===3){
console.log("noooo")
} else {
console.log("Berries and cream, berries and cream, I'm a little lad who loves berries aaaand cccreeeeeaaaam")
}
"yasss"
<div>
<div><h1>This is the title of an article</h1></div>
<p>This is the main text of an article</p>
</div>
change the 1st div to <article>, the second div to <title> and the paragraph to <main>
const potterFriends = ['Ron', 'Hermione', 'Neville', 'Luna', 'Dobby', 'Hagrid', 'Firenze', 'Lupin']
potterFriends.push('Winky');
potterFriends.pop();
potterFriends.unshift('Ron');
potterFriends.push('Griphook');
console.log(potterFriends.length);
what would be logged by this console.log?
What is 10?