The following are links to additional questions that our community has asked about this exercise:
This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!
Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon () in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post ().
When changing the li elements to tomato in the video why wasn’t the following CSS code used. Seems repetitive to do it twice or am I missing something?
In this exercise, we saw that <div> was used to organize the content of the webpage. Wouldn’t it be better to replace <div class="content"> with <main class="content"> and further modify the example to reflect the proper semantics? I also noticed <div class="image"> and <p> used in place of <figure> and <figcaption>, among other things.
I imagine this was for demonstrative purposes, but I felt it was worth mentioning.
I’ve seen that a lot on Codecademy. Something tells me these courses were made before all the new HTML tags came out and the courses just haven’t been fully updated
I was trying to follow along the video tutorial at in this lesson I know its optional but I ran into a problem I couldn’t figure out. I have my index.html and my style.css in the same folder (basically Desktop/html/projectname) but when I try to link them together it seems to have no effect I’m using the correct syntax and everything I’ve checked all the possible typos and syntax but it doesn’t seem to even want to try to load. Is this due to the fact I’m trying to run this off of my machine? if so how can I circumvent this issue I’d like to be able to do testing and projects outside the code academy environment.
In the review of the lesson we can read the following:
CSS can make an element transparent with the opacity property.
CSS can also set the background of an element to an image with the background-image property.
Is this true? We can only make an element transparent using CCS? HTML is not able to perform this task at all? The same goes for the backgroung-image element.
Does anybody know what program is being used in conjunction with the css styling sheet in the video? Maybe it was mentioned, but I must have missed it. Just want to know how in the video when she types in color types for it gives a sample of what the color looks like. For example, when she types in tomato, there’s a ‘tomato’ colored icon to the left of it so it makes it easier to see what will be rendered.
What is the difference between background and background-color? Why is it simply background here?
body {
background: #141E30;
}
And do I understand correctly that these three declarations result in three slightly different colors? Otherwise, I don’t see why would one include those two extra declarations instead of sticking with the one that has the broadest browser support
I noticed that the course material only includes one font when declaring a font-family. In the video at 4:45, Aubrey states that a browser will automatically replace a font with its font-type if the font is unavailable (ie. serif or sans-serif.) In the past, I have been instructed to include three fonts within a font-family declaration:
Desired font.
Alternative font in the case the first choice is not available.
Serif or sans-serif in the case the first and second are both unavailable.
.p1 {
font-family: “Times New Roman”, Times, serif;
}
Can you tell me what the common practice is today? Do people still include serif and sans-serif as the third option? Additionally, if the browser will default to this, would there be value in listing three specific fonts instead?
The type attribute is optional for the <link> element when it is used to link to external stylesheets, and its inclusion is not required for modern web browsers. The default value for the type attribute when it’s not explicitly specified is assumed to be “text/css.”
In the case of Google Fonts, the omission of type="text/css" in the <link> element is intentional and consistent with modern best practices. The HTML5 specification and browser behavior allow for this simplification.
Both of these tasks that you’ve mentioned are part of CSS and not HTML. Note that CSS (Cascading Style Sheet) is intended for styling whilst HTML (HyperText Markup Language) is intended to provide a strutucre to our document. Changing the transparency of a container and adding a background image are considered as styling as the structure has already been defined as containers which store the background image. Anyhow, in HTML, you can indeed use the <figure> or <img> element to insert an image, but that image is more logically to be considered as part of the main content flow instead of being a background image to beautify the web-page.
The practice of specifying multiple fonts in a font-family declaration, including a desired font, an alternative font, and a generic font family (like serif or sans-serif), is still relevant today. Including fallback fonts is a good practice to ensure that your text remains readable even if the preferred fonts are not available on the user’s device.
The common practice is to list specific fonts first, then more generic font families as fallbacks. Here’s a typical example:
body {
font-family: "Your Preferred Font", "Alternative Font", serif;
}
“Your Preferred Font”: This is your first choice, and the browser will use it if available.
“Alternative Font”: This is an alternative in case the first choice is not available.
serif: If both the preferred and alternative fonts are unavailable, the browser will default to a generic serif font.
) to an existing thread!
) to up-vote the contribution!
) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (