Lärandespår Frontend Development with Next.js - Online-utbildning med certifikat

Frontend Development with Next.js

Intermediate

0.0

0 reviews

1 Learners

Explore the full path from web fundamentals to modern application development using React and Next.js. Learn how to structure apps, manage data, handl…

182

Chapters

Learning hours

192

Assignments

AI Assistant

Shareable Certificate

Resultat

Track content

Related courses and projects

Omdömen

Funktioner

Priser

Resultat

Track content

Related courses and projects

Omdömen

Funktioner

Priser

Vad du kommer att lära dig

Build web pages using HTML and CSS.

Use TypeScript for safer and scalable code.

Work with routing, layouts, and data fetching.

Create interactive logic with JavaScript.

Style modern interfaces with Tailwind CSS.

Handle forms and backend logic with route handlers.

Develop component-based apps with React.

Build full applications with Next.js.

Learning track content

Välkommen till HTML och Webbutveckling

Vad är internet?

Hur Fungerar Internet?

Förstå Hur Webbplatser Fungerar

Frontend- och Backendutveckling Förklarat

Varför HTML är Viktigt Inom Webbutveckling

Grundläggande HTML-dokumentstruktur

Förståelse av taggar, element och attribut

Utmaning: Strukturera ett HTML-dokument

Använda Rubriker och Stycken

Utmaning: Strukturera Textinnehåll

Arbeta med länkar

Använda Knappar

Skapa och använda listor i HTML

Utmaning: Strukturera Innehåll med Listor

Arbeta med bilder i HTML

Utmaning: Infoga Bilder

Skapa och Strukturera HTML-Tabeller

Utmaning: Arbeta med tabeller

Bygga HTML-formulär

Utmaning: Skapa ett Webbformulär

Använda Formulärfält

Märkning av formulärfält

Utmaning: Tillämpa Formulärfält och Etiketter

HTML-Inputattribut för Utökad Funktionalitet

Semantisk HTML och Sidstruktur

Utmaning: Implementera Semantiska Element

Bygga en Komplett Webbplats med HTML

Vad CSS Är och Varför Det Är Viktigt

Koppla CSS till HTML

Grundläggande CSS-selektorer

Formatering av text och färger

Lägga Till Hovringseffekter

Utmaning: Styla Din Första Webbsida

Textformatering för Bättre Läsbarhet

Arbeta med typsnitt och typsnittsegenskaper

Lägga till anpassade typsnitt

Utmaning: Förbättra Designen av en Bloggartikel

Förståelse av boxmodellen på ett praktiskt sätt

Display-egenskap Block, Inline och Inline-block

Utmaning: Åtgärda en Trasig Layout

Varför Flexbox Finns

Styra Riktning

Justera Innehåll Horisontellt

Justera Objekt Vertikalt

Arbeta med Flexobjekt

Använda bakgrundsfärger

Använda Bakgrundsbilder

Lägga till skuggor för djup

Utmaning: Skapa en Modern Kortkomponent

Vad är JavaScript?

Köra JavaScript i Webbläsaren

Variabler och Konstanter

Datatyper och Grundläggande Operationer

Arbete med Strängar och Tal

Operatorer och Jämförelser

Villkorslogik "if" / "else"

Logiska Operatorer

Funktioner

Parametrar och Returvärden

Arrayer

Arbeta med Arrayer med `push`, `pop`

Arraymetoderna `map`, `filter`

`For`-slinga

Objekt

Kombinera Data och Logik

Felsökningsgrunder

Förståelse av Objekt i JavaScript

Skapa Objekt i JavaScript

Arbete med Nästlade Objekt-Egenskaper

Åtkomst till Objektets Egenskaper i JavaScript

Hantering av Objektets Egenskaper

Definiera Objektmetoder

Använda Egenskaper Inom Metoder

Kloning och Sammanslagning av Objekt med Spread-Operatorn

Destrukturering av Objekt för Renare Kod

Transformera Arrayer med Map()-Metoden

Filtrering av Arrayer med Filter()-Metoden

Hitta Element i en Array med Find()-Metoden

Sortering av Arrayer med sort()-Metoden

Introduktion till Asynkron JavaScript

Förståelse av Callbacks i JavaScript

Hantering av Asynkrona Operationer med Löften

Använda Async/Await för Renare Asynkron Kod

Hämta och Arbeta med API:er i JavaScript

Integrering av API:er i JavaScript-applikationer

Ready for React

Vad React Är och Varför Det Används

Förståelse av React-Komponenter

JSX-Grunder i React

Rendering av Element i React

Utmaning: Rendera ett Element i React

Överföra Data med Props

Utmaning: Skapa Funktionella Komponenter

Villkorlig Rendering i React

Utmaning: Implementera Villkorlig Rendering i Chattnotifikation

Utmaning: Implementera Villkorlig Rendering i Bankvarning

Rendering av Listor med Data i React

Utmaning: Visa Datainsamlingar

Hantering av Tillstånd med useState

Handling User Events in React

Utmaning: Växla Synlighet med State

Working with Forms in React

Stilmöjligheter i React

Använda Inline-Stilar i React

Styla Komponenter med Extern CSS

Utmaning: Styla en React-applikation

React Fundamentals Wrap Up

What Is TypeScript?

Why Use TypeScript?

TypeScript in Real-World Projects

Number Type

String Type

Boolean Type

Type Inference and Explicit Typing

Array Types

Tuple Types

Object Types Basics

Defining Object Shapes with Interfaces

Optional and Readonly Properties

Extending and Combining Interfaces

Interfaces vs Type Aliases

Annotating Function Parameters

Typing Function Return Values

What Are Type Guards?

Using typeof and Array.isArray

What Are Generics?

Generic Functions in Practice

Typing Component Props

Typing State with useState

Typing Events (Forms and Inputs)

Typing Lists and Keys

Promises and Async Functions

Practical Patterns for Async Typing

Common Pitfalls When Switching

What Is Tailwind CSS and Why Use It

Utility Classes Basics

Sizing and Visual Styling

Layout with Flexbox

Layout with Grid

Building UI Components

Responsive Design

Interaction States

Writing Clean Tailwind Code

What Next.js Is and Why It Is Used

React vs Next.js

Creating a Next.js Project

Understanding the Project Structure

Running the Development Server

Your First Page in Next.js

File Based Routing in Next.js

Linking Between Pages

Dynamic Routes

Route Groups and Organization Basics

Building a Not Found Page

What Layouts Are in Next.js

Creating a Root Layout

Nested Layouts for Shared UI

Reusing Navigation and Common Page Structure

Adding Metadata to Pages

Server Components and Client Components

When to Use "use client"

Building Interactive Components in Next.js

Passing Data from Server to Client Components

Rendering Data in Server Components

Common Mistakes with Server and Client Components

Fetching and Rendering Data in Next.js

Using Dynamic Routes to Load Data

Handling Loading and Error States

Working with Forms in Next.js

Introduction to Route Handlers

Sending and Receiving Data with Route Handlers

Styling a Next.js App with Tailwind

Static and Dynamic Rendering Basics

SEO and Metadata Basics in Next.js

Preparing a Next.js App for Production

Deploying a Next.js App

Final Project Build a Small Web App with Next.js

Förbättra dina tekniska färdigheter!

med upp till 55% rabatt

Features:

*Tracks not included in Pro plan

500+ topprankade kurserBanbrytande AI Copilot

Personliga studieplaner40+ praktiska verkliga projekt

Ingen avbokning, innan den valda rabatterade planen är slut, godkänner jag att Codefinity automatiskt debiterar $104 var 3:e månad tills jag avbokar. Läs mer om avboknings- och återbetalningspolicyn på Prenumerationsvillkor.

Recommended Courses and Projects

Ultimate HTML

Lär dig grunderna i HTML (HyperText Markup Language), grunden för webbutveckling. Denna nybörjarvänliga kurs täcker taggar, attribut, element och strukturering av webbsidor. Få praktiska färdigheter i att skapa rubriker, stycken, listor, bilder, länkar, formulär och tabeller. Utforska bästa praxis, optimering och webbtillgänglighet. Börja din webbutvecklingsresa med HTML.

Introduktion till JavaScript

Fördjupa dig i världens mest populära språk för front-end-utveckling – JavaScript. JavaScript är ett språk som är inbyggt i nästan alla webbläsare och kan användas för en mängd olika uppgifter. Lär dig grundläggande funktionalitet och förbered dig för utmaningar och mer avancerade programmeringstekniker.

Introduktion till React

Utforska grunderna i att bygga användargränssnitt med React. Fokus på komponenter, JSX, dataflöde, tillstånd och sid-effekter som används i vardagliga React-applikationer.

CSS-Grunder

Behärska grunderna i CSS, det stiliseringsspråk som förändrar utseendet och känslan på webbsidor. Utforska centrala koncept såsom textstilar, färger, avstånd, boxmodellen, Flexbox och dekorativa effekter. Bygg upp färdigheter för att skapa visuellt tilltalande och välstrukturerade webbsidor.

HTML-Grunder

Behärska grunderna i HTML för att skapa välstrukturerat och tillgängligt webbinnehåll. Lär dig att strukturera dokument med hjälp av taggar, element och attribut. Arbeta säkert med text, listor, bilder, ljud och video för att berika webbsidor. Skapa tabeller för organiserad data och formulär för användarinmatning och interaktion. Upptäck semantisk HTML för att förbättra tillgängligheten och bygga kompletta, funktionella webbplatsstrukturer från grunden.

Javascript Datastrukturer

Lär dig att arbeta säkert med data i JavaScript genom att behärska objekt och arrayer. Förstå hur du skapar, får åtkomst till och hanterar objektens egenskaper och metoder på ett effektivt sätt. Fördjupa dig i avancerade tekniker för objektmanipulation, inklusive iteration, kloning och destrukturering för renare kod. Bygg en stark grund i arbete med arrayer och lär dig att hantera, iterera och modifiera arrayelement effektivt. Behärska avancerade arraymetoder som map, filter, find och sort för att transformera och hantera data effektivt i dina applikationer.

Introduktion till TypeScript

Denna kurs är utformad för absoluta nybörjare som vill behärska grunderna i programmeringsspråket TypeScript. TypeScript är ett modernt och kraftfullt språk som utökar JavaScripts kapacitet och gör din kod mer tillförlitlig och läsbar. Vi börjar från grunden och går igenom variabler, datatyper, jämförelseoperatorer och villkorssatser. Därefter fördjupar vi oss i arbete med arrayer och loopar. Efter att ha slutfört denna kurs kommer du att vara redo att skapa enkla program i TypeScript och fortsätta din inlärningsresa mot mer avancerade ämnen.

CSS-layout, effekter och Sass

Förbättra dina stilkunskaper genom att bemästra avancerade CSS-tekniker för modern webbdesign. Positionera och hantera element med precision med hjälp av avancerade positioneringsstrategier. Skapa mjuka övergångar och engagerande animationer för att förbättra användarupplevelsen. Transformera och manipulera element för dynamiska visuella effekter. Bygg responsiva designer som anpassar sig över olika enheter och effektivisera arbetsflödet med CSS-förprocessorer som Sass.

Next.js 14-Färdighet för att Bygga Moderna Webbappar

Lär dig att bygga moderna, högpresterande webbapplikationer med Next.js. Sätt upp projekt med strukturerade layouter, styling och routing för smidig navigering. Hämta och visa data effektivt samtidigt som rendering och prestanda optimeras. Implementera avancerade funktioner som paginering, CRUD-operationer och global sökning för dynamiska webbappar. Distribuera dina Next.js-projekt, anslut dem till databaser och lägg till autentisering för att skydda användardata.

JavaScript Ninja

Välkommen till JavaScript Ninja-kursen! Denna engagerande och interaktiva kurs är utformad för att introducera dig till grunderna i JavaScript-programmering genom ett roligt och lärorikt spel. Du kommer att guida en ninja genom olika utmaningar, använda JavaScript för att kontrollera rörelser och interagera med objekt som sushi. Börja med grunderna, lär dig navigera på kartan, plocka upp och placera sushi, och gradvis gå vidare till mer komplexa programmeringskoncept som funktioner, loops och villkorssatser. Varje kapitel erbjuder praktiska övningar för att förstärka ditt lärande, vilket kulminerar i spännande utmaningar som testar dina färdigheter. Oavsett om du är en fullständig nybörjare eller vill vässa dina kodningsförmågor, erbjuder denna kurs en omfattande och njutbar lärandeupplevelse. Gå med oss och bli en kodningsninja!

Javascriptlogik och Interaktion

Behärska grundläggande JavaScript-koncept, inklusive klasser, DOM-manipulation, händelsehantering och asynkron programmering. Lär dig att skapa dynamiska och interaktiva webbapplikationer genom att hantera användarinteraktioner, hämta och visa data samt effektivt hantera asynkrona operationer. Genom en kombination av teori, praktiska utmaningar och verkliga exempel ger denna kurs dig de praktiska färdigheter som krävs för modern webbutveckling.

Tillståndshantering med Redux Toolkit i React

Upptäck kraften i Redux Toolkit tillsammans med React och förbättra dina färdigheter inom tillståndshantering. Denna kurs ger en heltäckande introduktion till Redux Toolkit, ett kraftfullt bibliotek för hantering av tillstånd. Lär dig att effektivisera din Redux-konfiguration, förenkla komplex tillståndslogik och skapa effektiva, skalbara React-applikationer.

Discover more Learning Tracks

spår

Spelutveckling med Unity

Nybörjare

Videoproduktion med Adobe

Nybörjare

UI/UX Designverktyg

Nybörjare

Grundläggande Kontorsfärdigheter

Nybörjare

Digital Marketing Essentials

Nybörjare

Complete Social Media Management

Nybörjare

Business AI Toolkit

Nybörjare

Webbplatsutveckling Utan Kod

Nybörjare

DevOps Specialist

Nybörjare

Supervised Learning Foundations

Nybörjare

Python from Zero to Hero

Nybörjare

C Programming Fundamentals

Nybörjare

Varför folk väljer Codefinity

Web Developer

Kwizera Mugisha

The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.

Senior Business Analyst

Sherry Barnes-Fox

My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.

Accounts Payable Specialist

Bill Wagner

I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.

IT Support Specialist

Daniel Chinea

I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.

Technology Project Manager

Steve Bruening

The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.

Project Manager

Stephanie Chan

As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.

Step-by-Step to Stellar Results

Interaktiv kodningsmiljö

Hoppa in i vår interaktiva miljö: skriv och kör din kod med feedback i realtid och framgångsmått—lär dig genom att göra vid varje steg.

AI-driven support

Använd den inbyggda AI-assistenten för att förklara fel, föreslå lösningar eller svara på frågor om din kod—så att du förblir produktiv och aldrig fastnar.

Check your progress

Avsluta varje modul med ett snabbt quiz som ger omedelbar feedback, spårar din framsteg och säkerställer att du har bemästrat viktiga koncept.

Promote your expertise

Få ditt branschigenkända certifikat vid slutförandet och dela det på LinkedIn med ett klick—låt ditt nätverk se vad du kan göra.

Betrodd av anställda på ledande företag
och studenter från toppuniversitet

Full tillgång till katalogen

Ett abonnemang öppnar denna kurs och hela vår katalog av projekt och färdigheter.

Features:

500+ topprankade kurserBanbrytande AI Copilot

Personliga studieplaner40+ praktiska verkliga projekt

Prova Codefinity med förtroende – 30-dagars pengarna-tillbaka-garanti ingår

För att välkomna dig till Codefinity erbjuder vi upp till 64% rabatt på våra kurser. Dessutom har vi en 30-dagars pengarna-tillbaka-garanti, så att du kan prova oss riskfritt.Vi ser verkligen fram emot att välkomna dig till vår plattform och är engagerade i att göra din lärandeupplevelse enkel, interaktiv och rolig.

Ready to get started?

Pro

Best intro offer

Ultimate

A complete experience
to kickstart your career

500+ Top-Rated courses

Completion certificates

Early access to new courses

40+ hands-on Real-world projects

Personalized study tracks

Unlimited workspaces

Få omedelbar tillgång till 500+ kurser

Obegränsat lärande, omedelbar tillgångFå full tillgång till alla kurser och spår, inklusive videoinnehåll, quiz och djupgående material—börja lära när som helst.

Branschigenkända certifikatFå certifikat som bekräftar din expertis och stärker din karriär inom teknik, AI, data, marknadsföring och mer.

AI-assisterat lärandeFå personliga tips, feedback i realtid och AI-drivna förklaringar för att påskynda din framsteg.

Ständigt expanderande: Nya kurser och karriärspårHåll dig före med ständigt uppdaterade kurser, karriärkartor, utmaningar och praktiska övningstester.

Bygg färdigheter som räknasBehärska efterfrågade färdigheter med kurser i AI, datavetenskap, programmering, marknadsföring, automation, webbutveckling och mer.

Interaktivt och sömlöst lärandeEngagera dig med praktiska projekt, verkliga övningar och en intuitiv lärandeupplevelse — inga extra verktyg behövs.

Vad du kommer att lära dig

Spelutveckling med Unity

Videoproduktion med Adobe

UI/UX Designverktyg

Grundläggande Kontorsfärdigheter

Digital Marketing Essentials

Complete Social Media Management

Business AI Toolkit

Webbplatsutveckling Utan Kod

DevOps Specialist

Supervised Learning Foundations

Python from Zero to Hero

C Programming Fundamentals

Varför folk väljer Codefinity

Betrodd av anställda på ledande företag och studenter från toppuniversitet

Full tillgång till katalogen

Prova Codefinity med förtroende – 30-dagars pengarna-tillbaka-garanti ingår

Få omedelbar tillgång till 500+ kurser

Betrodd av anställda på ledande företag
och studenter från toppuniversitet