Leer HTML en CSS met deze stapsgewijze zelfstudies

Wanneer je graag code probeert, is er gewoon geen limiet voor het aantal tutorials, video's en online cursussen dat je kunt uitproberen. Maar soms is de beste manier om iets te leren, door erin te duiken en het uit de eerste hand te proberen. Webontwikkeling is niet anders.

Als je nieuwsgierig bent naar HTML, CSS en JavaScript, of denkt dat je misschien handig bent in het leren hoe je vanaf het begin nieuwe websites kunt maken - er zijn een paar geweldige stapsgewijze zelfstudies het proberen waard.

In de volgende lijst met handleidingen wordt de basisbeginselen van HTML en CSS behandeld en krijgt u zelfs een introductie tot de complexe wereld die JavaScript is. Wat is JavaScript en kan internet zonder het bestaan? Wat is JavaScript en kan internet zonder het bestaan? JavaScript is een van die dingen die velen als vanzelfsprekend beschouwen. Iedereen gebruikt het. Lees meer - althans voor beginners. Maar wat ze niet doen, is je voorbereiden op een leven als een ontwikkelaar, direct uit de doos. De meeste van deze services zijn eenvoudig een gemakkelijke plaats om te beginnen.

Het zal veel meer dan dit vergen om op professionele wijze websites te gaan ontwikkelen. Deze tools, waarvan de meeste gratis zijn, geven je de basisbouwstenen voor webontwikkeling, en zal het veel gemakkelijker maken om in de ingewikkeldere cursussen te duiken.

Dash van General Assembly

De mensen bij General Assembly hebben een gratis tool die je de basis van HTML, CSS en JavaScript leert, en het is de perfecte plek voor beginnende beginners. Door een reeks van vijf projecten, je leert de terminologie en elementaire codeervaardigheden waardoor je een website kunt bouwen die lijkt op een about.me-pagina, hoe je een responsieve blog opbouwt en een restaurantwebsite.

De Dash-zelfstudies gaan verder dan het leren maken van eenvoudige websites, je kunt ook de kracht van HTML, CSS en JavaScript benutten om een ​​robot te maken met vormen en lijnen of zelfs een Mad Libs-spel.

De dash-tutorials bewegen zich in een redelijk tempo en nemen je bij elke stap enkele regels code tegelijk voor. Zoals met elke tutorial, zou ik aanraden aantekeningen te maken terwijl je werkt. Dit helpt je de verschillende tools te onthouden die je aan het leren bent, en met de tutorials van de Algemene Vergadering, als je eenmaal een fase hebt voltooid, lijkt er geen manier te zijn om het te herhalen.

Conclusie: Met behulp van Dash wordt u klaargestoomd met alle kennis die u nodig hebt om een ​​moderne basiswebsite samen te stellen - van navigatie tot responsief ontwerp. Je maakt zelfs kennis met de basisprincipes van het maken van een aangepast Tumblr-thema. Dat gezegd hebbende, er zijn slechts een totaal van vier lessen over Dash. Hoewel je de concepten die je hebt geleerd op verschillende manieren kunt toepassen en proberen toe te passen, moet je je kennis aanvullen met andere cursussen die in deze lijst zijn opgenomen..

Codecademy

Codecademy is al een behoorlijk stuk langer dan Dash en voegt vaak nieuwe lessen toe aan zijn aanbod. Met dezelfde stapsgewijze allesomvattende lessen die je in Dash vindt, gaat Codecademy nog een stap verder door gebruikers een algemeen overzicht te geven van het maken van een website met HTML en CSS, maar biedt ook diepgaande zelfstudies over de afzonderlijke talen , HTML, CSS en JavaScript.

Net als andere services laat Codecademy je zien hoe je een navigatiemenu maakt, achtergrondafbeeldingen toevoegt, een galerij met afbeeldingen maakt, of zelfs een aanmeldingspagina. (Om functionaliteit toe te voegen aan uw aanmeldingspagina, moet u de zelfstudie Ruby on Rails doorlopen.)

Er zijn ook speciale lessen over jQuery Making The Web Interactive: een inleiding tot jQuery Making The Web Interactive: een inleiding tot jQuery jQuery is een client-side scriptingbibliotheek die bijna elke moderne website gebruikt - het maakt websites interactief. Het is niet de enige JavaScript-bibliotheek, maar het is de meest ontwikkelde, meest ondersteunde en meest gebruikte ... Lees meer, een belangrijke taal die JavaScript veel gemakkelijker te leren maakt. Als je nieuwsgierig bent naar de ontwikkeling van de backend, zijn er ook diepgaande lessen voor Ruby, Python, PHP en meer.

Naast het leren ontwerpen van een website en duiken in de fijne kneepjes van programmeertalen 7 Nuttige trucs voor het beheersen van een nieuwe programmeertaal 7 Nuttige trucs voor het beheersen van een nieuwe programmeertaal Het is prima om overweldigd te zijn als je leert programmeren. Je zult dingen waarschijnlijk zo snel vergeten als je ze leert. Deze tips kunnen u helpen om al die nieuwe informatie beter te bewaren. Lees meer, je kunt ook de Codecademy gebruiken om de basis te krijgen voor het maken van webapps en hoe je de aanmeldings-, inlog- en uitlogfunctionaliteit aan je website kunt toevoegen.

Conclusie: Net als Dash is de interactiviteit van Codecademy van onschatbare waarde. In staat zijn om te zien hoe elke stap in je website uitpakt, is bemoedigend en de opstelling maakt het ook gemakkelijk om fouten te herkennen. Als je een complete beginner bent, is de Codecademy een geweldige plek om je tenen nat te maken en te beslissen of coderen en webontwerp de juiste pasvorm voor je zijn. Met die ervaring kun je die kennis meenemen naar een betaalde cursus of klas.

Tuts+

Tutsplus.com is een website vol met tutorials (gratis en betaald) over een breed scala aan onderwerpen, waaronder alles van mobile Designing A Breakthrough App? 7 Mobiele ontwikkelingsblogs die je moet lezen Een doorbraak-app ontwerpen? 7 Mobiele ontwikkelingsblogs die u moet lezen De mobiele ruimte is zo nieuw dat trends voortdurend veranderen en elke dag nieuwe inzichten worden aangebracht. Als u van plan bent mobiele apps te ontwikkelen, hoe kunt u dan bijhouden zonder gek te worden? Lees meer en spelontwikkeling 4 Gratis websites waar u de basisprincipes van spelontwikkeling kunt leren 4 Gratis websites waar u de basisprincipes van spelontwikkeling kunt leren Wanneer u op zoek bent naar een goede spelontwikkelingszelfstudieserie, wilt u er een die u de gewoonten en mentaliteit leert. van goede codering omdat u die praktijken vervolgens in elke taal of platform kunt transponeren. Meer lezen voor kleurentheorie Leren van kleurentheorie in minder dan een uur Leren van kleurentheorie in minder dan een uur Basiskennis van kleurentheorie kan het verschil betekenen tussen een "amateur" esthetische en een "professionele" - en het is echt duurt niet lang om te leren. Meer lezen en Adobe Illustrator gebruiken Leer jezelf gratis Adobe Illustrator Leer jezelf Adobe Illustrator voor gratis Adobe Illustrator is sinds jaar en dag het illustratietool bij uitstek voor grafische kunstenaars. Klaar om uw ontwerpen tot leven te brengen? U kunt als volgt gratis Adobe Illustrator leren kennen. Lees verder . Hoewel niet alle lessen die op de website worden gegeven, het stapsgewijze model volgen, zijn er een paar die deze aanpak volgen en gebruikers door eenvoudige webontwikkeling-hows leiden..

Een bijzonder nuttige zelfstudie leidt u door de stappen om uw website te ontwerpen en te coderen. De zelfstudie gaat weliswaar terug tot 2009, dus de ontwerpesthetiek spreekt misschien niet tot je, maar dat gezegd hebbende, leert de tutorial je de vaardigheden die nodig zijn om je website te ontwerpen, en je kunt die vaardigheden vervolgens toepassen op een meer bijgewerkt ontwerp. Een andere waarschuwing die het vermelden waard is in deze zelfstudie, is dat Adobe Photoshop moet worden gebruikt. Als u geen toegang hebt tot de software, kunt u altijd kiezen voor de optie Adobe Creative Cloud voor een vergoeding van $ 50 per maand.

De tutorial leidt je door het ontwerpen van een standaard tweekoloms-website met een kop- en voettekst. De website bevat inhoud, een navigatiebalk, knoppen voor sociale media en meer. Nadat u de website in Photoshop hebt ontworpen, kunt u overschakelen naar een code-editor en de zelfstudie doorloopt de code die nodig is om uw ontwerp om te zetten in een HTML-pagina. De zelfstudie vereist enige basiskennis van HTML, dus ik raad aan deze tutorial uit te proberen nadat je de eerste paar tutorials over de Algemene Vergadering hebt doorgenomen.

Als je een meer uitgebreide website wilt maken, bekijk dan nog een Tuts + tutorial over hoe je een prachtige website helemaal opnieuw ontwerpt. Een andere PSD-naar-HTMl-tutorial maakt het leven een beetje gemakkelijker door HTML-, CSS- en afbeeldingsbestanden aan te bieden. Andere tutorials over Tuts + laten je zien hoe je een Tumblr-dagboekthema maakt - hoewel dit een eenvoudig Photoshop-ontwerp is, minus de code.

Conclusie: In vergelijking met Codecademy en Dash nemen de tutorials van Tuts + een beetje meer inspanning, omdat je jezelf door de stappen heen moet lopen. Met de andere twee sites is er zogezegd veel meer 'hand houden'. Als je elke stap hebt doorlopen, is het vaak gemakkelijker om erachter te komen welke fout je hebt gemaakt. Het vereist ook dat u uw eigen software gebruikt, terwijl Dash en Codecademy ingebouwde systemen hebben. Dat gezegd hebbende, met de verscheidenheid aan tutorials, zult u vast en zeker een aantal lessen vinden die exact aansluiten bij wat u wilt leren.

Leren coderen met Shaye Howe

Met een reeks van 12 lessen, doet Shaye Howe het echt geweldig om de basisbegrippen van HTML te doorbreken en je kennis te laten maken met de terminologie en de verschillende elementen van HTML en CSS te gebruiken. Verschillende lessen omvatten het leren kennen van HTML, CSS, het begrijpen van het boxmodel, het positioneren van content, typografie en meer.

Als het gaat om het toepassen van de lessen in de zelfstudie, biedt de website geen manier om snel te zien hoe uw HTML en CSS eruitzien. Om dit te verhelpen, kunt u een online tool gebruiken die dezelfde functies biedt als Codecademy en Dash.

Bekijk een CSS / HTML / JavaScript-sandbox zoals CSSDeck of LiveWeave, waarmee u HTML, CSS en JavaScript kunt invoeren en het uiteindelijke resultaat kunt bekijken. Technisch gezien kun je ook de HTML-, CSS- en JavaScript-editors in Dash en Codecademy gebruiken, als je van de setup houdt die ze bieden.

Terwijl u zich een weg baant door de uitleg, biedt de site ook voorbeelden van code die u zelf kunt uitproberen. Aan het einde van elke les is een praktische oefening waarmee je kunt toepassen wat je hebt geleerd.

Nadat je de 12 lessen hebt doorlopen, kun je overschakelen naar de geavanceerde HTML- en CSS-les met responsief ontwerp, jQuery en nog veel meer.

Conclusie: Deze tutorial heeft een enigszins andere benadering dan de andere suggesties die hier worden vermeld. Met een veel diepgaander uitleg, zult u meer tijd aan het lezen besteden dan aan het toepassen van wat u hebt geleerd. Hoewel dit voor sommigen misschien saai klinkt, zijn er hier enkele waardevolle lessen die context bieden en een beter begrip van hoe deze talen werken.

What's Your Take?

Nu is het tijd om iets van je te horen. Zijn er online tutorials voor webontwikkeling die u zou aanbevelen? Wat denk je dat de volgende stap is na het uitproberen van deze online cursussen? Laat het ons weten in de comments.

Beeldcredits: hackNY.org

Meer informatie over: onderwijstechnologie, HTML, HTML5, webontwerp.