Ruta de Frontend Development with Next.js - Aprendizaje en Línea con Certificado

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

Resultados

Track content

Related courses and projects

Testimonios

Características

Precios

Resultados

Track content

Related courses and projects

Testimonios

Características

Precios

Lo que aprenderás

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

Bienvenida a HTML y Desarrollo Web

¿Qué Es Internet?

¿Cómo Funciona Internet?

Comprensión de Cómo Funcionan los Sitios Web

Explicación del Desarrollo Frontend y Backend

Por Qué HTML Es Importante en el Desarrollo Web

Estructura Básica de un Documento HTML

Comprensión de Etiquetas, Elementos y Atributos

Desafío: Estructura un Documento HTML

Uso de Encabezados y Párrafos

Desafío: Estructurar el Contenido de Texto

Trabajando con Enlaces

Uso de Botones

Creación y Uso de Listas en HTML

Desafío: Estructurar Contenido con Listas

Trabajando con Imágenes en HTML

Desafío: Insertar Imágenes

Creación y Estructuración de Tablas HTML

Desafío: Trabajar con Tablas

Creación de Formularios HTML

Desafío: Crear un Formulario Web

Uso de Entradas de Formulario

Etiquetado de Campos de Formulario

Desafío: Aplicar Entradas de Formulario y Etiquetas

Atributos de Entrada HTML para Funcionalidad Mejorada

HTML Semántico y Estructura de la Página

Desafío: Implementar Elementos Semánticos

Construcción de un Sitio Web Completo con HTML

Qué Es CSS y Por Qué Es Importante

Conexión de CSS a HTML

Selectores Básicos de CSS

Estilización de Texto y Colores

Agregar Efectos Hover

Desafío: Da Estilo a Tu Primera Página Web

Formato de Texto para una Mejor Legibilidad

Trabajando con fuentes y propiedades de fuentes

Agregar fuentes personalizadas

Desafío: Mejorar el Diseño de un Artículo de Blog

Comprensión Práctica del Modelo de Caja

Propiedad Display: Block, Inline e Inline-Block

Desafío: Arreglar un Diseño Roto

Por Qué Existe Flexbox

Control de Dirección

Justificar el Contenido Horizontalmente

Alineación Vertical de Elementos

Trabajando con Elementos Flexibles

Uso de Colores de Fondo

Aplicación de Imágenes de Fondo

Agregar Sombras para Profundidad

Desafío: Crea un Componente de Tarjeta Moderna

¿Qué es JavaScript?

Ejecución de JavaScript en el Navegador

Variables y Constantes

Tipos de Datos y Operaciones Básicas

Trabajando con Cadenas y Números

Operadores y Comparaciones

Lógica Condicional `if` / `else`

Operadores Lógicos

Funciones

Parámetros y Valores de Retorno

Arreglos

Trabajando con Arreglos Usando `push`, `pop`

Métodos de Arrays `map`, `filter`

Bucle `For`

Objetos

Combinando Datos y Lógica

Conceptos Básicos de Depuración

Comprensión de los Objetos en JavaScript

Creación de Objetos en JavaScript

Trabajando con Propiedades de Objetos Anidados

Acceso a las Propiedades de Objetos en JavaScript

Gestión de Propiedades de Objetos

Definición de Métodos de Objetos

Uso de Propiedades Dentro de Métodos

Clonación y Fusión de Objetos con el Operador Spread

Desestructuración de Objetos para un Código Más Limpio

Transformación de Arreglos con el Método map()

Filtrado de Arreglos con el Método filter()

Búsqueda de Elementos en un Arreglo con el Método find()

Ordenar Arreglos con el Método sort()

Introducción a JavaScript Asíncrono

Comprensión de los Callbacks en JavaScript

Gestión de Operaciones Asíncronas con Promesas

Uso de Async/Await para un Código Asíncrono Más Limpio

Obtención y Manejo de APIs en JavaScript

Integración de APIs en Aplicaciones JavaScript

Ready for React

Qué Es React y Por Qué Se Utiliza

Comprensión de los Componentes de React

Conceptos Básicos de JSX en React

Renderizado de Elementos en React

Desafío: Renderizar un Elemento en React

Pasar Datos con Props

Desafío: Crear Componentes Funcionales

Renderizado Condicional en React

Desafío: Implementar Renderizado Condicional en la Notificación de Chat

Desafío: Implementar Renderizado Condicional en Alerta Bancaria

Renderización de Listas de Datos en React

Desafío: Mostrar Colecciones de Datos

Gestión del Estado con useState

Handling User Events in React

Desafío: Alternar Visibilidad con Estado

Working with Forms in React

Opciones de Estilos en React

Uso de Estilos en Línea en React

Estilización de Componentes con CSS Externo

Desafío: Estiliza una Aplicación 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

¡Impulsa tus habilidades tecnológicas!

con hasta un 55% de descuento

Features:

*Tracks not included in Pro plan

500+ cursos mejor calificadosCopiloto de IA de vanguardia

Rutas de estudio personalizadas40+ proyectos prácticos del mundo real

Sin cancelación, antes de que finalice el plan seleccionado con descuento, acepto que Codefinity cobrará automáticamente $104 cada 3 meses hasta que cancele. Obtén más información sobre la política de cancelación y reembolso en Términos de Suscripción.

Recommended Courses and Projects

HTML Definitivo

Aprenda los conceptos esenciales de HTML (Lenguaje de Marcado de Hipertexto), la base del desarrollo web. Este curso introductorio cubre etiquetas, atributos, elementos y la estructuración de páginas web. Adquiera habilidades prácticas en la creación de encabezados, párrafos, listas, imágenes, enlaces, formularios y tablas. Explore buenas prácticas, optimización y accesibilidad web. Inicie su trayectoria en desarrollo web con HTML.

Introducción a JavaScript

Sumérgete en el mundo del lenguaje más popular para el desarrollo front-end: JavaScript. JavaScript es un lenguaje integrado en casi todos los navegadores y puede utilizarse para una amplia variedad de tareas. Aprende la funcionalidad básica y prepárate para los desafíos y técnicas de programación más avanzadas.

Introducción a React

Explora los fundamentos de la creación de interfaces de usuario con React. Enfócate en componentes, JSX, flujo de datos, estado y efectos secundarios utilizados en aplicaciones React cotidianas.

Fundamentos de CSS

Domina los conceptos esenciales de CSS, el lenguaje de estilos que transforma la apariencia y sensación de las páginas web. Explora conceptos clave como estilos de texto, colores, espaciado, el modelo de caja, Flexbox y efectos decorativos. Desarrolla las habilidades necesarias para crear páginas web visualmente atractivas y bien estructuradas.

Fundamentos de HTML

Domina los conceptos esenciales de HTML para crear contenido web bien estructurado y accesible. Aprende a estructurar documentos utilizando etiquetas, elementos y atributos. Trabaja con confianza con texto, listas, imágenes, audio y video para enriquecer las páginas web. Crea tablas para organizar datos y formularios para la entrada e interacción del usuario. Descubre el HTML semántico para mejorar la accesibilidad y construye estructuras completas y funcionales de sitios web desde cero.

Estructuras de Datos en JavaScript

Aprende a trabajar con datos en JavaScript dominando objetos y arreglos. Comprende cómo crear, acceder y gestionar propiedades y métodos de objetos de manera eficaz. Profundiza en técnicas avanzadas de manipulación de objetos, incluyendo iteración, clonación y desestructuración para un código más limpio. Construye una base sólida en el manejo de arreglos y aprende a gestionar, iterar y modificar elementos de arreglos de forma eficiente. Domina métodos avanzados de arreglos como map, filter, find y sort para transformar y manejar datos eficazmente en tus aplicaciones.

Introducción a TypeScript

Este curso está diseñado para principiantes absolutos que desean dominar los conceptos básicos del lenguaje de programación TypeScript. TypeScript es un lenguaje moderno y potente que amplía las capacidades de JavaScript, haciendo que el código sea más confiable y legible. Comenzaremos desde lo más básico, cubriendo variables, tipos de datos, operadores de comparación y sentencias condicionales. Luego, profundizaremos en el trabajo con arreglos y bucles. Al finalizar este curso, estará preparado para crear programas sencillos en TypeScript y continuar su aprendizaje hacia temas más avanzados.

Diseño CSS, Efectos y Sass

Mejore sus habilidades de estilizado dominando técnicas avanzadas de CSS para el diseño web moderno. Posicione y gestione elementos con precisión utilizando estrategias avanzadas de posicionamiento. Cree transiciones suaves y animaciones atractivas para mejorar la experiencia del usuario. Transforme y manipule elementos para lograr efectos visuales dinámicos. Desarrolle diseños responsivos que se adapten a diferentes dispositivos y optimice su flujo de trabajo con preprocesadores CSS como Sass.

Dominio de Next.js 14 para Construir Aplicaciones Web Modernas

Aprende a construir aplicaciones web modernas y de alto rendimiento utilizando Next.js. Configura proyectos con estructuras organizadas, estilos y enrutamiento para una navegación fluida. Obtén y muestra datos de manera eficiente mientras optimizas el renderizado y el rendimiento. Implementa funciones avanzadas como paginación, operaciones CRUD y búsqueda global para aplicaciones web dinámicas. Despliega tus proyectos de Next.js, conéctalos con bases de datos y añade autenticación para proteger los datos de los usuarios.

Ninja de JavaScript

¡Bienvenido al Curso de Ninja de JavaScript! Este curso interactivo y atractivo está diseñado para introducirte a los fundamentos de la programación en JavaScript a través de un juego divertido y educativo. Guiarás a un ninja a través de varios desafíos, utilizando JavaScript para controlar movimientos e interactuar con objetos como sushi. Comenzando con lo básico, aprenderás a navegar por el mapa, recoger y colocar sushi, y progresar gradualmente hacia conceptos de programación más complejos como funciones, bucles y declaraciones condicionales. Cada capítulo ofrece práctica práctica para reforzar tu aprendizaje, culminando en emocionantes desafíos que pondrán a prueba tus habilidades. Ya seas un principiante completo o busques afinar tus habilidades de codificación, este curso ofrece una experiencia de aprendizaje completa y agradable. ¡Únete a nosotros y conviértete en un ninja de la codificación!

Lógica e Interacción en JavaScript

Domina los conceptos esenciales de JavaScript, incluyendo clases, manipulación del DOM, manejo de eventos y programación asíncrona. Aprende a crear aplicaciones web dinámicas e interactivas gestionando interacciones de usuario, obteniendo y mostrando datos, y manejando operaciones asíncronas de manera eficiente. A través de una combinación de teoría, desafíos prácticos y ejemplos del mundo real, este curso te proporciona las habilidades prácticas necesarias para el desarrollo web moderno.

Gestión de Estado con Redux Toolkit en React

Descubre el poder de Redux Toolkit junto con React y potencia tus habilidades en la gestión de estado. Este curso presenta de manera integral Redux Toolkit, una potente biblioteca para la gestión de estado. Aprende a optimizar la configuración de Redux, simplificar la lógica de estado compleja y crear aplicaciones React eficientes y escalables.

Discover more Learning Tracks

pista

Desarrollo de Juegos con Unity

Principiante

Producción de Video con Adobe

Principiante

Herramientas de Diseño UI/UX

Principiante

Essential Office Skills

Principiante

Digital Marketing Essentials

Principiante

Complete Social Media Management

Principiante

Business AI Toolkit

Principiante

Desarrollo Web Sin Código

Principiante

DevOps Specialist

Principiante

Supervised Learning Foundations

Principiante

Python from Zero to Hero

Principiante

C Programming Fundamentals

Principiante

Por qué la gente elige 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

Entorno de codificación interactivo

Sumérgete en nuestro entorno interactivo: escribe y ejecuta tu código con retroalimentación en tiempo real y métricas de éxito—aprende haciendo en cada paso.

Soporte potenciado por IA

Aprovecha el asistente de IA integrado para explicar errores, sugerir soluciones o responder cualquier pregunta sobre tu código—para que te mantengas productivo y nunca te quedes atascado.

Check your progress

Concluye cada módulo con un cuestionario rápido que ofrece retroalimentación instantánea, rastrea tu progreso y asegura que hayas dominado los conceptos clave.

Promote your expertise

Obtén tu certificado reconocido por la industria al completar y compártelo en LinkedIn con un clic—deja que tu red vea lo que puedes hacer.

Confiado por empleados de empresas líderes
y estudiantes de universidades de élite

Acceso completo al catálogo

Una suscripción abre este curso y todo nuestro catálogo de proyectos y habilidades.

Features:

500+ cursos mejor calificadosCopiloto de IA de vanguardia

Rutas de estudio personalizadas40+ proyectos prácticos del mundo real

Prueba Codefinity con confianza – garantía de devolución de dinero de 30 días incluida

Para darte la bienvenida a Codefinity, estamos ofreciendo hasta 64% de descuento en nuestros cursos. Además, tenemos una garantía de devolución de dinero de 30 días, para que puedas probarnos sin riesgo.Esperamos sinceramente darte la bienvenida a nuestra plataforma y estamos comprometidos a hacer que tu experiencia de aprendizaje sea fácil, interactiva y divertida.

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

Accede instantáneamente a 500+ cursos

Aprendizaje ilimitado, acceso instantáneoObtén acceso completo a todos los cursos y rutas, incluyendo contenido en video, cuestionarios y materiales detallados—comienza a aprender en cualquier momento.

Certificados reconocidos por la industriaObtén certificados que validen tu experiencia y potencien tu carrera en tecnología, IA, datos, marketing y más allá.

Aprendizaje asistido por IAObtén pistas personalizadas, retroalimentación en tiempo real y explicaciones potenciadas por IA para acelerar tu progreso.

En constante expansión: Nuevos cursos y rutas profesionalesMantente a la vanguardia con cursos constantemente actualizados, hojas de ruta profesionales, desafíos y pruebas prácticas.

Desarrolla habilidades que importanDomina habilidades demandadas con cursos en IA, ciencia de datos, programación, marketing, automatización, desarrollo web y más.

Aprendizaje interactivo y fluidoParticipa en proyectos prácticos, ejercicios del mundo real y una experiencia de aprendizaje intuitiva — no se necesitan herramientas adicionales.

Lo que aprenderás

Desarrollo de Juegos con Unity

Producción de Video con Adobe

Herramientas de Diseño UI/UX

Essential Office Skills

Digital Marketing Essentials

Complete Social Media Management

Business AI Toolkit

Desarrollo Web Sin Código

DevOps Specialist

Supervised Learning Foundations

Python from Zero to Hero

C Programming Fundamentals

Por qué la gente elige Codefinity

Confiado por empleados de empresas líderes y estudiantes de universidades de élite

Acceso completo al catálogo

Prueba Codefinity con confianza – garantía de devolución de dinero de 30 días incluida

Accede instantáneamente a 500+ cursos

Confiado por empleados de empresas líderes
y estudiantes de universidades de élite