This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Add CSS File" Lesson
[00:00:00]
>> Brian Holt: So we're gonna save that, we have this index.html file, right? So I'm gonna head over to my favorite browser, which happens to be Firefox,
>> Brian Holt: And I'm going to open this. So if you're on a Mac, you can hit File > Open > Open File right here, or Cmd+O.
[00:00:21] Okay, so let's do that. We're gonna open this with, I put it in temp, I think, fem > src > index.html.
>> Brian Holt: So you can see here, I see not rendered. Which is what we expect, right? We actually haven't put any code on the page yet, so this is what we expect to see so far.
[00:00:48] Okay, last thing here that I want you to do is, we're going to, I wrote all the CSS for this project, so that you do not have to. You're welcome. [LAUGH] This is definitely not a CSS workshop. There are other Frontend Masters courses that are from people like Estelle that know CSS way, way better than I do.
[00:01:09] So listen to them, don't listen to me. But if you come back to our website here, you can see where it says, Download it here. If I open that, you can see here, it's just a lot of CSS. So I'm just gonna Cmd+S, save that file into my same source directory.
[00:01:32] So let's find temp again. fem > src, so in the src directory, I'm gonna save this style.css file.
>> Brian Holt: Okay, so now I'm gonna go back over to my editor, and I am just going to put a link tag here in the head, link.
>> Brian Holt: Then, I'm going to put ./style.css.
[00:02:08]
>> Brian Holt: And again, I can Cmd-click on that. It'll open it so I can, that's the correct path.
>> Brian Holt: So we just added this one right here.
>> Brian Holt: Probably makes it harder to read.
>> Brian Holt: Okay, cool.
>> Brian Holt: So now if we go back over to the Adopt Me page, your background should be red.
[00:02:39]
>> Brian Holt: But you can still see up here, it's really small, but it says not rendered in the top left. So it's loading the CSS, but it's not really executing any JavaScript yet.
>> Brian Holt: In fact, you can even see it. If you open your console here, let's make this a little bit bigger.
[00:02:58]
>> Brian Holt: You can see down here at the bottom. If I say, React, you can see that it actually is loading React from the CDN. And the same thing with ReactDOM. It's also loading ReactDOM from the CDN based on those two script tags that we included, right?