11 CSS-templatsidor börjar inte från början!

Webbdesign är mer tillgänglig än någonsin, men det tar fortfarande mycket arbete - och mycket skicklighet Vill du lära dig webbdesign? 7 YouTube-kanaler för att få dig igång Vill du lära dig webbdesign? 7 YouTube-kanaler för att få dig igång YouTube har tusentals videoklipp och kanaler för nybörjare av webbdesign. Här tittar vi på några av de bästa för att komma igång. Läs mer - för att producera professionellt utseende.

Lyckligtvis behöver du inte börja från början varje gång. Det finns tusentals gratis CSS-mallar tillgängliga online, alla omfatta moderna designtrender och -teknik. Du kan använda dem i sin ursprungliga form, eller anpassa dem för att göra dem egna.

I den här guiden tar vi en närmare titt på CSS-mallar och var hittar de dem.

Vad är en CSS-mall?

En CSS-mall innehåller inte bara CSS: det ger dig allt du behöver för att skapa en helt fungerande webbplats. När du laddar ner en får du vanligtvis en mapp med följande:

• HTML-filer - Du får en HTML-fil för varje sida på webbplatsen. Den innehåller provtext och bilder som du behöver byta ut med ditt eget innehåll. Du måste också kunna justera metadata, relaterade till saker som webbplatsbeskrivningen.
• CSS-fil - Du brukar få en viktig CSS-fil som innehåller all styling för webbplatsen, plus eventuella extrafunktioner som ett återställningsformat, eller en för webbfonter.
• Javascript-fil - Om webbplatsen innehåller Javascript-funktioner borde de helst inkluderas i sin egen separata fil, snarare än införlivad i HTML-dokumenten.
• Bilder, teckensnitt och ikoner - Alla bilder som används i mallen ska också inkluderas. Du kanske vill behålla saker som ikoner och bakgrunder, men måste ersätta de andra platshållarbilderna med din egen. Vissa anpassade teckensnitt kan också inkluderas.

Till skillnad från de flesta andra typer av mall du kommer att stöta på - det är WordPress, Excel eller InDesign-mallar De 7 bästa platserna för att hitta gratis InDesign-mallar: Böcker, reklamblad, tidskrifter och mer De 7 bästa webbplatserna för att hitta gratis InDesign-mallar: Böcker, Reklamblad, tidskrifter och mer Vad sägs om att använda en professionell Adobe InDesign-mall istället för att göra din egen? Här är de bästa gratis mallsidorna. Läs mer - CSS-mallar kräver viss teknisk kunskap.

Det finns inget vänligt gränssnitt för att redigera dem, så du måste åtminstone veta hur du hittar dig runt ett HTML-dokument bara för att lägga till ditt eget innehåll. För att göra egna anpassningar behöver du en anständig kunskap om CSS Lär dig HTML och CSS med dessa steg för steg-handledning Lär dig HTML och CSS med dessa steg för steg-handledning Nyfiken om HTML, CSS och JavaScript? Om du tycker att du har en förmåga att lära dig hur man skapar webbplatser från början - här är några bra steg-för-steg-tutorials värda att försöka. Läs mer .

Vad ska man leta efter i en CSS-mall

Det finns så många gratis CSS-mallar att välja mellan. Så hur vet du vad som är rätt för dig? Här är några saker att se upp för:

• Design - Självklart vill du ha en webbplats som ser bra ut och återspeglar vilken bild du vill skildra. Men överväga också om mallen är rätt för dina behov både nu och i framtiden. Många är för ensidiga webbplatser; vissa är utformade för flera sidor. Om du behöver den senare, överväg om du kanske är bättre att använda ett CMS som WordPress istället.
• Mobil-Optimerad - Mobil webbanvändning är nu högre än skrivbordet, så det är viktigt att din webbplats fungerar korrekt på smartphones. Alla anständiga CSS-mallar ska använda responsiv design så att webbplatsen fungerar perfekt på alla storlekar. Om din valda inte, byter du till en som gör det.
• Välskriven - Ladda ner mallen och kolla koden innan du förbinder dig att använda den. Det ska vara rent, välstrukturerat och enkelt att redigera. Det bör också vara SEO-medvetna, med korrekt användning av titel och rubrik taggar.
• Licens - Var noga med att kolla licensen för din valda CSS-mall. Många är tillgängliga under en Creative Commons licens Vad är Creative Commons, och ska du använda den? Vad är Creative Commons, och ska du använda det? Creative Commons är en uppsättning licenser som automatiskt ger dig tillåtelse att göra olika saker, till exempel återanvända och distribuera innehållet. Låt oss ta reda på mer om det och hur du använder det. Läs mer, men olika versioner av denna licens bestämmer om du kan redigera mallen, oavsett om du kan använda den kommersiellt och om du behöver kreditera originaldesignern.
• addons - Vissa CSS-mallutvecklare erbjuder sitt arbete på en “freemium” grund. Du får mallen gratis, men har möjlighet att betala för ytterligare anpassningar för att göra den unik för din webbplats.

Med allt som förklaras, låt oss ta en titt på de bästa platserna för att hitta gratis CSS-mallar.

1. Templated.co

Denna fantastiska samling av mer än 800 CSS-mallar innehåller stilar för varje klass av webbplats. De är alla skapade speciellt för webbplatsen, så du bör inte se dem beskära upp någon annanstans.

Alla mallar är lyhörda och byggda med HTML5. De är små och lätta, med extra Javascript-funktioner, som en videobelysning eller bläddraffekter, används bara där de lägger till verkligt värde för upplevelsen.

2. Styleshout.com

Styleshout erbjuder ett stort utbud av både gratis och premium mallar, den tidigare släpptes under Creative Commons-licensen.

De fria mallarna täcker ett brett spektrum av kategorier, från hela webbplatser till kommande kort och till och med den ofta förbisedda 404-felsidan. Hur man gör en bra 404-felsida och 10 exempel. Så här gör du en bra 404-felsida. designad 404 fel sida kan vara skillnaden mellan en tråkig webbplats och en minnesvärd webbplats. Läs mer . Du kan anpassa dem själv och anpassa dem till stilen på din befintliga webbplats, eller du kan betala för att få Styleshout att göra det för dig.

3. HTML5Up.net

Denna super-stilfulla samling mallar är också super populär. De flesta har laddats ner hundratusentals gånger, och det är lätt att se varför.

Alla vanliga kategorier av webbplatser tillgodoses, som blogg och produktsida, och det finns några speciella fina mönster för fotografer att visa upp sitt arbete. Grunderna för grundläggande gallerformat är extremt anpassningsbara, medan de blinkande de tenderar att använda Javascript ganska tungt, så kan det vara mindre lämpligt för dina tweaks.

4. Freebiesbug.com

Vad Freebiesbug saknar i kvantitet det gör mer än för kvalitet. En plats där unga utvecklare visar sina färdigheter, innehåller många högkvalitativa, premiumdesigner.

Webbplatsens imponerande samling gratis mallar är perfekt för byråer, fotografer, apputvecklare och andra annonsmaterial. Paket med Javascript och CSS effekter och animeringar, du kan anpassa webbplatser, även om de ofta är så trevliga du kanske inte vill.

Dessutom innehåller Freebiesbug.com alla typer av gratis resurser för webbdesigners, inklusive teckensnitt, lagerfoton, Illustrator-skisser Betala inte för Adobe Illustrator: Det här fria alternativet är bra Betal inte Adobe Illustrator: Det här fria alternativet är bra Adobe Illustrator är fantastisk men det kostar ganska på grund av Creative Cloud-prenumerationen. Denna webbappsalternativ är nästan lika bra och kostar ingenting! Läs mer och PSD-filer, och mer.

5. Free-CSS.com

Free-CSS.com är en friluftsfri webbplats som erbjuder - vid skrivande stund - några 2503 gratis mallar, plus massor av premium, även om du fortfarande inte hittar det du letar efter.

Med så många att välja mellan kan det vara lite svårt att lösa på den perfekta designen. Kvaliteten är generellt bra, trots att webbplatsens 10-åriga existens betyder att det fortfarande är mallar som är skrivna i XHTML. Du vill undvika dessa. Det andra är att se till att du kontrollerar licensen för din valda mall. De är alla gratis, men vissa är offentliga domäner, vissa Creative Commons, och vissa använder en författarspecifik licens.

6. OS-Templates.com

28 sidor gratis CSS-mallar, mestadels med moderna, nätbaserade layouter på en enda sida. Om det är enkelt är det du är ute efter så är det här att leta efter. Mönstren är rena, attraktiva och lätta att anpassa.

OS-Templates.com erbjuder också en stor samling av “grundläggande mallar”. Dessa ger dig den grundläggande strukturen för en webbplats i olika populära layoutscheman (två kolumner, tre kolumner etc.), medan de är helt ostylade. Precis som att använda standardtemat i WordPress, kan du med blank blankett göra din webbplats till allt du vill ha.

7. boag.online

Maglev är en enda webbsidans mall som kan förhandsgranskas i action på boag.online.

Det är en snabb, ren mall, idealisk för en produktsida. Den minimalistiska designen förstärks endast av några Jquery-effekter för att hjälpa dig att rulla mellan sektioner. Den enkla layouten fungerar i sig, men det gör också en bra utgångspunkt för dina egna anpassningar.

8. Pixel Buddha

Pixel Buddhas mallar är inte bara begränsade till webbplatser, de innehåller också några för nyhetsbrev.

Hur som helst är de alla utformade med HTML5 och CSS3, och är lyhörda så ser bra ut på vilken enhet som helst. Höjdpunkter inkluderar Howdy HTML, en vacker portfölj / CV-mall De senaste 5 CV-byggnadsapplikationerna och webbplatser du någonsin behöver de senaste 5 återupptagningsbyggnadsprogrammen och -webbplatser du behöver någonsin använda dessa fantastiska återuppta byggplatser och appar när du behöver för att få ditt CV att sticka ut i mängden. Med rätt verktyg kan du bygga ett unikt resume snabbt, även utan designkunskaper. Läs mer, och SOHO HTML, en jättebra e-handelssida som innehåller källkoden PSD-filer ovanpå HTML och CSS.

9. Templatemo.com

Nästan 500 gratis mallar finns tillgängliga från Templatemo. Några av de bästa är de som bryter sig fri från Bootstrap-stilnätet för att prova något annat.

De flesta av mallarna är enkla och bekväma, även om funktioner som lådor och innehålls karuseller ingår där de behövs. Vi tycker också om att flera av mallarna är inställda på att fungera med så många som sex sidor som standard. Det gör det enklare om ditt innehåll inte passar den allt vanligare layouten på en sida.

10. Startbootstrap.com

Bootstrap är ett otroligt populärt front-end-ramverk som gör att du kan bygga webbplatser av hög kvalitet på nolltid alls. Det tar dock lite tid att lära sig, vilket är där Start Bootstrap kommer in.

Denna samling gratis mallar med öppen källkod är alla byggda med Bootstraps nätverkssystem. Skapa webbgränssnitt: Var du ska börja skapa webbgränssnitt: Var ska du börja? Vi visar hur webgränssnitt bryts ner, peka ut nyckelkoncepten, verktygen och byggstenar som behövs för att göra dig till en 21st century webbdesigner. Läs mer . Det finns mer än 30 att välja mellan. Vissa är fullt designade och avsedda för appar, bloggar och målsidor, medan andra är tomma layouter som väntar på att du stämmer.

11. Bootswatch.com

Slutligen, något lite mer praktisk. Bootswatch erbjuder 16 teman för öppen källkod för att utforma webbplatser som byggts med Bootstrap.

Du kan antingen bygga din webbplatss layout själv med Bootstrap, eller ladda ner en av de tomma mallarna från Start Bootstrap. Vad Bootswatch gör är att ändra teckensnitt, bakgrundsfärger och styling för knappar, menyer och andra element. Det ger din webbplats ett unikt utseende, samtidigt som Bootstraps extremt rena etos håller sig sant.

Det är lätt att kasta samman en grundläggande hemsida med Bootstrap, och Bootswatch ger det lite instant polish.

Så här använder du CSS-mallar

I stort sett finns det två sätt att använda mallar. Du använder dem antingen som-är eller du använder dem som grund för din egen design.

Faren när du använder mallar är att du hamnar på en webbplats som är identisk med någon annans. Välj en populär mall och det kan vara bokstavligen tiotusentals identiska platser. Detta är huvudargumentet för att anpassa dem.

CSS mallar är en bra genväg för erfarna webbdesigners som har en grundläggande layout i åtanke och vill hoppa rakt in i styling upp det.

De är också perfekta för alla som är nya för webbdesign. Om du känner din väg runt HTML och CSS men inte har förtroendet eller kunskapen för att bygga en webbplats från början, så fungerar en CSS-mall som både ett enkelt sätt att få en snygg webbplats och ett fantastiskt inlärningsverktyg.

Du kan behandla det som ett pågående arbete. Börja med att byta ut teckensnitt Vill du ha vackra fonter? Här är 25 + webbplatser där du hittar dem vill ha vackra fonter? Här är 25 + webbplatser där du hittar dem istället för att vada genom hundratals typsnitt, här är några webbplatser som hjälper dig att hålla dig uppdaterad med alla nya teckensnitt som du vill använda i din nästa design. Läs mer och byta färgschema Hur man väljer ett färgschema som ett pro Hur man väljer ett färgschema som ett Pro Färger är knepiga. Det kan tyckas lätt att välja en handfull färger som ser bra ut tillsammans, men som någon formgivare som har spenderat timmar, kommer tweaking av nyanser att berätta: det är knepigt. Läs mer, och med tiden kan du omorganisera befintliga element, lägga till nya och så vidare. Det finns inget bättre sätt att lära sig någonting än genom praktisk, praktisk erfarenhet.

Använder du CSS-mallar när du bygger webbplatser? Vilka är dina favoritplatser för att hitta dem? Dela dina erfarenheter och tips med oss ​​i kommentarerna.

Utforska mer om: CSS, webbdesign.