Webbutveckling

Kod behövs lika mycket för en webbplats på en färdig plattform som för ett projekt byggt från grunden. Denna sektion handlar om utveckling oberoende av WordPress. Frontend och backend, verktyg och beprövade tekniker. För dig som sätter layout, skriver skript eller installerar Git för första gången på din egen dator.

Frontend bryter vi ner i lager. HTML som sidans stomme. CSS för utformningen: rutnät med Flexbox och Grid, responsivitet, mjuka övergångar och prydliga effekter utan onödig kod. JavaScript och jQuery för beteendet: växlare, klickhantering, validering av formulär, dynamik på sidan. Här finns genomgångar av konkreta uppgifter som metoden .toggle(), generering av slumptal, en nedräkningstimer eller mjuk rullning till ett ankare. Ingen abstrakt teori. Färdig kod som går att klistra in och testa.

Backend bygger på PHP. Vi visar hur man anropar externa API:er (programmeringsgränssnitt genom vilka webbplatser utbyter data). Till exempel att hämta Bitcoin-kurs, väder eller priset på en vara från en tredjepartstjänst. Vi går igenom att skicka formulär via e-post, hantera JSON, grundläggande databasfrågor. Därtill reguljära uttryck – det mönstersökspråk som många i onödan fruktar. Validering av e-post, telefon, rensning av strängar. Vi förklarar med levande exempel, inte genom torr syntax.

Kod måste skrivas och lagras någonstans. Därför ett separat block om verktyg. Git och GitHub för versionshantering och samarbete. Installation av Git på Windows från grunden, grundläggande kommandon, första repository, återrullning av ändringar, arbete med branches. Markdown för dokumentation och README. CodePen för snabba experiment i webbläsaren. Lokal miljö: Laragon, Open Server, XAMPP, editorn Atom. Allt som man faktiskt kan arbeta bekvämt med varje dag.

Vem vi har i åtanke när vi skriver. Nybörjaren håller just på att förstå skillnaden mellan en tagg och en selektor och kopierar kod utan att begripa hälften av raderna. Den erfarne kan grunderna, men letar efter en kort lösning på en avgränsad uppgift för att slippa uppfinna hjulet på nytt. För den förstnämnde förklarar vi varje rad och visar resultatet i webbläsaren. För den sistnämnde ger vi en färdig snippet och skriver direkt var den kommer att brista.

Typiska misstag vi belyser. Ett skript i head i stället för i footern, vilket gör att jQuery inte hittar elementet. Ett bortglömt semikolon och citattecken av olika typ. Ett reguljärt uttryck som girigt fångar upp för mycket. En direkt databasfråga utan datavalidering. Vi visar inte bara fungerande kod, utan också fallgroparna runt omkring den.

Materialet skrivs av personer som själva skriver kod, inte återberättar andras handledningar. Vi har snavat på samma misstag och minns var nybörjaren kör fast. Därför är varje genomgång enkelt upplagd. Först en kort fungerande lösning. Sedan en förklaring till varför den fungerar och var fallgroparna finns. Utan svammel och copy-paste från den officiella dokumentationen.

Om du precis har börjat, gå från det enkla till det svåra. Först HTML och CSS. Sedan JavaScript och grundläggande PHP. Och först därefter Git, API:er och reguljära uttryck. Varje text besvarar en konkret fråga, i stället för att försöka täcka allt på en gång.

Sektionen är kopplad till WordPress-kategorin. När koden berör just WP-motorn, hooks, functions.php eller tillägg, för vi dig dit. Här finns däremot allt som är universellt och till nytta i vilket projekt som helst. En CSS-snippet passar lika bra på en landningssida som på en blogg eller en webbutik.

Innehållet uppdateras regelbundet i linje med nya standarder och verktygsversioner. Språk utvecklas, gamla metoder blir föråldrade, nya tillkommer. Vi håller exemplen fungerande i stället för att lämna kvar kod från tio år tillbaka. Sätter du layout, skriver du skript eller lär du dig Git? Kom tillbaka hit varje gång du behöver reda ut kod eller hitta en färdig lösning.