All language subtitles for 052 Adding Content to Our Website.en_US

Now in order to continue styling our text and to change the text properties and learn about different

ways of styling our text then we actually need a little bit more content than just these two lines of

text.

So let's add the rest of the content to our web site.

Now if you look inside the resources for this lesson then you will find a download link where you can

get the stub code that I've created for you.

Now once you download it then you can right click and open it using Atom. Now this is what I've created

for you.

And it's basically just the structure of the rest of our web site.

Now what I want you to do is just to copy the entire file and then paste it into your index.html,

and you're going to replace your middle and your bottom container but nothing else.

So as you can see the stub code includes the middle container as well as the bottom container.

So we're just going to wholesale put that into your current index.html and you're going to replace

these bits of stub code which I've placed in here.

Now for those you guys who might be interested in what all of this means or what it is that I've put

in here,

what is all this mumbo jumbo,

it might be good to explain to you - this is something that is used quite frequently in web design.

It's used to place text paragraphs in a web site before you have any content.

And if you go to loremipsumgenerator.com, you can actually find a little bit of history about

what all of this is, where it comes from, and how it came to be used in a lot of web site styling and

web design.

So take a look here if you're interested.

But basically you can generate these bits of text that don't really mean anything other than to look

like normal English words of different lengths, and you can use that in your web site to take up space

that your text content is going to go.

So you can generate say one paragraph or five paragraphs and there's even other generators where you

can get more specific than that.

For example you can have four sentences, or specify the number of words, you can say if you want short,

medium, or long sentences, and it will generate it for you as well.

So that's pretty useful when you're creating web sites and you haven't yet got the content for the text

yet.

Now the other parts that you will have to update in here are the image sources and the image alt tags.

Now the first image here is for your profile photo, so a picture of yourself, or, you know, if you don't

want a picture of yourself, then put any picture you like. And these other images are for your skills

that you're going to describe in your skills section, so you can go ahead and add a source to those images

too.

And at the bottom here we've got a button that is going to open the default mail app to an e-mail address

of your choice.

So that could be your contact e-mail.

And finally in the last section we've got three links that go towards any site that you wish.

So that could be your Linked In profile, your Twitter profile, your web site...

So go ahead and change all of these links in there to whatever it is that you want and change this

to your name so that you have a copyright at the bottom of your page.

So go ahead and paste all of this stub code inside your index.html and update the Lorem Ipsum

and also change the images.

Now once you have done all that I want you to go ahead and delete all the code that's inside your middle

and your bottom container inside the CSS file.

And once you're happy with your content inside your index.html, including all of that stub code, and

you've gotten rid of those styles inside the middle and the bottom container in your styles.css,

then once you’ve refreshed your web site this is what you should roughly have.

So the top section stays unchanged because we haven't touched it at all, but you should have a profile

picture of yourself, a greeting word, it could be,

you can leave the Hello there or you can change it if you wish.

And you've got a little brief bio about yourself.

Then you've got the section called My Skills, which is going to have one image that is going to represent

your first skill, whatever that may be.

And then you're going to find another image that is going to represent your second skill, whatever that

may be as well.

Now if you're short on images for that section and you couldn't find any in Google that you liked then

take a look at this web site called flaticon.com.

Here they've got more than half a million vector icons which you can search and some of these are really

really cool.

For example these little profile ones or you can search for something like computer and you've got these

really nice packs that you can use free for commercial use as long as you give adequate attribution.

So then if you have a look at each of these icons, then you can download them as a png in whichever size

you would prefer.

And you can insert those into your web page as a relative URL.

Now if you happen to find a nice looking image on Google or you found an image of yourself then

you can simply get the URL by just right clicking and copying the image address and pasting that into

the source on your web site.

Now if you wanted an image that was an animated gif perhaps, then a good source is to head over to

giphy.com, and you can search for something that you want to include, and if you select the sticker tab

then you will get these transparent gifs which will look a lot nicer on your page because your background

color will go all around it instead of it being just a square or a rectangle.

And finally at the bottom you've got a Contact Me link that takes you to whichever e-mail that you would

prefer to be contacted by.

And you've got your social links at the bottom that go towards wherever you want it to.

So this is the rest of the content for our web site, and for the remaining lessons we'll be styling this

content to make it look more and more like a professional personal site.