Hyperlinks
What are hyperlinks?
Hyperlinks can connect to local web pages or external web pages.
What is the code to add an image called "Mets.jpeg" in HTML?
The <img src="Mets.jpeg" alt="Mets">
<p class="intro">
What is the first property you need in CSS to use flex in your website?
display: flex;
What is the 4 step process to problem solving that we use in class?
Define, plan, try, reflect
How do I add a hyperlink for "mets.html" when I click on the word "Mets"?
<a href="mets.html">Mets</a>
Does an image have a closing tag?
No
What is the code in CSS to make text in a class called "intro" pink?
.intro {
color: pink;'
}
What does this code do in HTML?
<div class="title">
<h1>The Planets Gallery</h1>
</div>
Creates a section in your website that can be styled differntly than all other sections.
What is something that we do when we "define"?
read directions; understand what we are trying to accomplish
How do I make an image called "mets.jpeg" go to a page called "lindor.html"?
<a href="lindor.html"> <src="lindor.jpeg" alt="Lindor"></a>
What does alt mean in the image tag?
Alt is a description of the picture in case the picture does not render.
What is the bug in this class code for "top-img"?
.top img {
color: pink;
}
top-img does not have a hyphen.
What does this code do?
.mercury {
order: 1;
}
Changes the order of images.
What is something we do when we plan?
draw a sketch of what we want to create; look around for ideas
What is the code to make the hyperlink turn pink when you hover over it?
a: hover{
color: pink;
}
What is the CSS code to make your images centered without Flexbox?
img {
float: center;
}
What is the "p" called in this code?
p{
color: pink;
}
Selector
What does this CSS code do?
.final-info > p {
margin: 5px;
width: 20%;
}
Makes the paragraphs only inside of a .final-info div have a margin and a smaller column width.
During the "try" stage, what is a website that we can use that can gives us a list of all the tags we could ever want to help us expand our hoizons?
What is the order you have to code psuedo-classes in?
link, visited, hover, active
img {
border-style: dotted;
}
What is the "color" called in this code?
p{
color: pink;
}
Property
Write the css code for a div with a class called "image-container" to make all the images in that section in the horizontal center with padding around each picture of exactly 20 pixels.
.image-container {
justify-content: center;
padding: 20px;
}
What do we do when we "reflect" on our work?
ask how others did or ask how we can improve