Rendering a Page Solution

[00:00:00]
>> Richard Feldman: Let's go through the exercise. So we have a couple of to-dos here. First one is, add a logo and a tagline to this banner so that its structure becomes like this. Okay, so we've already got some parts of this structure present. We've got the banner, we've got the container.

[00:00:14]
What we're missing is these two things in the middle here. So there's this thing that says, TODO put the <h1> here instead of this text</h1> then add the P rate after the H1. So here's what those look like in HTML. And we can see that they're gonna end looking pretty similar in Elm.

[00:00:30]
Let's make a couple of tweaks to convert them to HTML to Elm function calls. So we got an h1, with a class of logo-font. And then inside of that we have one text note that just says conduit. And that is it for our h1, just gonna put that right there.

[00:00:50]
And then below that we wanna have this paragraph tag, so that's just gonna be a function called P and there are no attributes to the paragraph tag. But there is one child node, a place to share your knowledge.
>> Richard Feldman: Okay, so that's it for those two. We do need a closing tag here for the, oops sorry we already have one.

[00:01:14]
The closing tag for that. And once we see this sort of vertical column here, something that'll become like muscle memory is realising wait, there should be a comma there. So let's delete this whole big comment. We can kinda see the final structure here. Let's make sure that this actually works by going over to our terminal, and we also need text with all the text nodes.

[00:01:38]
There we go, okay. So let's take a look at that in the browser. So at this point, you notice that everything looks exactly the same as before. So why is that? We made the change, but there's nothing actually showing up differently in the browser. Well, the reason for that is that in Elm everything starts with main.

[00:01:55]
So all that's going to happen is if we change something in main here. So before the fact that we did this banner, or in fact, any changes that we might make to this feed in here, are going to have any effect, we need to actually reference them from somewhere inside main.

[00:02:09]
So that's where this other TODO comes in. It says replace this div with the banner. So we're gonna completely delete that div and replace it with just banner. And so now what Elm gets here, it's going to say I'm gonna drop in that value that we defined up here right into there.

[00:02:23]
So recompile it, go back to the browser, and now we actually see, conduit, a place to share your knowledge. And we can mess with this and say, your funky Elm knowledge. And we compile, we can see now I've got some funky Elm knowledge going on in there. Worth noting that, effectively, what we've done here is, we've just separated these out so that it's in a different place in the file.

[00:02:49]
But we could have just as easily in-lined it. We could put that in there and that would work just as well as what we did previously, exactly the same output. So essentially all we've done is put this somewhere else and given it a name. But there's no difference between putting the one in one place or in-lining it in the other place.

[00:03:09]
Either way will work exactly as well as the other.