1
00:00:01,240 --> 00:00:04,800
OK dus laten we doorgaan en maak deze blog vanuit het niets.

2
00:00:04,920 --> 00:00:06,620
Dus voel je vrij om te volgen langs hier.

3
00:00:06,630 --> 00:00:11,530
Ik ga om te gaan van het creëren van een nieuw bestand helemaal tot aan het voltooien van deze blog hier.

4
00:00:12,000 --> 00:00:13,880
Dus het eerste wat we willen doen.

5
00:00:14,070 --> 00:00:19,750
Ik ga naar de oplossing open te houden gewoon zo dat ik het kan verwijzen en ervoor zorgen dat we de juiste kleur en lettergroottes.

6
00:00:20,040 --> 00:00:35,990
Maar het eerste wat we echt willen doen is onze bestanden te zetten, dus ik heb twee bestanden een blog die HMO en het heeft niets in het tot nu toe, behalve de titel blog en het is gekoppeld aan een style sheet genaamd Blog Dotsie SS Dat is leeg .

7
00:00:36,030 --> 00:00:38,760
Dus dit is gewoon weet dat je de twee bestanden die we gaan nodig hebben.

8
00:00:39,090 --> 00:00:41,170
En laten we nu ga je gang en vul ze in.

9
00:00:41,790 --> 00:00:44,950
Dus moeten we beslissen wanneer zijn iets als dit te doen.

10
00:00:44,970 --> 00:00:46,540
Waar beginnen we.

11
00:00:46,560 --> 00:00:57,420
En ik denk dat de beste oplossing is om te beginnen met een aantal van deze opmaak in onze tijd G-mail en styling een deel ervan, maar we hoeven niet alles hun perfecte woord voor woord te krijgen voordat we daadwerkelijk stijl dingen.

12
00:00:57,780 --> 00:01:04,290
Zo zou ik beginnen met te zetten een paragraaf of twee en een van deze headers in ons lichaam.

13
00:01:04,290 --> 00:01:14,130
En om dat te doen is Lorem Ipsum tekst behalve het spek ipsum die net is toe te voegen spek ipsum dot com.

14
00:01:14,130 --> 00:01:17,340
Klik op geef me spek en kopieer één van de leden.

15
00:01:17,610 --> 00:01:24,330
Ik ga gewoon gebruik maken van wat ik hier heb, maar de woorden zijn niet zo belangrijk, zolang ze zijn woorden daar.

16
00:01:24,660 --> 00:01:26,840
Dus als je wilt gebruiken spek ipsum ga je gang.

17
00:01:26,940 --> 00:01:34,520
Maar als je niet doen als je bezwaar tegen bacon kunt u elke andere ipsum halen of gewoon make-up je eigen woorden of er daadwerkelijk plaatst u uw eigen blog post.

18
00:01:34,560 --> 00:01:35,810
Dat zou ideaal zijn.

19
00:01:36,030 --> 00:01:44,070
En dan ga ik ook gewoon één van de posten hier en één noot is het misschien zinvol om deze een H1 beiden te maken.

20
00:01:44,070 --> 00:01:50,820
Maar over het algemeen is de regel dat u wilt een H-1 hebben op de pagina moet het grootste ding op uw pagina.

21
00:01:50,850 --> 00:01:55,420
Dus omdat we hebben meerdere van elk zijn meerdere rubrieken hier meerdere titels van artikelen.

22
00:01:55,500 --> 00:02:11,360
Ik ga om te gaan met de H-2, maar aan het eind van de dag is het helemaal niet uit want we gaan alles stijl erover gaan we de lettergrootte gaan we het veranderen veranderen kleur en alle dingen die door waardoor het een H1 versus natuur met die verschillen zouden worden ingesteld zal anyways worden geëlimineerd.

23
00:02:11,640 --> 00:02:22,210
Dus ik ga om te gaan met de H-2 en ik ga gewoon zeggen dat dit is mijn eerste artikel niet de meest creatieve titel, maar op te slaan.

24
00:02:22,410 --> 00:02:24,220
En laten we bekijken het gewoon om te beginnen.

25
00:02:24,630 --> 00:02:27,300
Dus open het op.

26
00:02:27,360 --> 00:02:27,870
OK.

27
00:02:27,930 --> 00:02:30,090
Dus er is onze blog tot nu toe.

28
00:02:30,960 --> 00:02:33,100
Dus hebben we een heleboel beslissingen te maken.

29
00:02:33,120 --> 00:02:38,620
De eerste plaats die ik zou kunnen beginnen is bij het verkrijgen van dit lichaam om deze grens te hebben.

30
00:02:39,180 --> 00:02:42,110
Dus deed ik zorgen voor de kleuren in de laatste video.

31
00:02:42,120 --> 00:02:56,240
Ik ga gewoon naar deze kleur hier kopiëren en ik ga om het lichaam van water te geven, dus ik zal het lichaam te selecteren en dan alles wat we moeten doen, is zeggen grens en het is 20 pixels solid deze grijze kleur.

32
00:02:56,370 --> 00:02:57,930
En laten we controleren dat uit.

33
00:02:58,560 --> 00:02:59,090
OK.

34
00:02:59,220 --> 00:03:05,120
Het maakt dus niet helemaal kijken de manier waarop we zouden willen dat het kijken, maar het wordt steeds daar hebben we de grens.

35
00:03:05,580 --> 00:03:08,350
Laten we het op ware grootte dus kunnen we echt vergelijken.

36
00:03:09,120 --> 00:03:16,390
Dus een ander ding dat je opvalt is dat onze grens is er een probleem dat het gaat helemaal naar het hele lichaam neemt de hele pagina.

37
00:03:16,560 --> 00:03:19,500
Versus hier het lichaam neemt slechts een deel van de pagina.

38
00:03:19,560 --> 00:03:21,890
En dan is er afstand aan beide zijden.

39
00:03:21,930 --> 00:03:28,550
Dan is er ook de ruimte aan de binnenkant dat we niet hebben, omdat onze woorden in onze tekst gaat recht tegen de grens.

40
00:03:28,590 --> 00:03:31,820
Dus laten we beginnen met het oplossen van dat probleem op te lossen en dat.

41
00:03:31,860 --> 00:03:33,520
Natuurlijk moet je padding.

42
00:03:33,630 --> 00:03:35,930
Dus dit is 20 pixels padding aan alle kanten.

43
00:03:35,970 --> 00:03:40,430
Je kunt zien dat er padding aan de onderkant en links en rechts ook.

44
00:03:40,470 --> 00:03:50,560
Dus in het lichaam dat we gaan gewoon padding toewijzen 20 pixels aan alle vier zijden en we krijgen dit OK.

45
00:03:50,580 --> 00:03:52,510
Dus dat is een beetje dichter.

46
00:03:52,530 --> 00:04:15,360
Het volgende ding dat we moeten werken aan krijgt de breedte klopt en het is niet alleen een kwestie van de breedte op de juiste maat wanneer het volledige scherm, maar ook als het krimpt naar beneden zie je dat het zo blijft zijn 700 pixels is blijft op 700 pixels voor een tijdje en dan krimpt het en krimpt en een weegschaal.

47
00:04:15,360 --> 00:04:17,730
Dus we willen ervoor zorgen dat we kunnen krijgen dat te laten gebeuren.

48
00:04:17,820 --> 00:04:19,660
Dus we gaan een beetje een trucje gebruiken.

49
00:04:19,830 --> 00:04:24,220
En dan is het een ander wat je wilt doen is ervoor zorgen dat het nu is gecentreerd.

50
00:04:24,360 --> 00:04:25,330
Nou kunnen we niet echt zeggen.

51
00:04:25,350 --> 00:04:28,210
Maar het is niet in het midden het gaat om op de linkerkant.

52
00:04:28,230 --> 00:04:30,850
Dus laten we gaan door en voeg de in eerste.

53
00:04:31,700 --> 00:04:49,660
Dus laten we zeggen met 700 pixels en op te slaan en dit is wat ik aan de linkerkant werd erover te praten en we willen centreren in het midden en te doen dat we de auto of de marge auto truc die ik over in de doos had gesproken kan gebruiken model video.

54
00:04:50,100 --> 00:04:54,920
Dus we gaan om een ​​marge te stellen en we gaan gewoon gebruik maken van de short cut.

55
00:04:55,050 --> 00:05:01,190
Dus we gaan doen nul pixels op boven- en onderkant en vervolgens Otto aan de linker- en rechterkant.

56
00:05:01,230 --> 00:05:03,900
Weet je nog dat we gewoon doen er hier twee in plaats van vier.

57
00:05:04,020 --> 00:05:06,640
Dit is boven- en onderkant is links en rechts.

58
00:05:07,230 --> 00:05:15,740
Zodat centra het voor ons automatisch, maar dan zul je merken door het geven van een nul-boven- en onderkant is het nu recht tegen de top.

59
00:05:16,020 --> 00:05:17,870
En deze is hier niet.

60
00:05:17,880 --> 00:05:18,720
We hebben wat ruimte.

61
00:05:18,720 --> 00:05:20,950
Er is 20 pixels daar.

62
00:05:21,210 --> 00:05:22,630
Dus dat is een eenvoudige oplossing.

63
00:05:22,770 --> 00:05:26,350
Net dezelfde lijn verandering die terug naar 20 P x.

64
00:05:26,370 --> 00:05:27,490
We hebben wel de x.

65
00:05:27,510 --> 00:05:30,580
We hebben niet eerder, want als het nul kunt u gewoon laat het op nul.

66
00:05:30,720 --> 00:05:33,970
Maar als er een nummer moeten we de volgende.

67
00:05:33,990 --> 00:05:36,110
OK, zodat kijkt aardig in de buurt.

68
00:05:36,120 --> 00:05:46,470
Het enige ding is dat als we krimpen willen we dit blijven 700 pixels, totdat het niet meer kan zeggen 700 pixels.

69
00:05:46,470 --> 00:05:59,400
En we willen dat het krimpen en het is vrij eenvoudig om dat daadwerkelijk te doen alles wat we willen doen is verandering deze tot max breedte en dan gaan we het toe te wijzen een percentage met.

70
00:05:59,700 --> 00:06:03,760
En wat dit zegt is maakt het 80 procent wanneer dat nodig is.

71
00:06:03,900 --> 00:06:07,540
Maar ten hoogste maken 700 pixels.

72
00:06:07,620 --> 00:06:09,780
Dus ik zal je laten zien hoe dat eruit ziet als je vernieuwen.

73
00:06:09,780 --> 00:06:19,180
Niets verandert omdat het toegevoegd aan maximum zevenhonderd pixels zodat het gecontroleerd of 80 procent zou meer dan 700 pixels die het zou in dit geval.

74
00:06:19,200 --> 00:06:27,840
Dus het blijft op 700 nog steeds blijft op 700 tot hier waar het begint te krimpen.

75
00:06:27,840 --> 00:06:31,250
Dat is waar 80 procent is nu minder dan 700 pixels.

76
00:06:31,770 --> 00:06:32,030
OK.

77
00:06:32,040 --> 00:06:35,370
Dus nu hebben we onze fundamentele orgaan opgericht.

78
00:06:35,370 --> 00:06:39,330
Het volgende ding dat ik zou willen hier doen is onze Funt gaan.

79
00:06:39,330 --> 00:06:49,300
Dus nogmaals als we naar de noten die ik uit de laatste video het lettertype heet Bron zin pro.

80
00:06:49,320 --> 00:06:54,370
Dus laten we gaan vooruit en ga naar Google fos en op zoek naar de bron stuurt Pro.

81
00:06:54,540 --> 00:07:06,860
Dus ik heb het hier te openen, maar nogmaals, het is gewoon Google dot com slash fonts en gewoon doen een zoektocht naar een bron stuurt pro juiste hier toevoegen aan collectie te gebruiken.

82
00:07:07,140 --> 00:07:09,990
En nu hebben we een keuze die lettertype gewichten willen we.

83
00:07:10,250 --> 00:07:17,390
En ik eigenlijk heb je dit niet verteld in de originele video, maar dit is slechts het normale lettertype van het lettertype gewicht 400.

84
00:07:17,520 --> 00:07:19,220
En dit is een zwaarder gewicht.

85
00:07:19,230 --> 00:07:20,050
Het is gevouwen.

86
00:07:20,100 --> 00:07:22,090
Dus we gaan deze beide willen.

87
00:07:22,440 --> 00:07:26,970
Dus normaal in vet 400 700 en dat is het.

88
00:07:26,970 --> 00:07:29,700
Wij gaan hier beneden en kopieer deze link.

89
00:07:29,700 --> 00:07:37,180
We kunnen ontdoen van Google fonts nu en we gaan naar onze HMO en gewoon plakken die verwijzen in.

90
00:07:37,950 --> 00:07:41,530
En nu hebben we de mogelijkheid om de bron verstand gebruiken.

91
00:07:42,180 --> 00:07:51,100
Dus laten we toewijzen aan beide leden en leeftijd tweeën en we willen ook dat het is op deze data.

92
00:07:51,270 --> 00:08:00,290
Dus wat we konden doen is kiezen paragraaf en zeggen lettertype bron gevoel pro en we kunnen hetzelfde doen voor H-1.

93
00:08:00,990 --> 00:08:03,640
Maar dat is niet echt een goed gebruik van ons succes.

94
00:08:03,780 --> 00:08:07,950
Onze code gaat een beetje repetitief elk element dat we willen het te gebruiken op te zijn.

95
00:08:07,950 --> 00:08:10,230
We zouden moeten gaan en voeg deze in.

96
00:08:10,770 --> 00:08:15,140
Dus wat we in plaats daarvan doen is alleen maar toe te passen op het lichaam.

97
00:08:15,690 --> 00:08:19,420
En door het spelen in het lichaam alles erin zal erven.

98
00:08:19,470 --> 00:08:32,100
Dus fontfamilie bron en pro en op te slaan refresh en daar gaan we we ooit H-1 te gebruiken of H-2 en we hebben een paragraaf.

99
00:08:32,810 --> 00:08:34,560
Dus dat ziet er goed uit tot nu toe.