Att lära sig koda är alltid spännande och roligt för alla och när det gäller att ge sig in i programmeringsvärlden börjar de flesta med de enklaste sakerna HTML och CSS. Varje nybörjares kodningsresa i frontend börjar med dessa två grundläggande byggstenar och du måste vara kreativ när det gäller att utforma en vacker applikation.
Inledningsvis tycker nybörjare om att göra knappar, lägga till länkar, lägga till bilder, arbeta med layout och många häftiga saker inom webbdesign, men när det gäller att göra ett projekt med hjälp av endast HTML och CSS fastnar de och blir förvirrade över vad de ska göra för att öva alla dessa saker. När allt kommer omkring är deras kunskaper begränsade till HTML och CSS. När du har lärt dig allting kommer du att inse att det är viktigt att göra ett projekt för att öva på HTML- och CSS-kunskaperna. Du måste kontrollera hur HTML och CSS arbetar tillsammans för att utforma ett vackert program på framsidan. Så frågan är vilka nybörjarvänliga projekt du kan bygga för att öva på allt du har lärt dig… Låt oss diskutera det.
En hyllningssida
Den enklaste webbplatsen du kan göra som nybörjare är en hyllningssida för någon du beundrar i ditt liv. Den kräver endast grundläggande kunskaper i HTML och CSS. Gör en webbsida där du skriver om den personen och lägger till hans/hennes bild. Lägg till bilden och namnet på personen högst upp på webbsidan och under det ger du layout för resten av detaljerna. Du kan använda stycken, listor, länkar, bilder och CSS för att ge den ett anständigt utseende. Lägg till en lämplig bakgrundsfärg och teckenstil på din webbsida. De flesta av delarna kan du göra med hjälp av HTML, men för att ge den ett bättre utseende kan du använda lite CSS. Ta hjälp av länken nedan.
- Min hyllningssida
- Hyllningssida till Steve Jobs
- Hyllningssida till Albert Einstein
Webbsida med formulär
Formulär är alltid en viktig del av alla projekt och du kommer att arbeta med många formulär i de flesta tillämpningar så varför inte öva på det tidigare och testa dina kunskaper. När du väl är bekant med inmatningsfältet eller grundläggande taggar i HTML för att skapa ett formulär gör du ett projekt där du använder alla dessa taggar. Hur man använder ett textfält, en kryssruta, en radioknapp, ett datum och andra viktiga element i ett enda formulär. Du kommer att lära dig hur du ger en korrekt struktur till en webbsida när du skapar ett formulär. Kunskap om HTML/HTML5 är tillräckligt bra men du kan använda lite CSS för att få projektet att se bättre ut. Ta hjälp av länkarna nedan.
- Survey Form
- Good Vibes Form
- Survey Form
Parallax Website
En parallax-webbplats innehåller fasta bilder i bakgrunden som du kan hålla på plats och du kan skrolla ner på sidan för att se olika delar av bilden. Med grundläggande kunskaper i HTML och CSS kan du ge en webbplats en parallaxeffekt. Det är mycket populärt att använda parallaxeffekten i webbdesign och den ger webbsidan ett vackert utseende och känsla. Ge det ett försök och dela upp hela sidan i tre till fyra olika delar. Ställ in 3-4 bakgrundsbilder, anpassa texten för de olika sektionerna, ställ in marginal och utfyllnad, lägg till background-position och andra CSS-element och egenskaper för att skapa en parallaxeffekt. Du kan ta hjälp av Parallax Website.
Landningssida
En landningssida är ett annat bra projekt som du kan göra med hjälp av HTML och CSS, men det kräver gedigna kunskaper om dessa två byggstenar. Du kommer att använda mycket kreativitet när du gör en landningssida. Du kommer att öva dig på att lägga till sidfot och rubrik, skapa kolumner, anpassa objekt, dela upp sektionerna och mycket annat. Du måste använda CSS försiktigt och tänka på att olika element inte överlappar varandra. Du kommer också att ta hand om färgkombinationer, utfyllnad, marginal, utrymme mellan sektioner, stycken och rutor. Färgkombinationer ska passa bra ihop med varandra för olika sektioner eller bakgrunder. Du kan ta hjälp av länken nedan.
- Full Screen Landing
- Landing Page
Restaurant Website
Visa dina gedigna kunskaper i HTML och CSS genom att skapa en vacker webbsida för en restaurang. Att göra en layout för en restaurang kommer att vara lite mer komplicerat än tidigare projektexempel. Du kommer att anpassa de olika matvarorna och dryckerna med hjälp av ett CSS-layoutgaller. Du kommer att lägga till priser, bilder och du måste också ge den ett vackert utseende genom att använda rätt kombination av färger, typsnitt och bilder. Du kan lägga till ett bildgalleri för de olika matvarorna och du kan också lägga till glidande bilder för ett bättre utseende. Lägg till länkar för omdirigering till interna sidor. Gör den responsiv genom att ställa in en viewport, använda media queries och grid. Du kan ta hjälp av Restaurant Website.
En webbsida för evenemang eller konferens
Du kan göra en statisk sida för att hålla ett evenemang eller en konferens. Personer som är intresserade av att delta i konferensen skapar en registreringsknapp för dem. Nämn olika länkar för talare, plats och schema högst upp i rubriksektionen. Beskriv syftet med konferensen eller vilken kategori av personer som kan dra nytta av konferensen. Lägg till en introduktion och bilder på talaren, information om platsen och konferensens huvudsyfte på din webbsida. Dela upp sidan i sektioner, lägg till rubrik och sidfot som visar upp menyn. Använd lämplig bakgrundsfärg som kan gå bra ihop med varandra för de olika sektionerna. Välj en anständig typsnittsstil och typsnittsfärg som passar temat för din webbsida. Det kräver djupgående kunskaper i HTML/HTML5 och CSS. Du kan ta hjälp av stilkonferensen.
Musikbutikssida
Om du är musikälskare kan du göra en webbsida för det. Den kräver kunskaper i HTML5/CSS3. Lägg till en lämplig bakgrundsbild som beskriver syftet eller vad sidan handlar om. I rubriksektionen lägg till olika menyer. Lägg till knappar, länkar, bilder och någon beskrivning om den samling av låtar som finns tillgänglig. Nämn längst ner länkar för shopping, butik, karriär eller kontaktuppgifter. Du kan också lägga till andra funktioner på dina webbsidor, t.ex. ett provningsalternativ, presentkort eller prenumeration. Gör den responsiv genom att ställa in viewport eller använda media queries och grid. Du kan ta hjälp av myTunes.
Fotografisajt
Om du har fördjupade kunskaper om HTML5 och CSS3 kan du göra en responsiv fotografisajt med en sida. Använd flexbox och media queries för responsivitet. Lägg till företagets namn med en bild (relaterad till fotografering) högst upp (landningssidan). Nedanför visar du ditt arbete genom att lägga till flera bilder. Nämn fotografens kontaktuppgifter längst ner (sidfot). Lägg till en knapp för att visa ditt arbete. Denna knapp kommer att föra dig direkt ner till bildsektionen. Du måste ta hand om marginal, utfyllnad, färgkombination, typsnittsstorlek, typsnittsstil, bildstorlek och styling av en knapp. Du kan ta hjälp av Acme Photography.
Personlig portfölj
Med kunskap om HTML5 och CSS3 kan du också skapa din portfölj. Visa upp dina arbetsprover och färdigheter i din portfölj med ditt namn och bilder. Du kan också lägga till ditt cv där och lägga upp hela din portfölj på GitHub-kontot. I din rubrik kan du nämna några menyer som om, kontakt, arbete eller tjänster. Lägg till en av dina bilder högst upp och presentera dig själv där. Under den lägger du till några arbetsprover och sist (i sidfoten) lägger du till kontaktuppgifter eller konton för sociala medier. Du kan ta hjälp av Personal Portfolio.
Teknisk dokumentation
Om du har lite kunskap om Javascript kan du skapa en webbsida med teknisk dokumentation. Det kräver kunskaper i HTML, CSS och grundläggande javascript. Dela upp hela webbsidan i två delar. På vänster sida skapas en meny med alla ämnen som listas uppifrån och ner. På höger sida måste du nämna dokumentationen eller beskrivningen för ämnena. Tanken är att när du klickar på ett av ämnena i den vänstra delen ska innehållet på den högra sidan laddas. För att klicka kan du använda antingen javascript eller CSS-bokmärkesalternativet. Du behöver inte göra det alltför tjusigt, ge det bara ett enkelt och anständigt utseende, som ser bra ut för teknisk dokumentation. Du kan ta hjälp av teknisk dokumentation.
Hjälplig länk: 10 tips för effektiv webbdesign 2019
