Læringsspor Frontend Development with Vue.js - Online-undervisning med certifikat

Frontend Development with Vue.js

Intermediate

0.0

0 reviews

1 Learners

Build modern web interfaces from scratch using HTML, CSS, JavaScript, and Vue.js. Move from core web fundamentals to creating dynamic, component-based…

110

Chapters

Learning hours

112

Assignments

AI Assistant

Shareable Certificate

Resultater

Track content

Related courses and projects

Udtalelser

Funktioner

Priser

Resultater

Track content

Related courses and projects

Udtalelser

Funktioner

Priser

Hvad du vil lære

Understand how the web works and how frontend applications are structured

Write JavaScript to handle logic, user interactions, and dynamic updates

Create and structure reusable components

Build page structure using HTML and semantic element

Work with arrays, objects, and asynchronous data in real scenarios

Manage state and handle user input in applications

Style interfaces using CSS, layout techniques, and responsive design

Use Vue.js to render data and build reactive user interfaces

Build a complete frontend application from scratch

Learning track content

Velkommen til HTML og Webudvikling

Hvad Er Internettet?

Hvordan Fungerer Internettet?

Forståelse af, Hvordan Hjemmesider Fungerer

Frontend- og Backend-Udvikling Forklaret

Hvorfor HTML er Vigtigt i Webudvikling

Grundlæggende HTML-dokumentstruktur

Forståelse af Tags, Elementer og Attributter

Udfordring: Strukturér et HTML-dokument

Brug af Overskrifter og Afsnit

Udfordring: Strukturér Tekstindhold

Arbejde med Links

Brug af Knapper

Oprettelse og Brug af Lister i HTML

Udfordring: Strukturér Indhold med Lister

Arbejde med billeder i HTML

Udfordring: Indsæt Billeder

Oprettelse og Strukturering af HTML-Tabeller

Udfordring: Arbejde med Tabeller

Opbygning af HTML-formularer

Udfordring: Opbyg en Webformular

Brug af formularinput

Mærkning af formularfelter

Udfordring: Anvend Formularinput og Etiketter

HTML Input-Attributter for Udvidet Funktionalitet

Semantisk HTML og Sidestruktur

Udfordring: Implementer Semantiske Elementer

Opbygning af et Komplet Website med HTML

Hvad CSS Er, og Hvorfor Det Er Vigtigt

Forbindelse af CSS til HTML

Grundlæggende CSS-selektorer

Styling af Tekst og Farver

Tilføjelse af Hover-Effekter

Udfordring: Style Din Første Webside

Tekstformatering for Bedre Læsbarhed

Arbejde med Skrifttyper og Skrifttypeegenskaber

Tilføjelse af brugerdefinerede skrifttyper

Udfordring: Forbedr et Blogartikeldesign

Forståelse af Box-Modellen på en Praktisk Måde

Display-egenskab: Block, Inline og Inline-block

Udfordring: Ret et Ødelagt Layout

Hvorfor Flexbox Eksisterer

Kontrol af Retning

Justificering af Indhold Horisontalt

Justering af elementer lodret

Arbejde med Flex-Elementer

Brug af baggrundsfarver

Anvendelse af Baggrundsbilleder

Tilføjelse af Skygger for Dybde

Udfordring: Opret en Moderne Kortkomponent

Hvad er JavaScript?

Kørsel af JavaScript i Browseren

Variabler og Konstanter

Datatyper og Grundlæggende Operationer

Arbejde med Strenge og Tal

Operatorer og Sammenligninger

Betinget Logik `if` / `else`

Logiske Operatorer

Funktioner

Parametre og Returværdier

Arrays

Arbejde med Arrays med `push`, `pop`

`For`-løkke

Array-metoderne `map`, `filter`

Finde Elementer i et Array med Find()-Metoden

Sortering af Arrays med sort()-Metoden

Objekter

Oprettelse af Objekter i JavaScript

Adgang til Objekt-Egenskaber i JavaScript

Arbejde med Indlejrede Objekt-Egenskaber

Håndtering af Objekt-Egenskaber

Definering af Objektmetoder

Destrukturering af Objekter for Mere Overskuelig Kode

Kloning og Sammensmeltning af Objekter med Spread-Operatoren

Selecting Elements in the DOM

Responding to User Events

Updating Page Content with JavaScript

Grundlæggende Fejlfinding

Introduktion til Asynkron JavaScript

Forståelse af Callbacks i JavaScript

Håndtering af Asynkrone Operationer med Promises

Brug af Async/Await for Mere Overskuelig Asynkron Kode

Hentning og Arbejde med API'er i JavaScript

Preparing for Vue.js

What Is Vue.js and Why It Is Used

Creating Your First Vue App (Vite Setup)

Understanding the Vue Project Structure

Template Syntax and Rendering Data

Working with Reactive Data (ref)

Handling User Events in Vue

Conditional Rendering (v-if)

Rendering Lists (v-for)

What Are Components in Vue

Creating and Using Components

Passing Data with Props

Emitting Events from Components

Managing State with ref and reactive

Computed Properties

Watching Data with watch

Two-Way Binding with v-model

Handling Form Input

Form Validation Basics

Styling Components with CSS

Scoped Styles in Vue

Dynamic Classes and Styles

Project Setup

Building the UI Structure

Adding Interactivity

Managing State

Final Improvements and Cleanup

Boost dine Tech Færdigheder!

med op til 55% rabat

Features:

*Tracks not included in Pro plan

500+ Topbedømte kurserBanebrydende AI Copilot

Personlige studieveje40+ praktiske virkelige projekter

Uden afbestilling, før den valgte rabatplan udløber, accepterer jeg, at Codefinity automatisk opkræver $104 hver 3. måned indtil jeg annullerer. Læs mere om afbestillings- og refunderingspolitikken på Abonnementsvilkår.

Recommended Courses and Projects

test code

Test explain sentence

hover on sentence and explain it

HTML-Grundlæggende

Behersk det grundlæggende i HTML for at opbygge velstruktureret og tilgængeligt webindhold. Lær at strukturere dokumenter ved hjælp af tags, elementer og attributter. Arbejd sikkert med tekst, lister, billeder, lyd og video for at berige websider. Opret tabeller for organiserede data og formularer til brugerinput og interaktion. Opdag semantisk HTML for at forbedre tilgængelighed og opbygge komplette, funktionelle webstedsstrukturer fra bunden.

Test UI Features

Let's test

Introduktion til JavaScript

Dyk ned i verdenen af det mest populære sprog til front-end udvikling – JavaScript. JavaScript er et sprog, der er indbygget i næsten alle browsere og kan bruges til en bred vifte af opgaver. Lær den grundlæggende funktionalitet og forbered dig på udfordringer og mere avancerede programmeringsteknikker.

Ultimativ HTML

Lær det grundlæggende i HTML (HyperText Markup Language), fundamentet for webudvikling. Dette begynder-venlige kursus dækker tags, attributter, elementer og strukturering af websider. Få praktiske færdigheder i at skabe overskrifter, afsnit, lister, billeder, links, formularer og tabeller. Udforsk bedste praksis, optimering og webtilgængelighed. Start din webudviklingsrejse med HTML.

Javascript Datastrukturer

Lær at arbejde sikkert med data i JavaScript ved at mestre objekter og arrays. Forstå hvordan man opretter, tilgår og håndterer objekt-egenskaber og metoder effektivt. Dyk ned i avancerede teknikker til objektmanipulation, herunder iteration, kloning og destrukturering for mere overskuelig kode. Opbyg et solidt fundament i arbejdet med arrays og lær at håndtere, iterere og ændre array-elementer effektivt. Behersk avancerede array-metoder som map, filter, find og sort for at transformere og håndtere data effektivt i dine applikationer.

CSS-Grundlæggende

Behersk det grundlæggende i CSS, sproget til styling, der forvandler udseendet og oplevelsen af websider. Udforsk kernekoncepter såsom tekststilarter, farver, afstand, box-modellen, Flexbox og dekorative effekter. Opbyg færdigheder til at skabe visuelt engagerende og velstrukturerede websider.

Introduction to CSS Part I

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in a markup language like HTML. CSS is a fundamental building block of the modern web and controls the styling and layout of websites and web applications.

Introduction to CSS Part II

Continue learning CSS. CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in a markup language like HTML. CSS is a fundamental building block of the modern web and controls the styling and layout of websites and web applications.

React Tutorial

JavaScript Ninja

Velkommen til JavaScript Ninja-kurset! Dette engagerende og interaktive kursus er designet til at introducere dig til grundlæggende JavaScript-programmering gennem et sjovt og lærerigt spil. Du vil guide en ninja gennem forskellige udfordringer ved at bruge JavaScript til at kontrollere bevægelser og interagere med objekter som sushi. Startende med det grundlæggende, vil du lære at navigere på kortet, samle og placere sushi og gradvist udvikle dig til mere komplekse programmeringskoncepter som funktioner, loops og betingede udsagn. Hvert kapitel tilbyder praktisk øvelse for at styrke din læring, kulminerende i spændende udfordringer, der tester dine færdigheder. Uanset om du er en komplet nybegynder eller ønsker at skærpe dine kodningsevner, giver dette kursus en omfattende og fornøjelig læringsoplevelse. Deltag og bliv en kodningsninja!

Discover more Learning Tracks

spor

TEST TRACK 12

Begynder

Full Stack Webudvikling

Begynder

Bliv En React-Udvikler

Mellemniveau

Mestring af Datavisualisering

Mellemniveau

SQL fra Begynder til Ekspert

Begynder

C++ Grundlæggende

Begynder

Python fra Nul til Helt

Begynder

Maskinlæring Mestring

Mellemniveau

Python Ud Over Mellemniveau

Begynder

Spiludvikling med Unity

Begynder

Become a Django Developer

Avanceret

Flask for Dummies

Mellemniveau

Hvorfor Folk Vælger 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 kodningsmiljø

Dyk ned i vores interaktive miljø: skriv og kør din kode med feedback i realtid og succesmålinger—lær ved at gøre på hvert trin.

AI-drevet support

Udnyt den indbyggede AI-assistent til at forklare fejl, foreslå rettelser eller besvare spørgsmål om din kode—så du forbliver produktiv og aldrig går i stå.

Check your progress

Afslut hvert modul med en hurtig quiz, der giver øjeblikkelig feedback, sporer din fremgang og sikrer, at du har mestret nøglekoncepter.

Promote your expertise

Tjen dit brancheanerkendte certifikat ved afslutning og del det på LinkedIn med ét klik—lad dit netværk se, hvad du kan.

Betroet af Medarbejdere fra Ledende Virksomheder
og Studerende fra Topuniversiteter

Fuld adgang til kataloget

Et abonnement åbner dette kursus og hele vores katalog af projekter og færdigheder.

Features:

500+ Topbedømte kurserBanebrydende AI Copilot

Personlige studieveje40+ praktiske virkelige projekter

Prøv Codefinity med tillid – 30-dages pengene-tilbage-garanti inkluderet

For at byde dig velkommen til Codefinity, tilbyder vi op til 64% rabat på vores kurser. Plus, vi har en 30-dages pengene-tilbage-garanti, så du kan prøve os uden risiko.Vi ser virkelig frem til at byde dig velkommen til vores platform og er engagerede i at gøre din læringsoplevelse nem, interaktiv og sjov.

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å øjeblikkelig adgang til 500+ kurser

Ubegrænset Læring, Øjeblikkelig AdgangFå fuld adgang til alle kurser og spor, inklusive videoindhold, quizzer og dybdegående materialer—start læring når som helst.

Brancheanerkendte CertifikaterTjen certifikater, der validerer din ekspertise og styrker din karriere inden for tech, AI, data, marketing og mere.

KI-assisteret læringFå personlige hints, feedback i realtid og AI-drevne forklaringer for at fremskynde din fremgang.

Konstant Udvidelse: Nye Kurser & KarriereforløbHold dig foran med konstant opdaterede kurser, karriereplaner, udfordringer og praktiske prøver.

Opbyg Færdigheder Der TællerMestre efterspurgte færdigheder med kurser i AI, datavidenskab, programmering, marketing, automatisering, webudvikling og mere.

Interaktiv & Problemfri LæringEngager dig med praktiske projekter, virkelige øvelser og en intuitiv læringsoplevelse — ingen ekstra værktøjer nødvendige.

Hvad du vil lære

TEST TRACK 12

Full Stack Webudvikling

Bliv En React-Udvikler

Mestring af Datavisualisering

SQL fra Begynder til Ekspert

C++ Grundlæggende

Python fra Nul til Helt

Maskinlæring Mestring

Python Ud Over Mellemniveau

Spiludvikling med Unity

Become a Django Developer

Flask for Dummies

Hvorfor Folk Vælger Codefinity

Betroet af Medarbejdere fra Ledende Virksomheder og Studerende fra Topuniversiteter

Fuld adgang til kataloget

Prøv Codefinity med tillid – 30-dages pengene-tilbage-garanti inkluderet

Få øjeblikkelig adgang til 500+ kurser

Betroet af Medarbejdere fra Ledende Virksomheder
og Studerende fra Topuniversiteter