トラックフロントエンド開発（Vue.js） - 修了証付きオンライン学習

フロントエンド開発（Vue.js）

Intermediate

0.0

0 reviews

1 Learners

HTML、CSS、JavaScript、Vue.jsを使用して、最新のウェブインターフェースをゼロから構築します。ウェブの基本から始め、動的でコンポーネントベースのアプリケーションを、リアクティブなデータやユーザーインタラクションとともに作成します。スキルを段階的に応用し、実際のプロジェクトを構築し…

110

Chapters

Learning hours

112

Assignments

AI Assistant

Shareable Certificate

成果

Track content

Related courses and projects

推薦の声

特徴

価格

成果

Track content

Related courses and projects

推薦の声

特徴

価格

学習内容

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

Welcome to the Track

What Is the Internet?

How Does the Internet Work?

Understanding How Websites Work

Frontend and Backend Development Explained

Why HTML Matters in Web Development

Basic HTML Document Structure

Understanding Tags, Elements, and Attributes

Challenge: Structure an HTML Document

Using Headings and Paragraphs

Challenge: Structure Text Content

Working with Links

Using Buttons

Creating and Using Lists in HTML

Challenge: Structure Content with Lists

Working with Images in HTML

Challenge: Insert Images

Creating and Structuring HTML Tables

Challenge: Work with Tables

Building HTML Forms

Challenge: Build a Web Form

Using Form Inputs

Labeling Form Inputs

Challenge: Apply Form Inputs and Labels

HTML Input Attributes for Enhanced Functionality

Semantic HTML and Page Structure

Challenge: Implement Semantic Elements

Building a Complete Website with HTML

What CSS Is and Why It Matters

Connecting CSS to HTML

Basic CSS Selectors

Styling Text and Colors

Adding Hover Effects

Challenge: Style Your First Web Page

Text Formatting for Better Readability

Working with Fonts and Font Properties

Adding Custom Fonts

Challenge: Improve a Blog Article Design

Understanding the Box Model in a Practical Way

Display Property Block, Inline, and Inline Block

Challenge: Fix a Broken Layout

Why Flexbox Exists

Controlling Direction

Justifying Content Horizontally

Aligning Items Vertically

Working with Flex Items

Using Background Colors

Applying Background Images

Adding Shadows for Depth

Challenge: Create a Modern Card Component

What Is JavaScript?

Running JavaScript in the Browser

Variables and Constants

Data Types and Basic Operations

Working with Strings and Numbers

Operators and Comparisons

Conditional Logic `if` / `else`

Logical Operators

Functions

Parameters and Return Values

Arrays

Working with Arrays with `push`, `pop`

`for` Loop

Array Methods `map`, `filter`

Finding Elements in an Array with the find() Method

Sorting Arrays with the sort() Method

Objects

Creating Objects in JavaScript

Accessing Object Properties in JavaScript

Working with Nested Object Properties

Managing Object Properties

Defining Object Methods

Destructuring Objects for Cleaner Code

Cloning and Merging Objects with the Spread Operator

Selecting Elements in the DOM

Responding to User Events

Updating Page Content with JavaScript

Debugging Basics

Introduction to Asynchronous JavaScript

Understanding Callbacks in JavaScript

Handling Asynchronous Operations with Promises

Using Async/Await for Cleaner Asynchronous Code

Fetching and Working with APIs in 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

あなたのテックスキルを強化！

最大55％オフで

Features:

*Tracks not included in Pro plan

500+ 人気コース最先端のAIコパイロット

パーソナライズされた学習トラック40+ 実践的なプロジェクト

選択された割引イントロプランが終了する前にキャンセルしない場合、Codefinityが自動的に課金することを承認します $104 3か月ごと キャンセルするまで。キャンセルおよび返金ポリシーの詳細は、定期購読の条件.

Recommended Courses and Projects

究極のHTML

HTMLの基本を学びましょう。HTMLはすべてのウェブサイトの基盤です。タグや属性を使ってコンテンツを構造化し、明確なドキュメントレイアウトを構築し、画像、リンク、テーブルを追加します。入力やインタラクションを取得するためのアクセシブルでユーザーフレンドリーなフォームを作成します。ベストプラクティスに従いながら、構造化され機能的なウェブページの作成を実践します。HTMLを習得してウェブ開発の第一歩を踏み出しましょう。

JavaScript入門

CSSの基礎

ウェブページの外観と雰囲気を変えるスタイリング言語であるCSSの基本を習得します。テキストスタイル、色、間隔、ボックスモデル、Flexbox、装飾効果などのコアコンセプトを探求します。視覚的に魅力的で構造化されたウェブページを作成するスキルを身につけます。

HTMLの基本

HTMLの基本を習得し、構造化され、アクセシブルなウェブコンテンツを作成します。タグ、要素、属性を使用してドキュメントを構造化する方法を学びます。テキスト、リスト、画像、音声、動画を自在に扱い、ウェブページを充実させます。整理されたデータのためのテーブルや、ユーザー入力・インタラクションのためのフォームを作成します。アクセシビリティを高めるセマンティックHTMLを理解し、基礎から完全で機能的なウェブサイト構造を構築します。

JavaScriptデータ構造

JavaScriptでデータを自信を持って扱うために、オブジェクトと配列を習得します。オブジェクトのプロパティやメソッドの作成、アクセス、管理方法を効果的に理解します。イテレーション、クローン、分割代入などの高度なオブジェクト操作技術を学び、よりクリーンなコードを実現します。配列操作の基礎を固め、配列要素の管理、イテレーション、効率的な修正方法を習得します。map、filter、find、sortなどの高度な配列メソッドを使い、アプリケーション内でデータを効果的に変換・処理する技術を身につけます。

CSS Layout, Effects, and Sass

Level up your styling skills by mastering advanced CSS techniques for modern web design. Position and manage elements with precision using advanced positioning strategies. Create smooth transitions and engaging animations to enhance user experience. Transform and manipulate elements for dynamic visual effects. Build responsive designs that adapt across devices and learn to streamline your workflow with CSS preprocessors like Sass.

JavaScript忍者

JavaScript Ninjaコースへようこそ！この魅力的でインタラクティブなコースは、楽しく教育的なゲームを通じてJavaScriptプログラミングの基礎を紹介するように設計されています。あなたは忍者をさまざまなチャレンジに導き、JavaScriptを使って動きを制御し、寿司のようなオブジェクトと対話します。基本から始めて、マップのナビゲート方法、寿司の取得と配置方法を学び、徐々に関数、ループ、条件分岐などのより複雑なプログラミング概念へと進みます。各章では実践的な演習を通じて学習を強化し、最後にはスキルを試すエキサイティングなチャレンジが待っています。完全な初心者でも、コーディングスキルを磨きたい方でも、このコースは包括的で楽しい学習体験を提供します。ぜひご参加いただき、コーディング忍者になりましょう！

JavaScript Logic and Interaction

Master essential JavaScript concepts, including classes, DOM manipulation, event handling, and asynchronous programming. Learn to create dynamic and interactive web applications by managing user interactions, fetching and displaying data, and handling asynchronous operations efficiently. Through a blend of theory, hands-on challenges, and real-world examples, this course equips you with the practical skills needed for modern web development.

QA入門

このコースでは、主にウェブアプリケーションに対する手動テストの実施方法について紹介します。本コースで習得したスキルは、オートメーションテストにも応用可能です。

Test Automation with Jest and Selenium

Build on top of your previously acquired Manual Testing knowledge and learn Automation Testing using Node.JS and Jest. This course will also introduce you to some additional libraries and tools like Selenium, Axios and Jenkins.

Functions in JavaScript

JavaScript functions from the fundamentals to modern syntax and best practices. Gain understanding of how functions shape every part of JavaScript, helping create clean, modular, and efficient code. Master both classic patterns and modern approaches to writing reusable, maintainable functions for any project.

DOM Manipulation with JavaScript

A practical introduction to JavaScript DOM manipulation for beginners. This course covers everything from understanding the DOM and selecting elements to modifying content, handling events, and writing efficient code. Build interactive, dynamic web pages with confidence through guided examples and hands-on practice.

Discover more Learning Tracks

トラック

Unityによるゲーム開発

初心者

Adobeによるビデオプロダクション

初心者

UI/UXデザインツール

初心者

必須オフィススキル

初心者

デジタルマーケティングの基礎

初心者

完全なソーシャルメディア管理

初心者

ビジネスAIツールキット

初心者

ノーコードウェブサイト開発

初心者

DevOpsスペシャリスト

初心者

教師あり学習の基礎

初心者

Pythonゼロからヒーローへ

初心者

Cプログラミング基礎

初心者

なぜ人々は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

インタラクティブなコーディング環境

インタラクティブな環境に飛び込み、リアルタイムのフィードバックと成果指標を活用してコードを書き、実行しながら一歩ずつ学んでいきましょう。

AI搭載のサポート

内蔵のAIアシスタントを活用してエラーの説明、修正案の提示、あるいはコードに関するあらゆる質問に答え、生産性を保ち、詰まることなく作業を進めましょう。

Check your progress

各モジュールの締めくくりとしてクイッククイズを実施し、即時フィードバックを受け、進捗を確認し、主要な概念を確実に習得できたかチェックしましょう。

Promote your expertise

修了後に業界で認められた証明書を取得し、ワンクリックでLinkedInに共有して、あなたの実力を周囲に示しましょう。