Code uw eigen Website

heeft u ooit willen leren hoe u webpagina ‘ s ontwerpt of een site online maakt? Vandaag laten we u zien hoe u uw eigen persoonlijke website kunt bouwen! Bekijk de tutorial video om te zien Juni instructeur Maya loop je door elke stap van de weg.

Lees verder voor meer informatie over het belang van het leren van webontwikkeling, een stap-voor-stap handleiding bij de video, en om meer te weten te komen over tools die u kunt gebruiken om uw webontwikkelingservaring verder te verbeteren.

onthouden:

  • de website in deze handleiding is slechts een voorbeeldproject voor onderwijsdoeleinden. Houd er voor aanvang rekening mee dat minderjarigen geen persoonlijke informatie online moeten plaatsen, zoals uw volledige naam, adres of telefoonnummer! Wees ook voorzichtig bij het uploaden van persoonlijke foto ‘ s online.
  • als u niet zeker weet wat u kunt uploaden, raadpleeg dan altijd een VOLWASSENE.

voor wie is dit?

the learning outcomes for beginner HTML/CSS coding project Personal Website.
deze projectinformatie en de samenvatting van de leerresultaten zullen u helpen te beslissen of dit HTML/CSS-codeerproject geschikt is voor u.

dit project valt onder onze JavaScript level 1 codering klasse voor kinderen. Deze beginner HTML / CSS tutorial is voor studenten die willen een medium uitdaging project, ongeveer 121 regels code lang. Het zal helpen om een basiskennis te hebben van hoe HTML en CSS vooraf werken, maar als je helemaal nieuw bent, leggen we ook meer basics uit in deze video!

deze tutorial is zeer geschikt voor beginners in het coderen, in het bijzonder diegenen die geïnteresseerd zijn in design of kunst. We raden aan dat studenten 12 jaar of ouder zijn om mee te volgen.

voor leerresultaten krijg je veel oefening met div, lijsten, links, positie, display, tekst (h1/h2/p), lettertypen en algemene CSS. Dit project duurt naar schatting ongeveer 40 minuten of langer, afhankelijk van hoe creatief je wordt, maar je moet sneller of langzamer bewegen in je eigen tempo!

Waarom Webontwikkeling Leren?

tegenwoordig hoeft u geen webontwikkeling of-codering te kennen om een website te maken. Tegen het einde van dit artikel, we laten u een paar drag-and-drop website makers die het proces ongelooflijk gemakkelijk te doen zal maken. Dus waarom zou je leren web development? Dat is een goede vraag.

onbeperkt aanpassen

alle eenvoudige tools voor het maken van websites zijn in feite beperkt. Ze bieden u een set van thema ‘ s en plugins die zijn zeer eenvoudig voor beginners te gebruiken – zolang je niet nodig hebt om ze te wijzigen.

wanneer u een thema wilt wijzigen of iets meer op maat wilt doen met uw website, dan hebt u tenminste een basiskennis van web development code nodig. Als voorbeeld, met een beetje Javascript kennis, kunt u bijna elke social media feed te integreren in uw website!

codering carrières & stichtingen

als u ooit een carrière in codering hebt overwogen, zal webdesign en webontwikkeling u ook een enorme voorsprong geven. Web development helpt kinderen en nieuwe programmeurs die geïnteresseerd zijn in kunst en design om hun passie te verkennen, terwijl ze ook basisbegrippen leren. Carrière opzij, er zijn ook talloze life skill voordelen aan het leren programmeren voor kinderen.

toepasbaar op vele velden

ten slotte is het bouwen van uw eigen website een waardevolle vaardigheid in het huidige digitale tijdperk. Bloggers willen ontwikkelaars om ze aangepaste blogs te maken. Internet bedrijven zijn op zoek naar ontwikkelaars om e-commerce sites te bouwen in plaats van alleen het posten van items op Amazon.

het is een gouden eeuw voor website ontwerp en ontwikkeling, en een geweldige tijd om te leren hoe je je eigen site te bouwen!

aan de slag!

we gaan basic HTML en CSS gebruiken om te leren hoe je een eenvoudige persoonlijke website maakt.

Project Demo

voordat u begint met het schrijven van code, zie hoe ons voltooide project werkt als referentie. Bekijk de video om alle functies van onze projectwebsite te bekijken.

u kunt ook onze projectoplossing code bekijken als u vast komt te zitten.

waar moet u rekening mee houden voordat u begint:

  • er is een afbeeldingskop met tekst erop. De tekst heeft verschillende groottes en gebruikt twee verschillende lettertypen. Het heeft ook een witte omtrek.
  • het witte gedeelte eronder heeft twee delen naast elkaar.
  • we hebben een lijst met hyperlinks, die naar een andere pagina linken. Als je boven hen zweeft, veranderen ze in blauw.
  • er is ook een Over mij sectie met tekst.
  • daaronder bevindt zich een ervaringssectie met een andere achtergrondkleur.

stappen om het Project te coderen

om onze website te bouwen, volgen we deze volgorde van stappen. Bekijk de tutorial om te zien hoe instructeur Maya codeert elk deel, en volg samen met de uitleg hieronder.

  1. voeg de afbeeldingskop & de tekst toe die erop staat.
  2. maak de lijst met links die u wilt delen.
  3. maak de sectie Over mij aan.
  4. maak de sectie ervaring aan.

stap-voor-stap Tutorial

Stap 1: voeg de afbeeldingskop & de tekst toe die erop staat.

  • Maak een div met relatieve positie om de afbeelding en tekst te bevatten.
  • Maak een div om de tekst te bevatten, en gebruik absolute positionering om het op de afbeelding te plaatsen.
  • gebruik <h1> en <h3> om de tekst toe te voegen.
  • gebruik CSS om het tekstlettertype te wijzigen.
  • gebruik CSS om de extra marge & opvulling rond de afbeelding te verwijderen.

Stap 2: Maak de lijst met links die u wilt delen.

  • Maak een div met relatieve positionering om de sectie links en over mij te bevatten.
  • padding toevoegen aan div.
  • Maak een div met inline-block display om de lijst met links te bevatten.
  • gebruik <ul> om een lijst aan te maken.
  • gebruik <li> en <a> om de links aan te maken.
  • gebruik <i> en een font-awesome link om pictogrammen toe te voegen.
  • Wijzig de CSS zodat deze op het origineel lijkt.

Stap 3: Maak de sectie Over mij aan.

  • Maak een div met inline-block display om de sectie Over mij te bevatten.
  • gebruik <h3> en <p> om tekst toe te voegen.

Stap 4: Maak de sectie ervaring aan.

  • Maak een div met relatieve positionering om de Ervaringssectie te bevatten.
  • Maak een div voor de eerste ervaring, en gebruik <h4> en <p> om tekst toe te voegen.
  • voeg meer ervaringsdiv ‘ s toe!

volgende stappen

geweldig werk! Nu, voel je vrij om meer secties toe te voegen aan uw website. Sommige ideeën kunnen een sectie bevatten voor projecten waaraan je hebt gewerkt of clubs waar je in zit. U kunt ook uw nieuwe website uploaden naar het web met behulp van Github en Github pagina ‘ s.

tools voor het aanmaken van webpagina ‘s

verschillende mensen gebruiken een tool voor het aanmaken van webpagina' s om een website te bouwen

zoals we eerder al zeiden, zijn er verschillende website-makers. De meeste van de beste website bouwers zijn gemaakt om het proces te stroomlijnen door u te voorzien van sjablonen, drag-and-drop interfaces, en alle andere functionaliteiten die u nodig hebt om een gratis persoonlijke website te creëren.

alleen omdat u een basiskennis van webontwikkeling hebt, betekent niet dat u deze tools moet vergeten. Ze kunnen u helpen bij het hosten van uw nieuwe website, het vinden van een aangepast domein (de naam en het adres van uw website), en bieden u sjablonen, thema ‘ s en plugins die uw web design proces zal versnellen.

door het verzorgen van de basis, deze tools geven u een kans om uw nieuwe codering vaardigheden te richten op het aanpassen van uw website tot in de perfectie! Of-zelfs als je alles vanaf nul wilt bouwen — deze tools kunnen je een aantal geweldige ideeën geven voor wat te bouwen en hoe het te bouwen.

hier zijn enkele van de meest populaire tools voor het maken van webpagina ‘ s:

  • Wix

Wix is een van de makkelijkst te gebruiken website bouwers die er zijn. Hun gratis plan is compleet genoeg om het een geweldige optie voor een kind website builder, zolang je oke bent met uw URL wordt een subdomein van Wix (sitename.wixsite.com). ze hebben betaald plannen met een redelijke prijs als je ontgroeien de gratis tier.

  • WordPress

hoewel mensen het kennen als een Gratis website builder, wat WordPress is echt een content management systeem (CMS). In een eenvoudige zin, het verschil is dat een website builder is gemakkelijker te gebruiken, maar een CMS biedt meer mogelijkheden voor maatwerk. Hoewel WordPress zelf gratis is, moet u misschien betalen voor een aantal thema ‘ s en plugins of voor hosting als u uw eigen domeinnaam wilt.

  • Weebly

Weebly is een website builder, Net als Wix. Het primaire verschil is dat Weebly biedt veel minder aanpasbaarheid, waardoor het een gebruiksvriendelijke optie die is geweldig voor het coderen voor kinderen, maar minder kans om te groeien met u als uw website gebouw vaardigheden te verbeteren.Blijf leren: Web Development klassen voor KidsCongratulations, je hebt nu je eigen website! Dit is een spannende stap waar je ongelooflijk trots op moet zijn. Het leren hoeft daar ook niet te stoppen.

Keep Learning: Web Development Courses for Kids

Juni Learning biedt Webprogrammeercursussen voor kinderen die je de vaardigheden geven die je nodig hebt om je nieuwe site een boost te geven, of zelfs om webapplicaties en portfolio ‘ s te bouwen. Buiten web development, We geven ook codering cursussen voor kinderen 8-18 in een verscheidenheid van talen, zoals Scratch, Python, Java, C++, en meer.

Bekijk onze online cursussen voor kinderen, of neem contact op met ons team van Juniadviseurs om te leren welke cursus het beste is voor uw student!

Articles

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.