Læringsspor Frontend-Utvikling med React - Online-opplæring med sertifikat

Frontend-Utvikling med React

Beginner

0.0

0 reviews

0 Learners

Utforsk hvordan moderne webapplikasjoner bygges fra grunnen av ved hjelp av HTML, CSS, JavaScript og React. Lær hvordan man strukturerer innhold, desi…

108

Chapters

Learning hours

Assignments

AI Assistant

Shareable Certificate

Resultater

Track content

Related courses and projects

Attester

Funksjoner

Priser

Resultater

Track content

Related courses and projects

Attester

Funksjoner

Priser

Hva du vil lære

Understand how the web works and the role of frontend development

Write basic JavaScript to add interactivity

Build web pages using HTML

Create interactive user interfaces with React, using components, props, and state

Style web pages with CSS, including layout and visual design

Apply modern styling techniques to React applications using Tailwind CSS

Learning track content

Velkommen til HTML og Webutvikling

Hva er internett?

Hvordan Fungerer Internett?

Forstå Hvordan Nettsteder Fungerer

Frontend- og Backend-utvikling Forklart

Kursintroduksjon

Hvorfor HTML er Viktig i Webutvikling

Grunnleggende HTML-dokumentstruktur

Forståelse av tagger, elementer og attributter

Utfordring: Strukturér et HTML-dokument

Bruk av overskrifter og avsnitt

Utfordring: Strukturere Tekstinnhold

Arbeide med lenker

Bruk av knapper

Oppretting og Bruk av Lister i HTML

Utfordring: Strukturer Innhold med Lister

Arbeide med bilder i HTML

Utfordring: Sett inn bilder

Oppretting og Strukturering av HTML-Tabeller

Utfordring: Arbeid med tabeller

Bygge HTML-skjemaer

Utfordring: Bygg et webskjema

Bruk av skjemainndata

Merking av skjemainndata

Utfordring: Bruk Skjemainndata og Etiketter

HTML-Inndataattributter for Utvidet Funksjonalitet

Semantisk HTML og Sidestruktur

Utfordring: Implementere Semantiske Elementer

Bygge et Komplett Nettsted med HTML

Hva CSS er og hvorfor det er viktig

Koble CSS til HTML

Grunnleggende CSS-selektorer

Stiler Tekst og Farger

Legge til hover-effekter

Utfordring: Design Din Første Nettside

Tekstformatering for bedre lesbarhet

Arbeide med skrifttyper og skriftegenskaper

Legge til egendefinerte skrifttyper

Utfordring: Forbedre Utformingen av en Bloggartikkel

Forståelse av Bokmodellen på en Praktisk Måte

Display-Egenskap: Block, Inline og Inline-Block

Utfordring: Fiks et ødelagt oppsett

Hvorfor Flexbox Eksisterer

Kontrollere Retning

Justere innhold horisontalt

Justere elementer vertikalt

Arbeide med Flex-elementer

Bruk av bakgrunnsfarger

Bruk av Bakgrunnsbilder

Legge til skygger for dybde

Utfordring: Lag en Moderne Kortkomponent

Hva er JavaScript?

Kjøre JavaScript i Nettleseren

Variabler og Konstanter

Datatyper og Grunnleggende Operasjoner

Arbeide med Strenger og Tall

Operatorer og Sammenligninger

Betinget logikk «if» / «else»

Logiske Operatorer

Funksjoner

Parametere og returverdier

Arrayer

Arbeide med Arrayer med `push`, `pop`

Array-metoder «map», «filter»

`For`-løkke

Objekter

Kombinere Data og Logikk

Prosjekt som viser dynamisk profilliste

Grunnleggende Feilsøking

Oppsummering og Overgang til React

Hva React Er og Hvorfor Det Brukes

Forståelse av React-komponenter

JSX-Grunnleggende i React

Gjengivelse av Elementer i React

Utfordring: Gjengi et Element i React

Overføring av Data med Props

Utfordring: Opprett Funksjonelle Komponenter

Betinget Gjengivelse i React

Utfordring: Implementere Betinget Rendering i Chatvarsling

Utfordring: Implementer Betinget Rendering i Bankvarsel

Gjengivelse av Lister med Data i React

Utfordring: Vis Datakollekjsoner

Oppsummering av React-Grunnleggende

Håndtering av Tilstand med useState

Utfordring: Veksle Synlighet med State

Håndtering av Sideeffekter med useEffect

Utfordring: Hent og Vis Data

Oppsummering av Grunnleggende React Hooks

Stilvalg i React

Bruk av Inline-Stiler i React

Stile Komponenter med Ekstern CSS

Utfordring: Style et React-program

Oppsett og Kjøring av et React-prosjekt med Vite

Forståelse av React-prosjektets Struktur

Oppsummering av Oppsett for React-prosjekt

Forståelse av Utility-First CSS

Bruke Tailwind-klasser i JSX

Responsiv og Tilstandsbasert Styling

Designe Knapper med Tailwind

Utforming av Kortkomponenter

Stiler for Skjemaer og Inndatafelt

Tilpasse Tailwind-temaer

Sette Sammen Komplekse Oppsett

Legge til Hover- og Fokus-effekter

Animere Brukergrensesnitt med Tailwind

Gjenbrukbare Komponentmønstre

Tilgjengelighet og Tematiseringshensyn

Bygge en Komplett Landingsside

Forbedre dine tekniske ferdigheter!

med opptil 55% rabatt

Features:

*Tracks not included in Pro plan

500+ topprangerte kursBanebrytende AI Copilot

Personlige studieløp40+ praktiske prosjekter fra virkeligheten

Uten oppsigelse, før den valgte rabatterte planen utløper, godtar jeg at Codefinity automatisk belaster $104 hver 3. måned til jeg kansellerer. Les mer om oppsigelses- og refusjonspolicy på Abonnementsvilkår.

Recommended Courses and Projects

Ultimate HTML

Lær det grunnleggende i HTML (HyperText Markup Language), grunnlaget for webutvikling. Dette nybegynnervennlige kurset dekker tags, attributter, elementer og strukturering av nettsider. Få praktiske ferdigheter i å lage overskrifter, avsnitt, lister, bilder, lenker, skjemaer og tabeller. Utforsk beste praksis, optimalisering og webtilgjengelighet. Start din webutviklingsreise med HTML.

Introduksjon til JavaScript

Fordyp deg i verdens mest populære språk for front-end-utvikling – JavaScript. JavaScript er et språk som er innebygd i nesten alle nettlesere og kan brukes til et bredt spekter av oppgaver. Lær grunnleggende funksjonalitet og forbered deg på utfordringer og mer avanserte programmeringsteknikker.

Introduksjon til React

Utforsk grunnleggende prinsipper for å bygge brukergrensesnitt med React. Fokuser på komponenter, JSX, dataflyt, tilstand og sideeffekter brukt i daglige React-applikasjoner.

CSS-Grunnleggende

Lær det grunnleggende i CSS, stilsett-språket som forvandler utseendet og følelsen på nettsider. Utforsk sentrale konsepter som tekststiler, farger, mellomrom, boksmodellen, Flexbox og dekorative effekter. Bygg ferdigheter for å lage visuelt engasjerende og velstrukturerte nettsider.

HTML-Grunnleggende

Behersk det grunnleggende i HTML for å bygge godt strukturerte og tilgjengelige nettinnhold. Lær hvordan du strukturerer dokumenter ved hjelp av tagger, elementer og attributter. Arbeid trygt med tekst, lister, bilder, lyd og video for å berike nettsider. Lag tabeller for organisert data og skjemaer for brukerinnsending og interaksjon. Oppdag semantisk HTML for å forbedre tilgjengelighet og bygg komplette, funksjonelle nettsidestrukturer fra bunnen av.

Javascript Datastrukturer

Lær å arbeide trygt med data i JavaScript ved å mestre objekter og arrayer. Forstå hvordan du oppretter, får tilgang til og administrerer egenskaper og metoder i objekter på en effektiv måte. Fordyp deg i avanserte teknikker for objektmanipulering, inkludert iterasjon, kloning og destrukturering for renere kode. Bygg et solid grunnlag i arbeid med arrayer og lær å administrere, iterere og endre elementer effektivt. Mestre avanserte array-metoder som map, filter, find og sort for å transformere og håndtere data effektivt i applikasjonene dine.

CSS-layout, Effekter og Sass

Forbedre dine ferdigheter innen styling ved å mestre avanserte CSS-teknikker for moderne webdesign. Plasser og håndter elementer med presisjon ved hjelp av avanserte posisjoneringsstrategier. Lag jevne overganger og engasjerende animasjoner for å forbedre brukeropplevelsen. Transformer og manipuler elementer for dynamiske visuelle effekter. Bygg responsive design som tilpasser seg ulike enheter, og lær å effektivisere arbeidsflyten med CSS-preprosessorer som Sass.

JavaScript Ninja

Velkommen til JavaScript Ninja-kurset! Dette engasjerende og interaktive kurset er designet for å introdusere deg til grunnleggende JavaScript-programmering gjennom et morsomt og lærerikt spill. Du vil veilede en ninja gjennom ulike utfordringer, bruke JavaScript for å kontrollere bevegelser og samhandle med objekter som sushi. Fra starten med det grunnleggende, vil du lære hvordan du navigerer på kartet, plukker opp og plasserer sushi, og gradvis går videre til mer komplekse programmeringskonsepter som funksjoner, løkker og betingede utsagn. Hvert kapittel tilbyr praktisk øvelse for å styrke læringen din, og kulminerer i spennende utfordringer som tester ferdighetene dine. Enten du er en nybegynner eller ønsker å skjerpe dine kodeferdigheter, gir dette kurset en omfattende og hyggelig læringsopplevelse. Bli med oss og bli en kode-ninja!

JavaScript-logikk og interaksjon

Behersk grunnleggende JavaScript-konsepter, inkludert klasser, DOM-manipulering, hendelseshåndtering og asynkron programmering. Lær å lage dynamiske og interaktive webapplikasjoner ved å håndtere brukerinteraksjoner, hente og vise data, samt effektivt håndtere asynkrone operasjoner. Gjennom en kombinasjon av teori, praktiske utfordringer og virkelige eksempler gir dette kurset deg de praktiske ferdighetene som kreves for moderne webutvikling.

Tilstandshåndtering med Redux Toolkit i React

Oppdag kraften i Redux Toolkit sammen med React, og styrk dine ferdigheter innen tilstandshåndtering. Dette kurset gir en grundig introduksjon til Redux Toolkit, et kraftig bibliotek for tilstandshåndtering. Lær hvordan du kan forenkle Redux-oppsettet, forenkle kompleks tilstandslogikk og lage effektive, skalerbare React-applikasjoner.

React Router Essentials

Lær å håndtere navigasjon i React-applikasjoner ved hjelp av React Router. Forstå strukturen til URL-er og rutingens rolle i nettapplikasjoner. Sett opp React Router for å lage flersidige applikasjoner med dynamisk innhold basert på URL-stier. Arbeid med avanserte funksjoner som spørringsstrenger og URL-parametere for å håndtere applikasjonstilstand og brukernavigasjon.

Introduction to QA

In this course, the user will get an introduction on how to perform manual testing on primarily web applications. The skills aquired in this course can be used in automation testing as well.

Discover more Learning Tracks

spor

Spillutvikling med Unity

Nybegynner

Full Stack Webutvikling

Nybegynner

Video Production With Adobe

Nybegynner

UI/UX Designverktøy

Nybegynner

Essensielle Kontorferdigheter

Nybegynner

Digital Marketing Essentials

Nybegynner

Complete Social Media Management

Nybegynner

Business AI Toolkit

Nybegynner

Nettsideutvikling Uten Koding

Nybegynner

DevOps Specialist

Nybegynner

Supervised Learning Foundations

Nybegynner

Python from Zero to Hero

Nybegynner

Hvorfor folk velger 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

Interaktivt kodemiljø

Dykk inn i vårt interaktive miljø: skriv og kjør koden din med sanntids tilbakemelding og suksessmålinger—lær ved å gjøre på hvert trinn.

AI-drevet støtte

Bruk den innebygde AI-assistenten til å forklare feil, foreslå løsninger eller svare på spørsmål om koden din—slik at du forblir produktiv og aldri står fast.

Check your progress

Avslutt hver modul med en rask quiz som gir umiddelbar tilbakemelding, sporer fremgangen din og sikrer at du har mestret viktige konsepter.

Promote your expertise

Tjen ditt bransjeanerkjente sertifikat ved fullføring og del det på LinkedIn med ett klikk—la nettverket ditt se hva du kan gjøre.

Stolte på av ansatte i ledende selskaper
og studenter fra toppuniversiteter

Full tilgang til katalogen

Et abonnement gir tilgang til dette kurset og hele katalogen vår av prosjekter og ferdigheter.

Features:

500+ topprangerte kursBanebrytende AI Copilot

Personlige studieløp40+ praktiske prosjekter fra virkeligheten

Prøv Codefinity med tillit – 30-dagers pengene-tilbake-garanti inkludert

For å ønske deg velkommen til Codefinity, tilbyr vi opptil 64% rabatt på våre kurs. I tillegg har vi en 30-dagers pengene-tilbake-garanti, slik at du kan prøve oss uten risiko.Vi ser virkelig frem til å ønske deg velkommen til vår plattform og er forpliktet til å gjøre din læringsopplevelse enkel, interaktiv og morsom.

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å umiddelbar tilgang til 500+ kurs

Ubegrenset læring, umiddelbar tilgangFå full tilgang til alle kurs og spor, inkludert videoinnhold, quizer og dyptgående materialer—start læringen når som helst.

Bransjeanerkjente sertifikaterTjen sertifikater som bekrefter din ekspertise og styrker karrieren din innen teknologi, AI, data, markedsføring og mer.

KI-assistert læringFå personlige hint, sanntids tilbakemelding og AI-drevne forklaringer for å akselerere fremgangen din.

Stadig utvidelse: Nye kurs og karrieresporHold deg foran med stadig oppdaterte kurs, karriereveikart, utfordringer og praktiske prøver.

Bygg ferdigheter som betyr noeMestre etterspurte ferdigheter med kurs i AI, datavitenskap, programmering, markedsføring, automatisering, webutvikling og mer.

Interaktiv og sømløs læringEngasjer deg med praktiske prosjekter, virkelige øvelser og en intuitiv læringsopplevelse — ingen ekstra verktøy nødvendig.

Hva du vil lære

Spillutvikling med Unity

Full Stack Webutvikling

Video Production With Adobe

UI/UX Designverktøy

Essensielle Kontorferdigheter

Digital Marketing Essentials

Complete Social Media Management

Business AI Toolkit

Nettsideutvikling Uten Koding

DevOps Specialist

Supervised Learning Foundations

Python from Zero to Hero

Hvorfor folk velger Codefinity

Stolte på av ansatte i ledende selskaper og studenter fra toppuniversiteter

Full tilgang til katalogen

Prøv Codefinity med tillit – 30-dagers pengene-tilbake-garanti inkludert

Få umiddelbar tilgang til 500+ kurs

Stolte på av ansatte i ledende selskaper
og studenter fra toppuniversiteter