SPEAKER: Let's now take all of the concepts we've been learning
and put them into practice.
In the first assignment that you'll do for the web track,
the assignment you'll implement it's called homepage,
where your task is going to be to create a website about yourself, about one
of your interests, or really any other topic that you would like.
It's very open-ended and very up to you to decide what
you'd like your homepage to be about.
But ultimately, what you're going to use in order to create your homepage
are these three languages.
First, HTML, HyperText Markup Language, that language
we used to describe the structure of the web page.
In other words, what makes up that web page,
whether that be some combination of headings and paragraphs and images
or tables and lists or more.
Then we'll use CSS, Cascading Style Sheets,
the language that allows us to decide how particular elements on our page
are going to be styled.
What color they're going to be, whether there's
going to be a border around them, what the spacing
between elements are, or any number of other style related
properties of our page.
And finally, we'll add a little bit of JavaScript
in order to make our web page a little bit more interactive in order
to actually write some code so that the user can interact with the web page
that we're ultimately going to create.
So let's take a look at these steps one at a time.
The first thing that you'll want to do is create at least four different HTML
pages that make up your website.
We started you off with one page, index.html,
but you'll want to create at least three more.
And in particular, these pages can be about whatever you want,
so long as they're related to each other.
But you should be able to get to any of the other pages from any page
that you begin with.
So if you start at index.html, I should be
able to get to any of the other HTML pages in your website.
And from any of the other pages in your website,
I should, eventually, as by clicking on one or more links,
be able to get back to index.html, for example.
So how do you create a link that takes you from one page to another?
Well, recall that you might use some HTML syntax that
looks a little bit something like this.
This line of HTML will create a link that goes to a different page.
We're creating an a or anchor tag, which says
that when you click on the line that says click here,
the text in between the tag, we are going
to be taken to a page called page.html.
So you'll likely want to, inside of your homepage directory,
create a number of other dot HTML files, and then add
link tags that look a little something like this,
such that from any of your pages you can get to the other pages on your website
as by clicking on one or more of these links.
Now, this is just one example of an HTML tag
that you might want to add to your website.
But we'll ask you to use at least 10 different HTML tags.
They might be anchor tags.
That they might headings.
They might be paragraphs.
They may be lists or tables or any number of other things.
And feel free to look around online, to explore
the possibilities of different HTML tags that you could use in order
to construct your web page.
Of course, HTML just describes the structure of each of your pages.
And once you've decided on the structure of the page, what content is actually
going to be there, the next step is going
to be to add some style to your web pages as well.
And in order to do that, we'll use the next language
that we've been taking a look at so far, which is CSS, Cascading Style
Sheets, which is how you were going to determine the style of each
of the elements on your page.
In order to do that, we'll ask you to use at least five different CSS
selectors and include them in your style file, which
is a file called styles.css.
And what are CSS selectors?
Well, there any way of saying select all of these particular HTML elements
and apply particular CSS styles to them.
So you might, for example, take all of the paragraphs and style
them a particular way, or take all of the headings and style
them a particular way, or take all of the tables
and give them a particular style.
And the syntax for that looks a little something
like this, where example is the name of the HTML tag
that you would want to style.
So it might be p for a paragraph.
It might be H2 for some sort of heading.
It might be table if you want to style a table.
And then in between the curly braces you'll
include all of the CSS properties that you
would like to add to those elements.
So those might be things like font or color or background color
or any number of other CSS properties.
And give each of those properties some value.
Remember, that in addition to just selecting a tag,
like a paragraph or an H2 or a table, for example, to add style to,
you can also add class attributes to your HTML elements
or ID attributes to your HTML elements to be a little bit more
precise about which elements you want to give style to.
So if you give one or more HTML elements a particular class,
you can specify how you would like to style
that class using syntax like this, dot example, where
example is the name of your class.
And then in between the curly braces, you
can include all of the CSS properties and values
that you would like applied to any of the HTML elements in any of your pages
that use that class, where in this case, the name of the class is example.
And the class can be applied to any number of different HTML elements.
Alternatively, you can also give an HTML element an ID.
An ID, unlike a class, must be unique.
Only one element inside of a particular HTML page can have a given ID.
But if you know that there is one element that has that ID,
you can style that element using this sort of syntax.
#example, where the hashtag or pound sign
means find the element with an ID of example,
where example could be any ID name you want.
And then in between the curly braces, we're
deciding on what CSS properties and values we
would like to apply to the element that has an ID of example.
So we'll ask you to use at least five different of these CSS selectors.
They could be selectors selecting for tags or classes or IDs.
And then inside of those tags, selectors, or ID style selectors,
we'll ask you to use at least five different CSS
properties across all of your pages.
So those properties might be things like the font size or the color
or the background or, again, any number of different CSS properties,
some of which we've talked about so far in this track.
But others of which you should feel more than
welcome to look up references for online in order
to identify how you might achieve a particular style
effect that you're going for.
Of course, there also exists a number of CSS libraries
that have already implemented a lot of different CSS features
that we might be able to leverage.
And so for that reason we'll also ask you
to use at least one Bootstrap component, where Bootstrap is a CSS library that
gives you access to a lot of different built-in styles
into Bootstrap that just make it easy to make your page look a little bit nicer
right out of the box.
So if you go to Bootstrap's documentation at getbootstrap.com,
and click on the Documentation link at the top,
you'll be taken to a page that looks something
like this, where you'll see a bunch of different possible components
that you can add to your web page, whether those
be alerts or cards or carousels or forms or other components as well.
You'll see what those components look like.
And you'll also see the code that you would need to add to your HTML
in order to create these elements on your pages.
Notice that the code on this page, for example,
would give you the HTML that you would need to add to your page
in order to add an alert to your web page.
And there are a number of different classes
that you can use in order to determine what color that alert is
going to show up as.
So alert-primary, alert-secondary, and so on and so forth,
to determine what type of alert you would like to create.
So feel free to experiment with these different Bootstrap components
and adding different classes to your HTML page
in order to add a little bit more style to your web pages as well.
Finally, after you've decided on the content of your web page
as by writing HTML in each of your dot HTML pages, and also added some CSS,
as by adding some CSS selectors and properties and values
to determine how you want your page to be styled,
let's make our web page a little bit interactive
and add a little bit of JavaScript so that the user can actually interact
with your web page in some way.
How you choose to use JavaScript is up to you.
But here are a couple of possibilities.
You might imagine using a JavaScript alert to display an alert to the user
when they visit a particular page or click on a particular button,
for example.
You could imagine that having a button you
could have when a user clicks on that button, any number of different actions
happen.
Maybe another part of the page shows up.
Maybe a part of the page disappears.
Maybe the style of particular things change, where
the size increases or something else.
So feel free to be creative with what happens when a button is clicked.
And recall that you can add an event listener to a button
to say that when a button is clicked, you would like this JavaScript
function to run in order to determine what code should be executed
when a user clicks on a button.
You can do a similar thing for dropdowns,
where maybe depending on what a user chooses from a dropdown menu,
you display different content on your page.
You could add some forms, whereby users can actually
enter data into an HTML form.
And when they submit that form, you can use the On Submit handler
to say that when the form is submitted, you
want another JavaScript function to run in order to have some action happen.
Or you can imagine adding an interval to your page
where every some number of milliseconds or seconds or minutes some action
happens on your page, and your page changes in some way.
And there are definitely other options as well,
but feel free to be creative again.
Use JavaScript to make something about your page a little bit
interactive and a little bit dynamic.
How exactly you choose to go about that is up to you.
After you've done all of that, you'll have a finished homepage
using HTML to describe the structure of the page,
CSS to describe how you want your page to be styled,
and using JavaScript to make your homepage a little bit more interactive.