Instructor: So now that we've gotten
a introduction to HTML
I want you to put everything you've learned together
in order to create a new project.
So the project that we're gonna be building today
is called the Favourite Movie Project.
It's gonna be a website to keep track
of all of your favorite movies that you've watched.
When you go to rogerebert.com,
he is one of the greatest film critics of all time in fact.
He's passed away now,
but he's got movie reviews
and ratings for all the movies that he's watched.
And you can see that when you go to his website.
I think this is a really great way
of keeping track of what you've watched
because when friends ask me for recommendations
I can never remember
what it is that I've watched in this year
that I really like and what to recommend.
So what we're gonna be building today
is a very simple website.
It's going to be a website
that tracks your favorite movies,
maybe of all time, maybe of the last year,
whatever you wanna do.
And the requirement is you should have at least
three movies that you put in here.
So what you're gonna need is to create a h1
as the title of the website
and then you're gonna have an h2 as the subtitle
and then you're gonna have a horizontal rule
as your void element in there.
And then you're gonna have three movies
that you're gonna list
and they're all gonna be created using the h3 element.
And then finally, you should have a section,
which is going to be a paragraph element
that's going to describe why you liked those movies.
And this is basically a very simple format for this website.
Now, feel free once you've done all of this
to continue to mod this website, to change it up,
to add things, to add break elements,
whatever it is you wanna do.
But at the minimum,
I want to see all of these elements represented on a page.
And of course, feel free to add your own movies.
And I would love to see in the Q and A a picture
of your website to see what it is that are your top movies.
And maybe I'll get some inspiration
till the next time when I have movie night
and I can't figure out what to watch.
So I'm curious to see your recommendations as well.
So go ahead and download the movie ranking project zip file
from this lesson's course resources.
If you don't know how to do that, again
go back to one of the first videos in the course
at the very beginning of section one,
where I showed you in a video
how to download course resources.
And once you've unzipped it and extracted it
then open it up in VS code
and go ahead and code
to your heart's content using everything you've learned.
Pause the video now and give that a go.
Now let's go through the solution.
In my case, I'm going to have an h1 at the top,
which is going to be the title.
Top movies of all time according to Angela.
And then afterwards,
I'm going to create a subtitle,
which I will write my best three movies.
And then after that
we were going to add a horizontal rule to separate this part
from the actual content of our website.
And I'm gonna create an h3
to represent each of the movies I'm gonna recommend.
So I'm gonna recommend "Spirited Away",
which is one of my favorite animes.
And I'm gonna use a paragraph tag
to describe a little bit about why I like it.
So I'm just gonna call it favorite anime.
And then the next movie will be "Ex Machina".
And I really liked it
because it's a really cool sci-fi movie.
And then finally the third one
is going to be the movie "Drive" with Ryan Gosling
because it was really beautifully shot.
Cool.
This is the basics of what you would need
to have done for this project.
It has all of the elements that were required.
And you can see in the goal PNG
that it's got all the things that we've described.
Even if the text is a little bit different,
of course it won't be according to Angela for you.
It'll be according to your name.
And now that you've done that
feel free to add different things in here as you would want.
Maybe add a bit more to the paragraph tags,
maybe add a poem about your favorite movie.
Go crazy.
Try out things and share
in the Q and A your project as a screenshot.
If you don't know how to do a screenshot
be sure to be sure to type that into Google.
"How do I create a screenshot?"
And then you can add it into the Q and A.
We can all look at your favorite movies and be inspired.
So I hope you enjoyed building the project together,
and in the next section
we're going to dive a little bit deeper
into some more intermediate aspects of HTML.
So for all of that and more,
I'll see you there.