So were you successful?
Let's now rebuild this together.
For this, I have a brand new empty folder,
which I opened with visual studio code,
the ID we're using,
and I only have this get ignore file,
which you can ignore, which is just required
for me to have code snapshots,
which you get as part of the course,
but you should have an empty folder.
And in that empty folder,
I will start by dragging in those files,
which you found attached to the last lecture.
That image and that PDF document.
Now with those files added, I then want to
add a new HTML file since we need one
HTML file, at least, for our website.
And I will create a new file there for,
also with this new file button here,
or the shortcut, and I'll name it index HTML.
Now the file name is up to you.
The extension is important.
It should be dot HTML, but the file name
is totally up to you, though index is a
common file name and therefore it's the default
HTML file name with which I always get started.
So I got this index HTML file
and in this index HTML file I now want to
get started with my HTML code.
And here, you'll learn that every HTML document
should have this base skeleton
with a hat and a body section with that annotation
about which version you're using,
and with that wrapping HTML element around head and body.
That's what you learned and saw over the last sections.
And hence, we can create this here.
And we can use a shortcut here in visual studio code.
If I type an exclamation mark,
then I get this auto-completion,
this suggestion window pop-up.
And if I now hit tab or enter,
this gets auto-completed,
and I get this base skeleton.
Now in there, we've got a couple of HTML elements
which we don't understand and need yet.
And hence, I will remove these two lines here
so that I'm only left with this base skeleton.
And with that, we got this core skeleton,
which every HTML document should have.
We're specifying that we use the English language
for our text content here, with this
Lang attribute on the HTML element.
And you did learn about attributes.
It's one of the key HTML features besides
the elements themselves you need to know about.
You can add extra configuration to some HTML elements.
And HTML attributes allow you to
add such extra configuration.
That can be something like the Lang attribute,
which you set here so that the browser understands
which human language you're using for your content.
That can be the destination of a link on an
anchor tag. Something we'll see later
in this course module.
HTML attributes can be used to
change the behavior or make the
annotation more specific.
And we'll see plenty of examples for HTML attributes
throughout this course and throughout
this course section here already.
You always add them on the opening tag
of your HTML elements.
This is not a must have, but it's useful to have.
We're specifying that we're using Unicode characters,
which basically is the default set of characters
we want to support in our page,
so that all the default characters we have on our keyboard,
and also a lot of special characters, including emojis,
for example, can be displayed without issues.
And then we can set a title for this HTML page.
This title is up to you, but I will name this
HTML and CSS Basics Summary here.
That's the title I will choose.
And that's the title which would then show up on
search engines or which shows up in the tabs of our browser.
And with that, we got this base skeleton in place.
Now we can add metadata, like links to
external CSS files here in the head section.
And we can add our core body content,
the visual content, here in the well, body section.
And that's now the last thing I want to do in this lecture.
I want to set my basic content structure
in this body element, and I want to create an
external CSS file already, which will then
later hold all the CSS stylings and that file
should be imported here in the head section.
I also want to import some Google fonts,
though, that is optional.
Now therefore, I'll start with the external CSS file.
And for that I'll create a new file here
in this project folder and I'll name that file
styles dot CSS, though that file name is up to you.
It should end with dot CSS since it will hold CSS code,
but you can name it styles dot CSS, main dot CSS,
whatever dot CSS, that's really up to you.
For the moment, I will not add any styles in here.
That's something we'll come back to in a couple of minutes,
but we can already link this styles file
to our HTML file so that this HTML file
and therefore the browser in the end is
aware of that styles, CSS file.
And for this, we can add this link element here,
which is a wide element,
a self-closing element as it's also called,
which basically means that it has no content,
that it's only configured with attributes.
And here we then can set the REL attribute
to style sheet to tell the browser that
we're linking to a style sheet and then
set the ref attribute to styles dot CSS pointing
at that CSS file we want to connect to this HTML file.
Now, as I mentioned,
I also want to use some Google fonts
and you might not have done this in your solution,
and that's totally fine,
but I want to bring some custom fonts
or some extra fonts.
And hence here on fonts.google.com,
we can choose a font that looks good.
And I liked this Roboto font here,
so I'll select this font.
And there I want to use the regular version here
with a weight of 400, so I'll add this.
And then I also want to use the 900 version,
the black version and select this as well.
And with that, I will now copy that code here,
go back to my HTML document
and then above my style sheet, so that in the
style sheet we have it available,
I'll import that custom font or this extra font
from Google fonts, so I'll paste in that code.
And now I'll use that auto format shortcut
to automatically format and restructure this code
to make it a bit more readable.
Now here, you also see that they offered this
auto format shortcut, added some line breaks here.
It splits this content across multiple lines.
It splits those attributes across multiple lines,
but those line breaks don't hurt HTML.
It works with that as you also see
earlier in the course already.
So having line breaks like this for readability,
just as having indentation for readability,
where we don't write everything directly on the left edge,
but instead we indent,
all of that can be done to make it easier
for us as a developer to improve the code readability
and the browser will simply ignore that.
It will ignore that indentation.
It will ignore those extra line breaks
and therefore, we won't see that on the page,
but it helps us as a developer.
And therefore, we now got those fonts added.
We got the third-party style sheet imported.
Now let's work on the main body structure for our content.
And here you learn that there are various semantic elements
which add extra meaning to the different sections,
the different kinds of content you could have on your page.
Extra meaning that can help the browser present
your content correctly to assistive technologies,
but also to search engines.
And last, but not least, also to you as a developer.
If you structure your content correctly in your HTML files,
it's easier to work on your HTML files and to
maintain them, because it's easier for you to
find that specific content you want to continue working on
if everything is structured correctly.
And therefore here in this body section I, in the end,
want to create three sub-sections, you could say.
Because on the finished page which I want to build,
we will have a header with a title and an image.
We will have a footer at the bottom with a download link
and with that copyright annotation.
And we'll have that main content of our page.
And therefore, here in the body section,
I will add a header element, which will later wrap
this header content.
I will add a footer element,
which will wrap the footer content.
And I also want to mark up my main page content,
which is the most important part of this page,
the heart of this page.
And we can do this with the main HTML element.
Now we'll add the concrete content for those different
sections in the next lectures,
but that is the main structure I want to have in my body.
It's not a structure you need to have on every page.
Some pages don't have a footer,
other pages don't have a header,
yet other pages might have a site bar,
but it is a very common structure, of course.
And therefore let's now populate this structure
with some life, with some content.
And then of course, let's make sure that
we also style that content.