Uanset om de tæller som programmeringssprog eller ej, er der næppe tvivl om, at HTML og CSS – sammen med JavaScript – udgør hjørnestenen i World Wide Web. Heldigvis er de nogle af de nemmeste teknologier at lære og fremvise.
Hvordan øver og demonstrerer du dine færdigheder som aspirerende webudvikler? For det første har du brug for et eller flere projekter for at teste dine evner og fremme læringsprocessen ud over blot at lære syntaksen.
Disse otte projekter er perfekte til at finpudse dine HTML- og CSS-færdigheder og vise, hvad du har lært.
Opbygning af en personlig hjemmeside er blandt de mest populære, men udfordrende projekter for HTML- og CSS-begyndere. Det er et velafrundet projekt, der tester de fleste færdigheder erhvervet i løbet af din læringsproces. Desuden er en personlig hjemmeside et glimrende sted at vise dit CV og linke dit GitHub-konto.
Mange begyndere bruger software som SquareSpace eller WordPress til at håndtere de mere tekniske aspekter af webstedsopbygning. Ved at bruge disse værktøjer kan du fokusere på at finpudse dine opmærknings- og stylingfærdigheder. Eller du kan bygge en hjemmeside fra bunden og udfordre alle dine færdigheder.
En personlig hjemmeside kan fungere som en portfolio for alt dit arbejde. Overskriften er perfekt til at præsentere dig selv, vise kontaktoplysninger og linke andre værker. På samme måde kan sidefoden indeholde links til konti på sociale medier og yderligere information om dig og dine tjenester.
En hyldestside er et enkeltsidet websted, der beskriver kvaliteterne hos en person, du betragter som et idol eller forbillede. Dette projekt kræver kun grundlæggende HTML- og CSS-færdigheder og er en af de enkleste opgaver, du kan bruge til at fremvise dine evner.
En hyldestsides mest fremtrædende træk er motivets billede. Som sådan kræver korrekt placering af dette billede tekniske færdigheder, designfærdigheder og øje for detaljer. Du skal vælge de rigtige baggrundsfarver for at komplementere billedet.
Emnets navn er lige så vigtigt som billedet, ofte fremhævet med unikke skrifttyper og farver i overskriften. Derudover indeholder en hyldestside et eller to afsnit om emnet, links og offentlige kontaktoplysninger.
Et spørgeskemaprojekt vil teste din viden og færdigheder i interaktive kontroller. Det dækker hele spektret af UI/UX, inklusive modtagelse og indsendelse af brugerinput. Desuden vil du bruge HTML-elementer som alternativknapper, tekstfelter, afkrydsningsfelter og etiketter i dette projekt.
Din undersøgelsesformular behøver ikke at stille spørgsmål fra det virkelige liv eller gemme svar i en database. I stedet kan du bruge pladsholdertekst til at demonstrere din kommando over korrekt websidestruktur. Ydermere kan du lave en responsiv formular, der justerer dens indhold baseret på skærmstørrelse.
En landingsside er et andet enkeltsidet websted, der er specielt designet til marketingkampagner. Det har til formål at tiltrække kunder til en virksomhed eller generere kundeemner. Som sådan er en landingsside ofte det første kontaktpunkt med søgemaskineoptimerede hjemmesider.
Du kan bruge analyser til at bestemme, hvor effektiv din landingsside er. At designe landingssiden for at sikre maksimalt engagement er af største vigtighed. En landingsside er et af de mere udfordrende projekter for begyndere, på trods af dens enkelhed.
Du skal bruge kreative færdigheder til dette projekt, hvor du får mest muligt ud af de forskellige HTML-elementer, du har til rådighed. Du skal beherske CSS for at tage højde for komplekse layouts på forskellige enheder.
Din landingsside skal være interaktiv og lydhør nok til at fange dit publikum og generere brugeraktivitet.
Ved første øjekast virker en begivenhedsside som et hvilket som helst statisk websideprojekt på denne liste. Dens definerende funktion er dog en registreringsknap for besøgende, der er interesseret i at deltage i begivenheden. En anden iøjnefaldende funktion er links til mødested, rejseplan og højttalere.
Dette projekt tester din evne til at passe en masse information ind i et begrænset rum. Derfor skal din webside tydeligt angive begivenhedens formål og fordele, hvis det er relevant. Du kan også inkludere relevante billeder af mødestedet, højttalere og begivenhedstema.
En begivenhedsside kræver, at du ved, hvordan du bruger HTML og CSS til at opdele din side i sektioner. Derudover skal sidehovedet indeholde en interaktiv menu, og sidefoden skal vise supplerende information.
En restaurantwebside skal bruge den rigtige kombination af farver for at få mad og drikke til at se mere attraktivt ud for kunderne. Du kan også gøre hjemmesiden interaktiv at øge kundeengagementet. Hvis du for eksempel svæver over et måltids billede, kan det vise et menukort, der indeholder pris og tilgængelighed.
Dette projekt giver mulighed for at udfordre dine layoutevner. For eksempel kan du bruge billedskydere til at vise restaurantens menumuligheder. Alternativt kan du bruge CSS-gitter eller flexbox for at justere madvarerne. Simple animationer på knapper og billeder kan også give din hjemmeside et spændende udtryk.
Et restaurantwebsted kan kræve færdigheder ud over simpel HTML og CSS, såsom jQuery og @keyframes.
En hjemmesideklon betragtes ofte som den ultimative test af dine HTML- og CSS-færdigheder, og det tager mere tid og kræfter at gennemføre end noget andet projekt. Videodelingssider ligesom YouTube og Netflix er populære kandidater til hjemmesidekloning på grund af deres kompleksitet og professionelle udseende.
Kloningsprocessen begynder med skærmbilleder af webstedets brugergrænseflade, især de interaktive elementer. Derefter bruger du alle de færdigheder, du har til rådighed, til at kopiere udseendet og fornemmelsen af de forskellige dele af hjemmesiden.
Dit klonested skal indeholde funktioner som søgemaskiner, kommentarsektioner, kanaler og betalingsplaner. Du kan også integrere en HTML5-videobaggrund for at efterligne videoafspilningsfunktionerne på disse websteder.
Dette projekt giver et indblik i tankeprocessen hos store, professionelle webudviklingsteams. Hvad mere er, kan du bruge Inspicere værktøj på din webbrowser til at kigge på HTML- og CSS-kildekoden for disse websteder.
Parallaxscrolling er en udbredt effekt på moderne hjemmesider, hvor baggrundselementerne bevæger sig med forskellige hastigheder fra forgrundselementerne, når de scroller. På trods af dets visuelt betagende udseende er et parallax-websted et af de nemmeste projekter for begyndere.
For at få den bedste parallakseeffekt skal du opdele din webside i tre eller fire sektioner, hver med et forskelligt baggrundsbillede. Nøgleingrediensen til at lave et parallax-websted er baggrundsvedhæftning: fast CSS-egenskab på de relevante billeder.
Nogle begyndere bruger online hjemmesidebyggere som Wix, WordPress og Elementor for hurtigt at oprette parallakse-websteder. Disse værktøjer underminerer dog udfordringen og læringsprocessen med at skabe en parallakseeffekt fra bunden.
Næste trin i din webudviklingsrejse
HTML og CSS er blot to af de mange teknologier, du kan bruge til at skabe interaktive hjemmesider. Som et resultat er det ofte overvældende og forvirrende for begyndere at vælge en stak at fokusere på.
Heldigvis skiller ét programmeringssprog sig ud som kongen af webudvikling. JavaScript kan være mere udfordrende at mestre end HTML og CSS, men belønningen er enorm. At lære JavaScript giver dig mulighed for at bruge rammer som React, Angular og Vue.js, hvilket sparer tid og kræfter, når du opretter et fantastisk websted.