OK dus laten we doorgaan en maak deze blog vanuit het niets.
Dus voel je vrij om te volgen langs hier.
Ik ga om te gaan van het creëren van een nieuw bestand helemaal tot aan het voltooien van deze blog hier.
Dus het eerste wat we willen doen.
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.
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 .
Dus dit is gewoon weet dat je de twee bestanden die we gaan nodig hebben.
En laten we nu ga je gang en vul ze in.
Dus moeten we beslissen wanneer zijn iets als dit te doen.
Waar beginnen we.
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.
Zo zou ik beginnen met te zetten een paragraaf of twee en een van deze headers in ons lichaam.
En om dat te doen is Lorem Ipsum tekst behalve het spek ipsum die net is toe te voegen spek ipsum dot com.
Klik op geef me spek en kopieer één van de leden.
Ik ga gewoon gebruik maken van wat ik hier heb, maar de woorden zijn niet zo belangrijk, zolang ze zijn woorden daar.
Dus als je wilt gebruiken spek ipsum ga je gang.
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.
Dat zou ideaal zijn.
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.
Maar over het algemeen is de regel dat u wilt een H-1 hebben op de pagina moet het grootste ding op uw pagina.
Dus omdat we hebben meerdere van elk zijn meerdere rubrieken hier meerdere titels van artikelen.
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.
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.
En laten we bekijken het gewoon om te beginnen.
Dus open het op.
OK.
Dus er is onze blog tot nu toe.
Dus hebben we een heleboel beslissingen te maken.
De eerste plaats die ik zou kunnen beginnen is bij het verkrijgen van dit lichaam om deze grens te hebben.
Dus deed ik zorgen voor de kleuren in de laatste video.
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.
En laten we controleren dat uit.
OK.
Het maakt dus niet helemaal kijken de manier waarop we zouden willen dat het kijken, maar het wordt steeds daar hebben we de grens.
Laten we het op ware grootte dus kunnen we echt vergelijken.
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.
Versus hier het lichaam neemt slechts een deel van de pagina.
En dan is er afstand aan beide zijden.
Dan is er ook de ruimte aan de binnenkant dat we niet hebben, omdat onze woorden in onze tekst gaat recht tegen de grens.
Dus laten we beginnen met het oplossen van dat probleem op te lossen en dat.
Natuurlijk moet je padding.
Dus dit is 20 pixels padding aan alle kanten.
Je kunt zien dat er padding aan de onderkant en links en rechts ook.
Dus in het lichaam dat we gaan gewoon padding toewijzen 20 pixels aan alle vier zijden en we krijgen dit OK.
Dus dat is een beetje dichter.
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.
Dus we willen ervoor zorgen dat we kunnen krijgen dat te laten gebeuren.
Dus we gaan een beetje een trucje gebruiken.
En dan is het een ander wat je wilt doen is ervoor zorgen dat het nu is gecentreerd.
Nou kunnen we niet echt zeggen.
Maar het is niet in het midden het gaat om op de linkerkant.
Dus laten we gaan door en voeg de in eerste.
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.
Dus we gaan om een ​​marge te stellen en we gaan gewoon gebruik maken van de short cut.
Dus we gaan doen nul pixels op boven- en onderkant en vervolgens Otto aan de linker- en rechterkant.
Weet je nog dat we gewoon doen er hier twee in plaats van vier.
Dit is boven- en onderkant is links en rechts.
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.
En deze is hier niet.
We hebben wat ruimte.
Er is 20 pixels daar.
Dus dat is een eenvoudige oplossing.
Net dezelfde lijn verandering die terug naar 20 P x.
We hebben wel de x.
We hebben niet eerder, want als het nul kunt u gewoon laat het op nul.
Maar als er een nummer moeten we de volgende.
OK, zodat kijkt aardig in de buurt.
Het enige ding is dat als we krimpen willen we dit blijven 700 pixels, totdat het niet meer kan zeggen 700 pixels.
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.
En wat dit zegt is maakt het 80 procent wanneer dat nodig is.
Maar ten hoogste maken 700 pixels.
Dus ik zal je laten zien hoe dat eruit ziet als je vernieuwen.
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.
Dus het blijft op 700 nog steeds blijft op 700 tot hier waar het begint te krimpen.
Dat is waar 80 procent is nu minder dan 700 pixels.
OK.
Dus nu hebben we onze fundamentele orgaan opgericht.
Het volgende ding dat ik zou willen hier doen is onze Funt gaan.
Dus nogmaals als we naar de noten die ik uit de laatste video het lettertype heet Bron zin pro.
Dus laten we gaan vooruit en ga naar Google fos en op zoek naar de bron stuurt Pro.
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.
En nu hebben we een keuze die lettertype gewichten willen we.
En ik eigenlijk heb je dit niet verteld in de originele video, maar dit is slechts het normale lettertype van het lettertype gewicht 400.
En dit is een zwaarder gewicht.
Het is gevouwen.
Dus we gaan deze beide willen.
Dus normaal in vet 400 700 en dat is het.
Wij gaan hier beneden en kopieer deze link.
We kunnen ontdoen van Google fonts nu en we gaan naar onze HMO en gewoon plakken die verwijzen in.
En nu hebben we de mogelijkheid om de bron verstand gebruiken.
Dus laten we toewijzen aan beide leden en leeftijd tweeën en we willen ook dat het is op deze data.
Dus wat we konden doen is kiezen paragraaf en zeggen lettertype bron gevoel pro en we kunnen hetzelfde doen voor H-1.
Maar dat is niet echt een goed gebruik van ons succes.
Onze code gaat een beetje repetitief elk element dat we willen het te gebruiken op te zijn.
We zouden moeten gaan en voeg deze in.
Dus wat we in plaats daarvan doen is alleen maar toe te passen op het lichaam.
En door het spelen in het lichaam alles erin zal erven.
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.
Dus dat ziet er goed uit tot nu toe.