Share
We hebben het gedaan! We hebben onze allereerste nieuwe website gemaakt en we hebben gesproken over enkele essentiële stukjes ontwerp zoals witruimte, typografie en kleur.
In deze laatste tutorial zullen we snel alles bekijken wat we tot nu toe hebben geleerd over het bouwen van een website en ontwerp, manieren bekijken om onze website op internet te zetten, zodat we onze vrienden en familie kunnen doorsturen naar een webadres en wat kunnen raken nuttige middelen om verder te gaan met onze studies.
Vergeet niet om eventuele laatste vragen te stellen in het commentaargedeelte onderaan deze pagina!
Laten we de serie roadmap bekijken die we hebben genomen om te komen waar we nu zijn.
We zijn deze serie begonnen met de aanpak van hoe het web werkt. Om ervoor te zorgen dat twee verschillende computers met elkaar kunnen communiceren, moeten ze beide via een internetprovider (Internet Service Provider) met internet zijn verbonden.
Om andere mensen in staat te stellen onze site op internet te bekijken, moeten deze sitebestanden worden overgedragen (verplaatst) naar een server; een speciale computer met directe toegang tot internet. We zullen dit meer bekijken in een gedeelte hieronder.
Onze rol op internet is die van een webdesigner. Het is onze taak om ervoor te zorgen dat een site er mooi uitziet en super gemakkelijk is voor onze gebruikers om te lezen en te navigeren.
Met deze doelen in het achterhoofd zijn we begonnen met het bouwen van onze site Tuts + Town met HTML en CSS na het maken van enkele fantastische schetsen op papier. Om ons voor te bereiden op dit deel van het proces moesten we alles te weten komen over bestandsbenamingen en organisatie.
We weten nu dat het belangrijkste HTML-bestand altijd wordt genoemd index.html en of afbeeldingen zich in hun eigen map bevinden of niet van invloed zijn op de src kenmerk in onze HTML.
Uiteindelijk hebben we een teksteditor geselecteerd en waren we officieel bereid om wat HTML- en CSS-bestanden te gaan schrijven!
Om onze Tuts + Town-site te bouwen, hebben we eerst onze HTML-structuur vastgesteld en vervolgens ingestoken in de inhoud.
Deze structuur bestond uit verschillende elementen genesteld binnen een primaire html Het element en met deze basis hebben de inhoud veel simpeler ingeplugd.
Zodra de inhoud op zijn plaats was, konden we alles met CSS in model brengen. Eerst moesten we de twee documenten aan elkaar koppelen in de HTML hoofd:
In ons CSS-document waren we in staat om verklaren kleuren, formaten, lay-out en meer op elementen in het HTML-document, uiteindelijk leidend tot het voltooide siteontwerp.
Dit gedeelte van de serie is afgesloten met een zelfstudie waarin de verschillende beeldformaten besproken worden die voor ons beschikbaar zijn. We hebben het gehad over het opnemen ervan in onze HTML en enkele effecten die we kunnen toepassen op afbeeldingen met CSS, zoals het wijzigen van hun ondoorzichtigheid:
Zoals gezegd, alle afbeeldingen in de Tuts + Town-serie zijn SVG's, wat betekent dat ze kunnen worden verkleind zonder kwaliteitsverlies en gemakkelijk kunnen worden bewerkt.
Nadat we onze site hebben gemaakt, hebben we de basisconcepten van het ontwerp besproken die hebben bijgedragen aan het uiterlijk, het gevoel en de bruikbaarheid van de site.
Inhoud is het belangrijkste onderdeel van webdesign, dus nadat we hebben vastgesteld dat onze inhoud nuttig, nodig en goed georganiseerd is, zijn we overgegaan op visuele aspecten.
Er is een visuele hiërarchie voor de site vastgesteld met verschillende lettertypen, kleuren en witruimten, net zoals de bovenstaande ballon is ontworpen als het dominante object in de afbeelding.
Typografie is overal waar we geschreven woorden zien en is een van de belangrijkste onderdelen van webdesign. Onze gebruikers moeten onze inhoud kunnen lezen, maar we moeten er ook voor zorgen dat de lettertypen die we kiezen overeenkomen met de toon en het gevoel van onze inhoud en visueel ontwerp.
Dit gedeelte van de serie werd afgesloten met een tutorial over kleurentheorie, de betekenis van bepaalde kleuren, verschillende kleursystemen voor het web en het selecteren van een succesvol palet..
Verwijzen naar de primaire en secundaire kleurenwielen helpt ons om beter te begrijpen hoe bepaalde kleuren worden gemaakt en waarom sommige kleuren er samen goed uitzien, terwijl andere niet.
Laten we nu eens kijken hoe we onze site op internet kunnen zetten!
Zoals we aan het begin van deze serie hebben besproken, leeft deze site plaatselijk op onze individuele computers en niet op internet. Op dit moment kunnen we geen vrienden en familie naar een adres op internet leiden, zodat ze ons geweldige werk nog niet kunnen bekijken.
Zoals we in de Introductie-zelfstudie hebben besproken, moeten bestanden op een server staan zodat anderen ze op internet kunnen bekijken.
Het proces om een site op internet te krijgen, kan vaak inhouden dat u een aankoop doet en een e-mailadres hebt. Als je te jong bent om toegang te hebben tot een van deze is het het beste om een volwassene bij je te hebben voor de volgende sectie.
Er zijn een aantal diensten die zullen helpen gastheer onze bestanden voor ons, ze toegankelijk maken op internet. Voor deze serie gaan we focussen op hosting via NeoCities en het basisconcept van domeinnamen.
NeoCities is een fantastisch en gratis optie voor eenvoudige bestandshosting op het web; hoewel we nog steeds een e-mailadres nodig hebben om te registreren!
Laten we de stappen volgen om onze bestanden hier gehost te krijgen:
Hier is een kijkje op de site op NeoCities: tutsplustown.neocities.org
Een ander voordeel van deze service is dat we het aankoop- en instellingsproces van het domein (het aangepaste adres voor sites) niet hoeven te doorlopen, maar we zullen ook hieronder bespreken hoe we dit moeten doen.
Belangrijk! Het is mogelijk om een aangepaste domeinnaam te gebruiken met NeoCities door naar de instellingen van de site te gaan na de eerste installatie en de instructies daar te volgen; hoewel dit momenteel een geüpgraded account vereist voor $ 5,00 USD per maand.
Domeinen zijn die aangepaste adressen waarnaar we mensen verwijzen, zodat ze een site kunnen bezoeken. Deze stap was niet nodig toen we onze sitebestanden op NeoCities hosten omdat het een speciaal Neocities-adres voor ons heeft gemaakt. Als we echter een echt aangepaste domeinnaam willen hebben (zoals tutsplustown.com bijvoorbeeld) we zullen deze naam moeten kopen.
Net als bij onze NeoCities-gebruikersnaam moet onze domeinnaam ook uniek zijn; het kan even duren om een naam te vinden die nog niet is afgelegd.
Hier zijn een aantal services waarmee we domeinnamen kunnen kopen zodra we een account hebben gemaakt:
De laatste stap om een aangepast domein in te stellen kan worden voltooid via de hostingservice (zoals Neocities of BitBalloon die hieronder wordt vermeld) zodra de bestanden zijn overgedragen.
Als we ervoor kiezen om NeoCities niet te gebruiken, zijn er een paar andere hostingbedrijven die opvallen dat ze bijzonder betaalbaar en gebruiksvriendelijk zijn, maar misschien is het meest om deze redenen het BitBalloon..
BitBalloon is gratis te proberen, maar vereist betaling om een aangepast domein op te nemen, net zoals NeoCities. Het gemak waarmee bestanden kunnen worden gesleept en neergezet in de interface maakt dit een behoorlijk opwindende optie voor basissites zoals Tuts + Town.
Nadat de bestanden zijn overgedragen, kunnen we het installatieproces voor het aangepaste domein voltooien via de hulpmiddelen in het BitBalloon-dashboard.
Onze site Tuts + Town heeft een eigen site-adres dat is verkregen en ingesteld zoals we zojuist hebben besproken: tutsplustown.com.
Hoewel deze serie een inleiding bood tot webdesign, kunnen we snel onze vaardigheden willen verbeteren als we eenmaal klaar zijn oefenen, oefenen, oefenen de onderwerpen die we hier hebben besproken.
Het boek "Bouw je eigen website, een komische gids voor HTML, CSS en Wordpress" door Nate Cooper biedt een solide basis voor het maken van een site door middel van een leuk verhaal verteld in een komisch formaat.
Shay Howe heeft geschreven als een reeks diepgaande zelfstudies op zowel beginners- als gevorderd niveau HTML en CSS:
Responsief webontwerp verwijst naar het ontwerpen van sites die rekening houden met verschillende schermformaten. We brengen bijvoorbeeld veel tijd door op onze smartphones en als ontwerpers moeten we ervoor zorgen dat onze site op deze kleinere schermen werkt, evenals een volledig scherm op het bureaublad.
Er is een fantastische tutorial over beginners van Shay Howe over dit onderwerp.
We hebben pixels in deze serie gebruikt als meeteenheid op het web. Het gebruik van pixels is perfect als je begint, maar hoe meer ervaring je krijgt, hoe meer je beseft hoe beperkt ze zijn. Het is zo'n inflexibele meeteenheid die niet goed presteert in responsief ontwerp.
In termen van ontwerpen op verschillende schermformaten zijn er verschillende alternatieven die flexibeler zijn dan pixels, zoals percentages en Rems.
Hoewel we kort hebben gesproken over flexbox in de CSS Layout-tutorial, is er nog veel meer dat we kunnen bereiken met behulp van lay-outs. Er zijn een paar superplekken om meer te leren, zoals deze Complete Guide to Flexbox en een Cheatsheet Cheatsheet-diagram.
Wat de lay-out als geheel betreft en niet alleen flexbox, er is een nette, kleine site die ons door de basis helpt.
Hoewel we nog veel meer kunnen leren om onze webontwerpvaardigheden te versterken en te laten groeien, hebben we in deze serie zoveel bereikt en nu hebben we een veel beter begrip van de basisbeginselen voor zowel het ontwerpen als het bouwen van een site..
We hebben een website officieel tot leven gebracht, van schetsen op papier tot een echte site met een heel eigen webadres; allemaal op de dag van een webdesigner!
Onze Tuts + Town-website zal dienen als een mooie, gemakkelijk te gebruiken gids voor toeristen die een bezoek overwegen, dus bedankt voor al je harde werk.
Accentsconagua