0
1
00:00:00,590 --> 00:00:06,530
Now in order to continue styling our text and to change the text properties and learn about different
1

2
00:00:06,530 --> 00:00:13,400
ways of styling our text then we actually need a little bit more content than just these two lines of
2

3
00:00:13,400 --> 00:00:14,240
text.
3

4
00:00:14,480 --> 00:00:18,550
So let's add the rest of the content to our web site.
4

5
00:00:19,840 --> 00:00:26,590
Now if you look inside the resources for this lesson then you will find a download link where you can
5

6
00:00:26,590 --> 00:00:29,810
get the stub code that I've created for you.
6

7
00:00:29,890 --> 00:00:39,750
Now once you download it then you can right click and open it using Atom. Now this is what I've created
7

8
00:00:39,750 --> 00:00:40,550
for you.
8

9
00:00:40,770 --> 00:00:45,910
And it's basically just the structure of the rest of our web site.
9

10
00:00:46,050 --> 00:00:54,560
Now what I want you to do is just to copy the entire file and then paste it into your index.html,
10

11
00:00:54,600 --> 00:01:02,080
and you're going to replace your middle and your bottom container but nothing else.
11

12
00:01:02,100 --> 00:01:10,230
So as you can see the stub code includes the middle container as well as the bottom container.
12

13
00:01:10,500 --> 00:01:17,790
So we're just going to wholesale put that into your current index.html and you're going to replace
13

14
00:01:18,030 --> 00:01:22,380
these bits of stub code which I've placed in here.
14

15
00:01:22,380 --> 00:01:28,680
Now for those you guys who might be interested in what all of this means or what it is that I've put
15

16
00:01:28,680 --> 00:01:29,300
in here,
16

17
00:01:29,430 --> 00:01:31,650
what is all this mumbo jumbo,
17

18
00:01:31,650 --> 00:01:37,510
it might be good to explain to you - this is something that is used quite frequently in web design.
18

19
00:01:37,590 --> 00:01:44,170
It's used to place text paragraphs in a web site before you have any content.
19

20
00:01:44,280 --> 00:01:49,980
And if you go to loremipsumgenerator.com, you can actually find a little bit of history about
20

21
00:01:49,980 --> 00:01:58,500
what all of this is, where it comes from, and how it came to be used in a lot of web site styling and
21

22
00:01:58,560 --> 00:02:00,160
web design.
22

23
00:02:00,180 --> 00:02:03,500
So take a look here if you're interested.
23

24
00:02:03,510 --> 00:02:10,770
But basically you can generate these bits of text that don't really mean anything other than to look
24

25
00:02:10,770 --> 00:02:18,660
like normal English words of different lengths, and you can use that in your web site to take up space
25

26
00:02:18,750 --> 00:02:21,380
that your text content is going to go.
26

27
00:02:21,450 --> 00:02:28,770
So you can generate say one paragraph or five paragraphs and there's even other generators where you
27

28
00:02:28,770 --> 00:02:30,360
can get more specific than that.
28

29
00:02:30,360 --> 00:02:35,970
For example you can have four sentences, or specify the number of words, you can say if you want short,
29

30
00:02:35,970 --> 00:02:40,130
medium, or long sentences, and it will generate it for you as well.
30

31
00:02:40,140 --> 00:02:46,680
So that's pretty useful when you're creating web sites and you haven't yet got the content for the text
31

32
00:02:46,680 --> 00:02:47,450
yet.
32

33
00:02:47,460 --> 00:02:53,800
Now the other parts that you will have to update in here are the image sources and the image alt tags.
33

34
00:02:53,880 --> 00:03:00,300
Now the first image here is for your profile photo, so a picture of yourself, or, you know, if you don't
34

35
00:03:00,300 --> 00:03:05,820
want a picture of yourself, then put any picture you like. And these other images are for your skills
35

36
00:03:05,850 --> 00:03:12,330
that you're going to describe in your skills section, so you can go ahead and add a source to those images
36

37
00:03:12,450 --> 00:03:13,320
too.
37

38
00:03:13,440 --> 00:03:19,770
And at the bottom here we've got a button that is going to open the default mail app to an e-mail address
38

39
00:03:19,830 --> 00:03:20,830
of your choice.
39

40
00:03:20,940 --> 00:03:23,240
So that could be your contact e-mail.
40

41
00:03:23,250 --> 00:03:30,480
And finally in the last section we've got three links that go towards any site that you wish.
41

42
00:03:30,480 --> 00:03:35,280
So that could be your Linked In profile, your Twitter profile, your web site...
42

43
00:03:35,280 --> 00:03:41,820
So go ahead and change all of these links in there to whatever it is that you want and change this
43

44
00:03:41,910 --> 00:03:46,340
to your name so that you have a copyright at the bottom of your page.
44

45
00:03:46,380 --> 00:03:53,910
So go ahead and paste all of this stub code inside your index.html and update the Lorem Ipsum
45

46
00:03:54,000 --> 00:03:56,070
and also change the images.
46

47
00:03:56,070 --> 00:04:02,820
Now once you have done all that I want you to go ahead and delete all the code that's inside your middle
47

48
00:04:02,970 --> 00:04:06,990
and your bottom container inside the CSS file.
48

49
00:04:06,990 --> 00:04:13,530
And once you're happy with your content inside your index.html, including all of that stub code, and
49

50
00:04:13,530 --> 00:04:18,190
you've gotten rid of those styles inside the middle and the bottom container in your styles.css,
50

51
00:04:18,190 --> 00:04:24,380
then once you’ve refreshed your web site this is what you should roughly have.
51

52
00:04:24,390 --> 00:04:31,320
So the top section stays unchanged because we haven't touched it at all, but you should have a profile
52

53
00:04:31,320 --> 00:04:34,110
picture of yourself, a greeting word, it could be,
53

54
00:04:34,110 --> 00:04:37,680
you can leave the Hello there or you can change it if you wish.
54

55
00:04:38,070 --> 00:04:41,350
And you've got a little brief bio about yourself.
55

56
00:04:41,550 --> 00:04:48,420
Then you've got the section called My Skills, which is going to have one image that is going to represent
56

57
00:04:48,420 --> 00:04:51,250
your first skill, whatever that may be.
57

58
00:04:51,450 --> 00:04:56,850
And then you're going to find another image that is going to represent your second skill, whatever that
58

59
00:04:56,970 --> 00:04:58,600
may be as well.
59

60
00:04:58,600 --> 00:05:04,590
Now if you're short on images for that section and you couldn't find any in Google that you liked then
60

61
00:05:04,650 --> 00:05:08,380
take a look at this web site called flaticon.com.
61

62
00:05:08,610 --> 00:05:16,890
Here they've got more than half a million vector icons which you can search and some of these are really
62

63
00:05:16,890 --> 00:05:17,960
really cool.
63

64
00:05:17,970 --> 00:05:23,970
For example these little profile ones or you can search for something like computer and you've got these
64

65
00:05:24,030 --> 00:05:31,250
really nice packs that you can use free for commercial use as long as you give adequate attribution.
65

66
00:05:31,260 --> 00:05:37,690
So then if you have a look at each of these icons, then you can download them as a png in whichever size
66

67
00:05:37,780 --> 00:05:39,290
you would prefer.
67

68
00:05:39,850 --> 00:05:45,120
And you can insert those into your web page as a relative URL.
68

69
00:05:45,200 --> 00:05:51,100
Now if you happen to find a nice looking image on Google or you found an image of yourself then
69

70
00:05:51,100 --> 00:05:57,730
you can simply get the URL by just right clicking and copying the image address and pasting that into
70

71
00:05:57,730 --> 00:05:59,970
the source on your web site.
71

72
00:06:00,370 --> 00:06:07,030
Now if you wanted an image that was an animated gif perhaps, then a good source is to head over to 
72

73
00:06:07,030 --> 00:06:14,410
giphy.com, and you can search for something that you want to include, and if you select the sticker tab
73

74
00:06:14,590 --> 00:06:21,040
then you will get these transparent gifs which will look a lot nicer on your page because your background
74

75
00:06:21,040 --> 00:06:27,560
color will go all around it instead of it being just a square or a rectangle.
75

76
00:06:27,820 --> 00:06:34,180
And finally at the bottom you've got a Contact Me link that takes you to whichever e-mail that you would
76

77
00:06:34,180 --> 00:06:35,860
prefer to be contacted by.
77

78
00:06:35,920 --> 00:06:40,710
And you've got your social links at the bottom that go towards wherever you want it to.
78

79
00:06:40,930 --> 00:06:48,010
So this is the rest of the content for our web site, and for the remaining lessons we'll be styling this
79

80
00:06:48,010 --> 00:06:52,920
content to make it look more and more like a professional personal site.