HTML, CSS, and Git
Which of the following must be done in order to use `git init`?
You must be in your project folder when you run `git init`
"Which attribute selector would you use if you wanted to target all <a> elements that have an href value that ends with '.png' to change the color? What would this look like in style.css?"
a[href$='.png']{ color: green }
How would you create a box with rounded corners using CSS?
border-radius: 50px;
Which of the following is not a component of the box model?
dispay
Which of the following is a good example of a font stack?
font-family: "Trebuchet MS", Verdana, sans-serif;
the command you must run before 'git commit'
git add
Creates a new Git repository
git init
How would I check which files are staged, unstaged, and untracked using git commands?
git status
Tells you what has changed since the last commit.
git status
When using flexbox, which property needs to be adjusted in order to add space between items?
justify-content
What CSS declaration could you add to `<div style="width: 50%;">` to center it?
margin: 0 auto
Which of the following is a true statement about pseudo-elements and pseudo-classes?
pseudo-elements start with a double colon (::) and pseudo-classes start with a single colon (:)
What is the command we use to create a new file?
touch
What are the advantages of external style sheets?
- Classes can be reused in multiple style sheets and HTML documents. - You can control multiple styles from one source of truth (i.e., one CSS document).
Where can styles be defined?
- Inline—used to style only a small piece of code: - Embedded—style sheets are put inside the <head> element in between the <style> tags. - External—style rules are defined in a separate file and linked from the HTML file
How could you use pseudo-elements to display the message, 'Thanks for checking the box!', after a user clicks on a check box?
.checkbox:checked + label::after { content: "Thanks for checking the box!"; }
Which user-action pseudo-class would you need to add in order to change an element when the mouse is over it?
:hover
How do you declare a custom property or 'CSS variable'?
:root { --my-color: green; }
Given the following CSS selector, which HTML element would be the outermost/parent element?header nav ul li {color: white;}
<header>
When creating a form with HTML, which of the following is not typically used?
<header> for the title of the form
What is wireframing?
A blueprint of our website's page layout.
What is a media query?
A feature of CSS3 allowing content rendering to adapt to different conditions such as screen resolution
What is a selector, and what are the different types of selectors you can use?
A selector is used to select an element and apply styles to it. - Class: .someClass { color: red } - ID: #someId { color: red } - Type: p{ color: red } - Attribute: p[href="https://myportfolio.com"] { color: red } - Pseudo-class: div:first-child { color: red } - Pseudo-element: div::after { height: 300px; }
What are HTML semantic elements?
A semantic element clearly describes its meaning to both the browser and the developer.
What is a CSS reset?
A stylesheet that clears the default formatting of the browser
How do you add a message to a git commit?
Add -m "message" at the end of the 'git commit'
A client wants to make sure that the browser has multiple fonts to choose from, just in case the default font isn't supported. How would you make sure that the default font is set to "Arial", but that there are also two other fonts available to the browser?
Assign multiple fonts to the font-family property
What is one advantage of Responsive Design for a developer?
Faster development
What are the steps to create a new remote repository and then connect it to our local machine?
First, we create a new repository with a new README file on GitHub. Then, we select the HTTPS or SSH option to copy the URL to clone the repository. Last, we use the git command 'git clone' followed by the URL we copied on our local machine.
When developing a user interface, all are important except...
Focusing on building a strong backend
Which of the following statements are NOT true?
Inline elements automatically start a new line.
How is Flexbox related to mobile-first design?
The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size (or device).
What is the purpose of the `alt` attribute for images?
To provide context for the images in the cases where they are not observable, either due to an accessibility challenge or a broken link.
When adding color to your HTML elements, which is more encouraged: using hex codes or predetermined color names?
Using a hex code is better because it allows you to get a more specific color and have more control over your design.
