Трек Frontend Development with Next.js - Онлайн-навчання з сертифікатом

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

Результати

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

Ласкаво просимо до HTML та веб-розробки

Що Таке Інтернет?

Як Працює Інтернет?

Розуміння Того, Як Працюють Вебсайти

Пояснення Фронтенд та Бекенд Розробки

Чому HTML Має Значення у Веб-Розробці

Базова Структура HTML-Документа

Розуміння Тегів, Елементів та Атрибутів

Завдання: Структурування HTML-документа

Використання заголовків і абзаців

Завдання: Структурування Текстового Вмісту

Робота з посиланнями

Використання Кнопок

Створення та Використання Списків у HTML

Виклик: Структурування Контенту за Допомогою Списків

Робота із Зображеннями в HTML

Завдання: Вставлення Зображень

Створення та структурування HTML-таблиць

Виклик: Робота з таблицями

Створення HTML-форм

Завдання: Створення Веб-Форми

Використання Елементів Введення Форми

Маркування Полів Форми

Завдання: Застосування Елементів Введення Та Міток У Формах

Атрибути Input у HTML для Розширення Функціональності

Семантичний HTML та структура сторінки

Завдання: Впровадження Семантичних Елементів

Створення Повноцінного Вебсайту за Допомогою HTML

Що таке CSS і чому це важливо

Підключення CSS до HTML

Базові селектори CSS

Стилізація Тексту Та Кольорів

Додавання Ефектів При Наведенні

Завдання: Стилізуйте Свою Першу Веб-сторінку

Форматування Тексту Для Кращої Читабельності

Робота зі шрифтами та їх властивостями

Додавання Користувацьких Шрифтів

Завдання: Покращення Дизайну Статті Блогу

Практичне Розуміння Блочної Моделі

Властивість Display: Block, Inline та Inline-Block

Завдання: Виправте зламаний макет

Чому Існує Flexbox

Керування напрямком

Горизонтальне вирівнювання вмісту

Вирівнювання Елементів По Вертикалі

Робота з елементами Flex

Використання Кольорів Фону

Застосування Фонових Зображень

Додавання Тіней для Глибини

Завдання: Створення Сучасного Карткового Компонента

Що таке JavaScript?

Запуск JavaScript у Браузері

Змінні та константи

Типи Даних та Базові Операції

Робота з Рядками та Числами

Оператори та порівняння

Умовна Логіка `if` / `else`

Логічні Оператори

Функції

Параметри та Значення, Що Повертаються

Масиви

Робота з Масивами за Допомогою `push`, `pop`

Методи Масивів `map`, `filter`

Цикл `for`

Об'єкти

Поєднання Даних і Логіки

Основи Налагодження

Розуміння Об'єктів у JavaScript

Створення Об'єктів у JavaScript

Робота з Вкладеними Властивостями Об'єктів

Доступ до Властивостей Об'єкта в JavaScript

Керування Властивостями Об'єктів

Визначення Методів Об'єкта

Використання Властивостей у Методах

Клонування та об'єднання об'єктів за допомогою оператора Spread

Деструктуризація Об'єктів для Чистішого Коду

Трансформація Масивів за Допомогою Методу map()

Фільтрація Масивів за Допомогою Методу Filter()

Пошук Елементів у Масиві за Допомогою Методу find()

Сортування Масивів за Допомогою Методу sort()

Вступ до асинхронного JavaScript

Розуміння Зворотних Викликів у JavaScript

Обробка Асинхронних Операцій за Допомогою Промісів

Використання Async/Await для Чистішого Асинхронного Коду

Отримання та Робота з API у JavaScript

Інтеграція API у JavaScript-Додатках

Ready for React

Що Таке React і Чому Його Використовують

Розуміння Компонентів React

Основи JSX у React

Відображення Елементів у React

Завдання: Відобразити Елемент у React

Передача Даних Через Props

Завдання: Створення Функціональних Компонентів

Умовне Відображення в React

Завдання: Реалізуйте Умовний Рендеринг у Сповіщенні Чату

Завдання: Реалізуйте Умовний Рендеринг у Банківському Сповіщенні

Відображення Списків Даних у React

Завдання: Відображення Колекцій Даних

Керування Станом за Допомогою useState

Handling User Events in React

Завдання: Перемикання Видимості за Допомогою Стану

Working with Forms in React

Варіанти Стилізації в React

Використання Вбудованих Стилів у React

Стилізація Компонентів За Допомогою Зовнішнього CSS

Завдання: Стилізуйте React-Додаток

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

Покращуйте свої технічні навички!

зі знижкою до 55%

Features:

*Tracks not included in Pro plan

500+ найкращих курсівПередовий AI Копілот

Персоналізовані навчальні треки40+ практичних реальних проектів

Без скасування, до закінчення обраного плану зі знижкою, я погоджуюсь, що Codefinity автоматично стягне плату $104 кожні 3 місяці поки я не скасую. Дізнайтеся більше про політику скасування та повернення в Умови підписки.

Recommended Courses and Projects

Ultimate HTML

Вивчайте основи HTML (HyperText Markup Language), фундаменту веб-розробки. Цей курс для початківців охоплює теги, атрибути, елементи та структурування веб-сторінок. Отримайте практичні навички створення заголовків, абзаців, списків, зображень, посилань, форм і таблиць. Ознайомтеся з найкращими практиками, оптимізацією та веб-доступністю. Почніть свій шлях у веб-розробці з HTML.

Вступ до JavaScript

Зануртеся у світ найпопулярнішої мови для фронтенд-розробки — JavaScript. JavaScript — це мова, вбудована майже в кожен браузер, і може використовуватися для широкого спектра завдань. Вивчіть базову функціональність та підготуйтеся до викликів і більш просунутих технік програмування.

Вступ до React

Ознайомлення з основами створення користувацьких інтерфейсів за допомогою React. Акцент на компонентах, JSX, потоках даних, стані та побічних ефектах, що використовуються у повсякденних React-застосунках.

Основи CSS

Опануйте основи CSS — мови стилізації, яка змінює зовнішній вигляд і сприйняття вебсторінок. Дослідіть ключові концепції, такі як стилі тексту, кольори, відступи, модель коробки, Flexbox і декоративні ефекти. Розвивайте навички створення візуально привабливих і структурованих вебсторінок.

Основи HTML

Опанування основ HTML для створення структурованого та доступного веб-контенту. Вивчення структурування документів за допомогою тегів, елементів і атрибутів. Робота з текстом, списками, зображеннями, аудіо та відео для збагачення веб-сторінок. Створення таблиць для впорядкованих даних і форм для введення та взаємодії користувачів. Ознайомлення з семантичним HTML для підвищення доступності та побудови повноцінних, функціональних структур веб-сайтів з нуля.

Структури Даних JavaScript

Навчіться впевнено працювати з даними в JavaScript, опанувавши об'єкти та масиви. Зрозумійте, як створювати, отримувати доступ і ефективно керувати властивостями та методами об'єктів. Ознайомтеся з розширеними техніками маніпуляції об'єктами, включаючи ітерацію, клонування та деструктуризацію для чистішого коду. Сформуйте міцну базу у роботі з масивами та навчіться ефективно керувати, ітерувати та змінювати елементи масивів. Опануйте розширені методи масивів, такі як map, filter, find і sort, для трансформації та обробки даних у ваших застосунках.

Вступ до TypeScript

Цей курс призначений для абсолютних початківців, які бажають опанувати основи мови програмування TypeScript. TypeScript — це сучасна та потужна мова, що розширює можливості JavaScript, роблячи ваш код більш надійним і читабельним. Ми почнемо з найосновнішого, розглянемо змінні, типи даних, оператори порівняння та умовні оператори. Далі перейдемо до роботи з масивами та циклами. Після завершення цього курсу ви будете готові створювати прості програми на TypeScript і продовжити навчання більш складним темам.

CSS-верстка, ефекти та Sass

Підвищуйте свої навички стилізації, опановуючи сучасні техніки CSS для вебдизайну. Розміщуйте та керуйте елементами з точністю за допомогою розширених стратегій позиціонування. Створюйте плавні переходи та захоплюючі анімації для покращення взаємодії з користувачем. Трансформуйте та змінюйте елементи для динамічних візуальних ефектів. Створюйте адаптивні дизайни для різних пристроїв і оптимізуйте робочий процес за допомогою CSS-препроцесорів, таких як Sass.

Майстерність Next.js 14 для Створення Сучасних Вебзастосунків

Навчіться створювати сучасні високопродуктивні вебзастосунки з використанням Next.js. Налаштовуйте проєкти зі структурованими макетами, стилізацією та маршрутизацією для безшовної навігації. Ефективно отримуйте та відображайте дані, оптимізуючи рендеринг і продуктивність. Реалізуйте розширені функції, такі як пагінація, CRUD-операції та глобальний пошук для динамічних вебзастосунків. Розгортайте свої проєкти Next.js, підключайте їх до баз даних і додавайте автентифікацію для захисту даних користувачів.

JavaScript Ninja

Ласкаво просимо до курсу JavaScript Ninja! Цей захоплюючий та інтерактивний курс розроблений, щоб познайомити вас з основами програмування на JavaScript через веселу та освітню гру. Ви будете керувати ніндзя через різні виклики, використовуючи JavaScript для контролю рухів та взаємодії з об'єктами, такими як суші. Починаючи з основ, ви навчитеся навігувати по карті, підбирати та розміщувати суші, і поступово перейдете до більш складних концепцій програмування, таких як functions, loops та conditional statements. Кожна глава пропонує практичні завдання для закріплення ваших знань, завершуючи захоплюючими викликами, які перевіряють ваші навички. Незалежно від того, чи ви повний новачок, чи хочете покращити свої навички кодування, цей курс надає всебічний та приємний досвід навчання. Приєднуйтесь до нас і станьте ніндзя кодування!

Логіка та Взаємодія в JavaScript

Опануйте ключові концепції JavaScript, включаючи класи, маніпуляцію DOM, обробку подій та асинхронне програмування. Навчіться створювати динамічні та інтерактивні вебзастосунки шляхом керування взаємодією з користувачем, отримання та відображення даних, а також ефективної обробки асинхронних операцій. Завдяки поєднанню теорії, практичних завдань і реальних прикладів цей курс надає практичні навички, необхідні для сучасної веброзробки.

Керування станом з Redux Toolkit у React

Відкрийте для себе можливості Redux Toolkit у поєднанні з React та вдосконалюйте навички керування станом. Цей курс комплексно знайомить з Redux Toolkit — потужною бібліотекою для керування станом. Дізнайтеся, як оптимізувати налаштування Redux, спростити складну логіку стану та створювати ефективні, масштабовані React-додатки.

Discover more Learning Tracks

трек

Розробка Ігор з Unity

Базовий

Video Production With Adobe

Базовий

Інструменти Дизайну UI/UX

Базовий

Essential Office Skills

Базовий

Digital Marketing Essentials

Базовий

Complete Social Media Management

Базовий

Business AI Toolkit

Базовий

Розробка Вебсайтів Без Коду

Базовий

DevOps Specialist

Базовий

Supervised Learning Foundations

Базовий

Python from Zero to Hero

Базовий

C Programming Fundamentals

Базовий

Чому обирають 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 одним кліком — нехай ваша мережа бачить, що ви можете.

Довіряють працівники провідних компаній
та студенти з провідних університетів

Повний доступ до каталогу

Одна підписка відкриває цей курс і весь наш каталог проектів і навичок.

Features:

500+ найкращих курсівПередовий AI Копілот

Персоналізовані навчальні треки40+ практичних реальних проектів

Спробуйте 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, науки про дані, програмування, маркетингу, автоматизації, веб-розробки та інших.

Інтерактивне та безперервне навчанняЗаймайтеся практичними проектами, реальними вправами та інтуїтивним навчанням — без додаткових інструментів.

Що ви навчитеся

Розробка Ігор з Unity

Video Production With Adobe

Інструменти Дизайну UI/UX

Essential Office Skills

Digital Marketing Essentials

Complete Social Media Management

Business AI Toolkit

Розробка Вебсайтів Без Коду

DevOps Specialist

Supervised Learning Foundations

Python from Zero to Hero

C Programming Fundamentals

Чому обирають Codefinity

Довіряють працівники провідних компаній та студенти з провідних університетів

Повний доступ до каталогу

Спробуйте Codefinity з упевненістю — включена 30-денна гарантія повернення грошей

Миттєвий доступ до 500+ курсів

Довіряють працівники провідних компаній
та студенти з провідних університетів