トラック Next.jsによるフロントエンド開発 - 修了証付きオンライン学習

Next.jsによるフロントエンド開発

Next.jsによるフロントエンド開発

Intermediate

0.0

0 reviews

1 Learners

ウェブの基礎からReactおよびNext.jsを用いた最新のアプリケーション開発までの全工程を学びます。アプリの構造設計、データ管理、ユーザーインタラクションの処理方法を習得します。実践的なスキルを身につけ、実運用可能なウェブアプリケーションの作成とリリースに必要な能力を養います。

182

Chapters

20

Learning hours

192

Assignments

AI Assistant

Shareable Certificate

成果

成果

Track content

Related courses and projects

推薦の声

特徴

価格

成果

成果

Track content

Related courses and projects

推薦の声

特徴

価格

学習内容

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

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

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

Parameters and Return Values

Working with Arrays with `push`, `pop`

Array Methods `map`, `filter`

Combining Data and Logic

Debugging Basics

Understanding Objects in JavaScript

Creating Objects in JavaScript

Working with Nested Object Properties

Accessing Object Properties in JavaScript

Managing Object Properties

Defining Object Methods

Using Properties within Methods

Cloning and Merging Objects with the Spread Operator

Destructuring Objects for Cleaner Code

Transforming Arrays with the map() Method

Filtering Arrays with the filter() Method

Finding Elements in an Array with the find() Method

Sorting Arrays with the sort() Method

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

Integrating APIs in JavaScript Applications

Ready for React

What React Is and Why It Is Used

Understanding React Components

JSX Basics in React

Rendering Elements in React

Challenge: Render an Element in React

Passing Data with Props

Challenge: Create Functional Components

Conditional Rendering in React

Challenge: Implement Conditional Rendering in Chat Notification

Challenge: Implement Conditional Rendering in Bank Alert

Rendering Lists of Data in React

Challenge: Display Data Collections

Managing State with useState

Handling User Events in React

Challenge: Toggle Visibility with State

Working with Forms in React

Styling Options in React

Using Inline Styles in React

Styling Components with External CSS

Challenge: Style a React Application

React Fundamentals Wrap Up

What Is TypeScript?

Why Use TypeScript?

TypeScript in Real-World Projects

Type Inference and Explicit Typing

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

Optional Parameters

Default Parameters

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

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

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

最大55％オフで

Features:

*Tracks not included in Pro plan

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

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

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

Recommended Courses and Projects

究極のHTML

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

JavaScript入門

フロントエンド開発で最も人気のある言語、JavaScriptの世界に飛び込みましょう。JavaScriptはほぼすべてのブラウザに組み込まれており、さまざまなタスクに利用できます。基本的な機能を学び、課題やより高度なプログラミング技術に備えましょう。

React入門

Reactを使用したユーザーインターフェース構築の基礎を学びます。コンポーネント、JSX、データフロー、状態管理、日常的なReactアプリケーションで使用される副作用に焦点を当てます。

CSSの基礎

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

HTMLの基本

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

JavaScriptデータ構造

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

Introduction to TypeScript

This course is designed for absolute beginners who want to master the basics of the TypeScript programming language. TypeScript is a modern and powerful language that extends the capabilities of JavaScript, making your code more reliable and readable. We will start from the very basics, covering variables, data types, comparison operators, and conditional statements. Then, we will delve into working with arrays and loops. Upon completing this course, you will be ready to create simple programs in TypeScript and continue your learning journey into more advanced topics.

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.

Next.js 14 Mastery for Building Modern Web Apps

Learn to build modern, high-performance web applications using Next.js. Set up projects with structured layouts, styling, and routing for seamless navigation. Fetch and display data efficiently while optimizing rendering and performance. Implement advanced features like pagination, CRUD operations, and global search for dynamic web apps. Deploy your Next.js projects and connect them with databases, and add authentication to protect user data.

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.

State Management with Redux Toolkit in React

Discover the power of Redux Toolkit in conjunction with React, and supercharge your state management skills. This course comprehensively introduces Redux Toolkit, a powerful library for managing state. Learn how to streamline your Redux setup, simplify complex state logic, and create efficient, scalable React applications.

Discover more Learning Tracks

Unityによるゲーム開発

初心者

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

初心者

UI/UXデザインツール

初心者

必須オフィススキル

初心者

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

初心者

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

初心者

ビジネスAIツールキット

初心者

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

初心者

DevOpsスペシャリスト

初心者

教師あり学習の基礎

初心者

Pythonゼロからヒーローへ

2 プロジェクト

初心者

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に共有して、あなたの実力を周囲に示しましょう。

大手企業の従業員に信頼されています
そしてトップ大学の学生にも

カタログ全体へのアクセス

サブスクリプション1つで、このコースとプロジェクトやスキルの全カタログにアクセス可能です。

Features:

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

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

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

安心してCodefinityを試してみてください – 30日間の返金保証付き

Codefinityへの歓迎として、最大 64％オフでコースをご提供します。さらに、 30日間の返金保証, でリスクなしでお試しいただけます。私たちはあなたをプラットフォームにお迎えできることを心から楽しみにしており、学習体験を簡単でインタラクティブ、かつ楽しいものにすることをお約束します。

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

すぐにアクセスできる 500+ コース

無制限の学習、即時アクセスビデオコンテンツ、クイズ、詳細な教材を含むすべてのコースとトラックに完全にアクセスでき、いつでも学習を始められます。

業界で認められた証明書あなたの専門性を証明する証明書を取得し、テック、AI、データ、マーケティングなどの分野でキャリアを向上させましょう。

AI支援学習パーソナライズされたヒント、リアルタイムフィードバック、AIによる説明であなたの進歩を加速させましょう。

絶えず拡大中：新しいコースとキャリアトラック常に更新されるコース、キャリアロードマップ、チャレンジ、実践的な模擬試験で、一歩先を行きましょう。

重要なスキルを磨くAI、データサイエンス、プログラミング、マーケティング、自動化、ウェブ開発など、需要の高いスキルを学びマスターしましょう。

インタラクティブでシームレスな学習実践的なプロジェクト、実世界の演習、直感的な学習体験に取り組み、追加のツールは不要です。

some-alt