20 webdevelopmentprojecten voor beginners (met startcode)

Webdevelopmentprojecten voor beginners

20 webdevelopmentprojecten voor beginners, met startcode | We.Inc

20 webdevelopmentprojecten voor beginners in HTML, CSS, JavaScript en React, elk met wat het u leert en een korte startcode om te plakken en uit te bouwen.

Begin met projecten die elk één nieuw idee aanleren: een persoonlijke pagina voor HTML en CSS, een teller en een takenlijst voor JavaScript-events en state, en daarna een weer- of quiz-app voor fetch en JSON. Stap over op React zodra gewoon JavaScript makkelijk aanvoelt. Elk project hieronder komt met een startcode die u kunt plakken en uitbreiden.

Een logische volgorde

Lijsten met beginnersprojecten stoppen meestal bij een titel. Elk project hier vertelt welke vaardigheid u oefent, ongeveer hoe lang het duurt, en geeft u een paar regels werkende code om mee te beginnen, zodat u uw eerste uur besteedt aan bouwen in plaats van naar een leeg bestand te staren. Filter op niveau of op de taal die u wilt oefenen.

Veelgestelde vragen

Wat moet mijn eerste webdevelopmentproject zijn?

Een profielpagina van één pagina over uzelf in gewoon HTML en CSS. U hebt niets anders nodig dan een teksteditor en een browser, en het behandelt koppen, alinea's, links, afbeeldingen en basisopmaak.

Is een todo-app te simpel voor een portfolio?

Op zichzelf wel, want bijna elke leerling bouwt er een. Maak hem van uzelf: voeg deadlines, filters, slepen om te herordenen of opslaan in localStorage toe, en schrijf een korte notitie over wat u zou verbeteren.

Wanneer moet ik React leren?

Zodra u de teller, de takenlijst en een app met fetch in gewoon JavaScript kunt bouwen zonder tutorial. React is veel logischer als u hebt gevoeld hoe lastig het is om de DOM met de hand bij te werken.

Heb ik een backend nodig voor deze projecten?

Nee. Alle twintig draaien in de browser. De dataprojecten roepen gratis openbare API's of een lokaal JSON-bestand aan, en de projecten die opslaan gebruiken localStorage, dat tekstdata zonder vervaldatum in de browser bewaart.

Hoeveel projecten heb ik nodig voordat ik ga solliciteren?

Er is geen vast aantal. Drie of vier afgeronde, verzorgde projecten die verschillende vaardigheden laten zien, zeggen meestal meer dan twintig halve.

Kies projecten op vaardigheid, niet op onderwerp

Maak elk project presentabel

Een leeg startbestand

Sla dit op als index.html, open het in uw browser en plak elk HTML-project in de body.

Bevat de viewport-tag zodat telefoons het op het juiste formaat tonen, en een script-tag voor de JavaScript-projecten.

Persoonlijke profielpagina

Beginner

HTML/CSS

1 tot 2 uur

Paginastructuur, koppen, afbeeldingen, links

Voeg een donker thema toe met prefers-color-scheme.

Receptpagina

Beginner

HTML/CSS

1 uur

Genummerde en ongenummerde lijsten, semantische secties

Voeg een print-stylesheet toe die de foto verbergt.

Landingspagina voor een product

Beginner

HTML/CSS

3 uur

Flexbox, witruimte, knoppen, responsive tekst

Laat de rij met functies onder 600px onder elkaar staan.

Responsive fotoraster

Beginner

HTML/CSS

1 uur

CSS grid, auto-fit, object-fit

Open een grotere weergave als op een foto wordt geklikt.

Toegankelijk aanmeldformulier

Beginner

HTML/CSS

2 uur

Labels, invoertypes, ingebouwde validatie

Toon onder elk veld een eigen foutmelding.

Klikteller

Beginner

JavaScript

30 minuten

Elementen selecteren, klik-events, tekst bijwerken

Voeg een resetknop toe en stop bij nul.

Takenlijst

Beginner

JavaScript

2 uur

Formulier verzenden, arrays, een lijst renderen

Sla taken op zodat ze een herlaadbeurt overleven.

Fooiencalculator

Beginner

JavaScript

1 uur

Input-events, getallen, bedragen opmaken

Verdeel de rekening over meerdere personen.

Schakelaar voor licht en donker

Beginner

JavaScript

45 minuten

Classes wisselen, een voorkeur opslaan

Gebruik bij het eerste bezoek standaard de systeeminstelling.

Afteltimer

Gevorderde beginner

JavaScript

1 uur

setInterval, datums, timers stoppen

Laat de gebruiker de doeldatum kiezen.

Meerkeuzequiz

Gevorderde beginner

JavaScript

3 uur

Data in arrays van objecten, scores, state

Schud de vragen door elkaar en toon een voortgangsbalk.

Notities opgeslagen in de browser

Gevorderde beginner

JavaScript

2 uur

localStorage, JSON.stringify en JSON.parse

Voeg zoeken en een verwijderknop per notitie toe.

Weer-app

Gevorderde beginner

API's

3 uur

fetch, async/await, foutstatussen

Toon een laadmelding en een vriendelijke foutmelding.

GitHub-profielkaart

Gevorderde beginner

API's

2 uur

JSON-velden uitlezen, kaarten bouwen uit data

Toon de vijf nieuwste repository's van de gebruiker.

Live zoekfilter

Gevorderde beginner

JavaScript

1 uur

Arrays filteren, input-events, lege toestanden

Markeer de overeenkomende letters.

React-teller

Volgende stap

React

30 minuten

Componenten, useState, event handlers

Voeg een invoerveld voor de stapgrootte toe.

React-todo-app

Volgende stap

React

3 uur

Lijsten met keys, controlled inputs, immutable updates

Voeg de filters Alle, Actief en Klaar toe.

React-gebruikersoverzicht

Volgende stap

React

2 uur

useEffect, laad- en foutstatussen

Voeg een zoekvak toe dat op naam filtert.

Mini-kanbanbord

Volgende stap

React

4 uur

State omhoog tillen, items tussen lijsten verplaatsen

Voeg slepen en neerzetten tussen kolommen toe.

Uitgavenbeheer

Volgende stap

React

4 uur

Afgeleide waarden, reduce, formulieren met meerdere velden

Zet de uitgaven per categorie in een grafiek.

De 20 projecten

Filter op niveau of vaardigheid en open daarna een project voor de startcode.

Filter op niveau

Filter op vaardigheid

{n} van {total} projecten getoond

Kopiëren

{level} · {skill} · {time}. Leert u: {teaches}. Uitbreidingsdoel: {stretch}

Gratis beginnen · Geen creditcard nodig

Gerelateerd: Gidsen

Product

Voor wie

Functies

Bronnen

Bedrijf

Sitemap