

Inseguro de dónde
empezar?
Track
Certificado
Web Developer from Zero to Hero
4.7+
★★★★★
★★★★★
832 reseñas
Beginner
Discover the power to create captivating websites by harnessing HTML, CSS, and JavaScript. Immerse yourself in building dynamic web applications enhanced with cutting-edge frameworks and libraries. Mostrar más
HTML/CSS
JavaScript
React
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity TeamsWhat you will learn
- Comprenda la función fundamental de las etiquetas y atributos en la creación de páginas web.
- Entienda la estructuración de documentos web al aprender sobre flujo de documentos y elementos del encabezado.
- Desarrolle la capacidad de insertar y gestionar imágenes, audio y vídeo, mejorando el manejo de medios web.
- Adquiera destreza en la creación y organización de formularios, dominando el uso de tipos de input y elementos de formulario.
- 241 chapters
- 28 hours
- 253 tasks
Trusted by employees of leading companies
Learning track content
Module 1 / HTML Definitivo
Explore el funcionamiento interno de la web. Aprenda cómo viajan los datos a través de las redes, descubra el papel de los protocolos y desentrañe los misterios de las direcciones IP y los nombres de dominio. Adquirir una comprensión de alto nivel de cómo los navegadores web y servidores se comunican para entregar contenido web.
Descubra el poder de las tags para estructurar contenidos, desde títulos y párrafos hasta listas y tablas. Aprende a mejorar los elementos con atributos.
- TagsVista previa
- AtributosVista previa
- Tags Emparejadas y SimplesVista previa
- Marcado de TextoVista previa
- Desafío 1: Marcado de TextoVista previa
- Desafío 2: Marcado de TextoVista previa
- Desafío 3: Marcado de TextoVista previa
- Marcado de Texto con Propósito EspecialVista previa
- Desafío: Marcado de Texto con Propósito EspecialVista previa
- ValidaciónVista previa
El núcleo de la estructura de los documentos HTML. Conozca los componentes de un documento HTML, incluyendo la declaración doctype, head y body. Entender el propósito de cada elemento y cómo contribuyen a la estructura general de una página web.
Hacer más atractiva una página web con la ayuda de medios como imágenes, audio y vídeo. Trabajar con datos tabulares estructurados en forma de tablas.
Explore la versatilidad de los formularios HTML. Aprenda a diseñar formularios intuitivos y fáciles de usar aprovechando conceptos y técnicas clave. Descubra cómo los formularios permiten la interacción del usuario y el envío de datos en los sitios web.
- Poder de los Formularios: Interactuar y ComprometerVista previa
- Base de Creación de FormulariosVista previa
- Label para el Elemento de InputVista previa
- Input AtributosVista previa
- Input TiposVista previa
- Desafío: Input y LabelVista previa
- Elemento TextareaVista previa
- Elemento SelectVista previa
- Elemento DatalistVista previa
- Elementos del Formulario de GrupoVista previa
Module 2 / CSS Fundamentals
Basic CSS concepts and rules to add styles to the web page.
- What is CSS?Vista previa
- Connecting HTML and CSSVista previa
- Selectors for Styling HTML ElementsVista previa
- Challenge: Add Your First StylesVista previa
- Challenge: Add The Styles using the Class NameVista previa
- User Action Pseudo-ClassesVista previa
- Challenge: User Action Pseudo-ClassesVista previa
- Text ColorsVista previa
- Effective Work with CSSVista previa
- Challenge: Variables in CSSVista previa
Set of CSS properties that are used to style the text content of HTML elements.
Concept of arranging elements according to the box model, which describes the layout and spacing of all elements.
- Box ModelVista previa
- Box SizingVista previa
- Adding Space to ElementsVista previa
- Challenge: Box-SizingVista previa
- Structural and Functional Pseudo-ClassesVista previa
- Challenge: Structural Pseudo-ClassesVista previa
- Element TypesVista previa
- Working with Block-Level ElementsVista previa
- Working with Inline ElementsVista previa
- Challenge: Predict the Page LayoutVista previa
Method of arranging the set of elements in rows and columns.
Create visually stunning and interactive web designs by using advanced CSS techniques for adding decorative elements.
Module 3 / Advanced CSS Techniques
Research what learners can expect from this advanced HTML and CSS styling course. What do you need to know before starting the course? What topics will be covered in it?
Position and manage elements on the web pages. Learn about the different positioning properties, discover how to use the stacking order to control the visibility of elements that overlap each other, and finally, handle content overflow.
- Understanding CSS PositioningVista previa
- Relative Positioning ExplainedVista previa
- Challenge: Apply Relative PositioningVista previa
- Absolute Positioning in CSSVista previa
- Challenge: Implement Absolute PositioningVista previa
- Fixed Positioning for Sticky UI ElementsVista previa
- Challenge: Work with Fixed PositioningVista previa
- Sticky Positioning for Dynamic LayoutsVista previa
- Challenge: Master Sticky PositioningVista previa
- Managing the Stacking Order of ElementsVista previa
- Challenge: Control Z-Index and Overlapping ElementVista previa
- Handling Content Overflow in CSSVista previa
Research the power of transitions and learn how to improve the user experience. Discover how to liven properties smoothly and gradually, creating seamless state transitions.
- Introduction to CSS TransitionsVista previa
- Choosing the Right Transition PropertiesVista previa
- Setting Transition Duration for EffectsVista previa
- Customizing Transitions with Timing FunctionsVista previa
- Adding Delay to CSS TransitionsVista previa
- Combining TransitionsVista previa
- Challenge: Add a Smooth Transition EffectVista previa
Learn about the animation property and how it can be used to create dynamic and engaging designs. Discover how to create complex animations using keyframes and how to control the animation.
Explore the transformation property, which allows modifying the appearance and position of elements on a webpage. Learn how to scale, rotate, skew, and translate elements in two and three dimensions. Combine multiple transformations to create more complex effects.
- Introduction to CSS TransformationsVista previa
- Scaling ElementsVista previa
- Rotating Elements in 2D and 3DVista previa
- Challenge: Apply Scaling & RotationVista previa
- Translating Elements for Dynamic EffectsVista previa
- Skewing Elements for Unique DesignsVista previa
- Using Perspective for Depth EffectsVista previa
- Challenge: Combine Translation and SkewingVista previa
The principles and techniques used in adaptive/responsive design aim to make websites and applications accessible and visually appealing across different devices, screen sizes, and orientations.
Learn about preprocessors in CSS and how they can help to write more efficient and maintainable code. Understand how to use preprocessors to simplify the workflow and generate cleaner CSS code.
- Introduction to CSS PreprocessorsVista previa
- Understanding Sass Syntax for Better CSSVista previa
- Using Sass Variables for Reusable StylesVista previa
- Performing Calculations with Sass Numeric OperatorsVista previa
- Nesting Styles for Cleaner CodeVista previa
- Extending Styles with the @extend DirectiveVista previa
- Organizing Sass Files for Scalable ProjectsVista previa
Module 4 / Introduction to JavaScript
Discover the fundamentals of JavaScript, including its purpose and syntax. Learn how to work with the console for output and use comments to organize and document your code. These foundational skills will prepare you for a deeper exploration of JavaScript's capabilities.
Explore the building blocks of JavaScript by distinguishing between literals and variables. Understand the core data types, including `null` and arrays, and learn how to manipulate them using array methods.
- Understanding Variables in JavaScriptVista previa
- Challenge: Define the VariableVista previa
- Using const for ConstantsVista previa
- Exploring JavaScript Data TypesVista previa
- Working with null in JavaScriptVista previa
- Introduction to ArraysVista previa
- Array Methods and ManipulationVista previa
- Challenge: Perform Array OperationsVista previa
Learn how to manipulate JavaScript's data types through essential operations. Master assignment, mathematical operations, incrementing and decrementing, comparisons, logical operations, and string concatenation.
- Understanding Assignment OperatorsVista previa
- Mathematical Operations in JavaScriptVista previa
- Assignment Operators in JavaScriptVista previa
- Increment and Decrement OperatorsVista previa
- Challenge: Variable Operations PracticeVista previa
- Comparison Operators in JavaScriptVista previa
- Logical Operators ExplainedVista previa
- Challenge: Compare Variables in JavaScriptVista previa
- Concatenating Strings in JavaScriptVista previa
- Challenge: Build Sentences with JavaScriptVista previa
Discover how to control the flow of your programs with conditional statements. Master `if`, `else`, and `else if` to instruct JavaScript on making decisions and executing code based on different conditions.
Streamline your code by mastering JavaScript's looping structures. Explore `while`, `do while`, and `for` loops, and learn how to control their behavior using `break` and `continue`. Unlock the power of loops to perform repetitive tasks efficiently.
- Understanding the while Loop in JavaScriptVista previa
- Using the do while Loop for IterationVista previa
- Challenge: Print Numbers from 5 to 9Vista previa
- Mastering the for Loop in JavaScriptVista previa
- Challenge: Console Tigers with LoopsVista previa
- Breaking Out of Loops with breakVista previa
- Skipping Iterations with continueVista previa
- Challenge: Stop and Skip in LoopsVista previa
Discover the power of functions in JavaScript. Learn how to define functions, work with arguments, and use the `return` statement to create reusable and efficient code. Mastering functions will enhance your ability to write clean and modular programs.
- What Are Functions in JavaScript?Vista previa
- Defining Functions in JavaScriptVista previa
- Challenge: Write a Function – My NameVista previa
- Using Function Arguments EffectivelyVista previa
- Returning Values from FunctionsVista previa
- Challenge: Create a Sum FunctionVista previa
- Course Summary & Next StepsVista previa
Module 5 / React Mastery
Gain an understanding of the core principles of React. You'll learn about JSX (JavaScript XML), building reusable UI components, and rendering elements. Additionally, you'll explore the importance of data collection and conditional rendering in React applications. By the end of this section, you'll have a solid foundation of React's essential concepts, setting you up for success in the more advanced topics covered in the following sections.
- What Is React and Why Use It?Vista previa
- Comparing SPAs and MPAs in Web DevelopmentVista previa
- How React Works with the Virtual DOMVista previa
- Introducing JSX for Writing HTML in JavaScriptVista previa
- Building Complex UI with JSXVista previa
- Rendering Elements in ReactVista previa
- Challenge: Render an Element in ReactVista previa
- Understanding React ComponentsVista previa
- Passing Data with Props in ReactVista previa
- Challenge: Create Functional ComponentsVista previa
- Conditional Rendering in ReactVista previa
- Challenge: Implement Conditional Rendering – Chat NotificationVista previa
- Challenge: Implement Conditional Rendering – Bank AlertVista previa
- Rendering Collections of Data in ReactVista previa
- Challenge: Display Data Collections in ReactVista previa
- React Fundamentals Wrap-UpVista previa
Explore the various methods of adding styles to the React applications. You will learn how to apply styles to individual components, use dynamic styles, and maintain a scalable and maintainable styling approach in your projects.
- Introduction to Styling in ReactVista previa
- Using Inline Styles in ReactVista previa
- Applying Inline Styles in PracticeVista previa
- Challenge: Use Inline Styles in a React ComponentVista previa
- Styling React Components with External CSSVista previa
- Applying External CSS in PracticeVista previa
- Challenge: Apply External CSS to a React AppVista previa
- Using CSS Modules for Scoped Styling in ReactVista previa
- Organizing File and Folder Structures for StylesVista previa
- Challenge: Use CSS Modules in ReactVista previa
- Styling Techniques in React Wrap-UpVista previa
Powerful features in modern React development. Hooks revolutionize how we write functional components, providing a concise and intuitive way to manage state and perform side effects. Conversely, Context allows us to share data through the component tree without prop drilling. Combining hooks and Context enables efficient state management and simplified data sharing in React applications.
- Introduction to React Hooks and ContextVista previa
- Managing State with the useState HookVista previa
- Challenge: Toggle Visibility with useStateVista previa
- Working with References Using the useRef HookVista previa
- Challenge: Build a Controlled Form ComponentVista previa
- Handling Side Effects with the useEffect HookVista previa
- Challenge: Fetch and Display Data with useEffectVista previa
- Optimizing Performance with the useMemo HookVista previa
- Challenge: Implement a Car List Filter with useMemoVista previa
- Sharing State Across Components with ContextVista previa
- Using Context in a Real-World ScenarioVista previa
- Challenge: Build a World of Astronomy App with ContextVista previa
- React Hooks and Context Wrap-UpVista previa
Step-by-step guide on how to start a real-world React project. From setting up your development environment to understanding project organization and critical tools, you'll gain the knowledge and confidence to embark on your React journey.
- Setting Up Your React Development EnvironmentVista previa
- Choosing a Code Editor for React DevelopmentVista previa
- Organizing the Project Folder StructureVista previa
- Working with the Terminal in React DevelopmentVista previa
- Starting and Running a React ProjectVista previa
- React Project Setup Wrap-UpVista previa
Module 6 / React Router Essentials
Learn the theoretical basics of concepts such as URL, domain, protocol, query parameters, and more. Understand the significance of routing in web applications and why we need the React Router library.
Discover how to create an entire React application from scratch, with the ability to display content that adapts based on the URL using React Router functionality.
- Overview of the Multi-Page WebsiteVista previa
- Installing React RouterVista previa
- Enabling Routing in a React AppVista previa
- Defining Routes for NavigationVista previa
- Recap: First Steps in React RouterVista previa
- Optimizing Imports with Lazy LoadingVista previa
- Implementing a Fallback ComponentVista previa
- Recap: Second Steps in React RouterVista previa
- Creating and Managing NavigationVista previa
- Exploring React Router's Complete LogicVista previa
- Recap of React Router FundamentalsVista previa
Explore using query strings for sharing and managing application state via URLs, work with different data types in query parameters, and leverage React Router for navigation and effects based on URL changes.
Requirements
- A computer with a browser - all browsers are supported.
- Your enthusiasm to enhance your tech skills.
- Everything else needed to start learning and practicing is already included in this course.
Over 200,000 5-star ratings and counting
Ruslan Kravchuk
Lo principal es aprender y no rendirse
El material es bueno, hay mucho que aprender, todo para ser mejor y lo principal es aprender lo que quieres....
Matteo Comune
Gracias a ellos estoy aprendiendo mucho…
Gracias a ellos estoy aprendiendo mucho más rápido porque te ayudan a entender todo desde cero. Es el mejor sitio web que ayuda a las personas sin conocimientos previos de IT...
Yuliana Cadavid
gran curso para principiantes
gran curso para principiantes, ponen a prueba tus conocimientos en cada lección...
Elpunzon
Estoy disfrutando de mi experiencia en Codefinity…
Estoy disfrutando de mi experiencia de aprendizaje de Python en Codefinity. La forma de aprendizaje autoinducido es genial porque puedo adaptarlo a mi horario...
Alexandru Alexandru
Es agradable aprender de codefinity
Es agradable aprender de codefinity. Es fácil y tiene buenos ejemplos de lo que aprendí aquí...
jacob Templet
Easy to follow along with and provides…
Fácil de seguir y proporciona desafío en mi vida cotidiana. El desafío me mantiene con ganas de aprender día tras día...
Elan
Codefinity es una herramienta de aprendizaje integral…
Codefinity es una herramienta de aprendizaje integral que te ayuda a desarrollar tus habilidades como ingeniero de software o científico de datos. Los ejercicios son divertidos y una buena...
Thibault
Primera vez aprendiendo a programar
Primera vez aprendiendo a programar y haciéndolo con éxito con Codefinity - Gracias...
Adrien Morel
Bien diseñado para principiantes totales
Bien diseñado para principiantes totales, el progreso incremental me da confianza....
_Gracy
simplemente está perfectamente bien explicado
¡Simplemente está perfectamente bien explicado! hasta ahora no he experimentado ninguna dificultad porque todo está tan bien organizado...
Ruslan Kravchuk
Lo principal es aprender y no rendirse
El material es bueno, hay mucho que aprender, todo para ser mejor y lo principal es aprender lo que quieres....
Matteo Comune
Gracias a ellos estoy aprendiendo mucho…
Gracias a ellos estoy aprendiendo mucho más rápido porque te ayudan a entender todo desde cero. Es el mejor sitio web que ayuda a las personas sin conocimientos previos de IT...
Yuliana Cadavid
gran curso para principiantes
gran curso para principiantes, ponen a prueba tus conocimientos en cada lección...
Elpunzon
Estoy disfrutando de mi experiencia en Codefinity…
Estoy disfrutando de mi experiencia de aprendizaje de Python en Codefinity. La forma de aprendizaje autoinducido es genial porque puedo adaptarlo a mi horario...
Alexandru Alexandru
Es agradable aprender de codefinity
Es agradable aprender de codefinity. Es fácil y tiene buenos ejemplos de lo que aprendí aquí...
jacob Templet
Easy to follow along with and provides…
Fácil de seguir y proporciona desafío en mi vida cotidiana. El desafío me mantiene con ganas de aprender día tras día...
Elan
Codefinity es una herramienta de aprendizaje integral…
Codefinity es una herramienta de aprendizaje integral que te ayuda a desarrollar tus habilidades como ingeniero de software o científico de datos. Los ejercicios son divertidos y una buena...
Thibault
Primera vez aprendiendo a programar
Primera vez aprendiendo a programar y haciéndolo con éxito con Codefinity - Gracias...
Adrien Morel
Bien diseñado para principiantes totales
Bien diseñado para principiantes totales, el progreso incremental me da confianza....
_Gracy
simplemente está perfectamente bien explicado
¡Simplemente está perfectamente bien explicado! hasta ahora no he experimentado ninguna dificultad porque todo está tan bien organizado...
Data Engineer
Certificado de Finalización
Muestra las habilidades que has adquirido recientemente. Te lo has ganado
Discover more
Learning tracks
Solo para Ultimate
7 Cursos
293 Tareas
Solo para Ultimate
6 Cursos
168 Tareas
Solo para Ultimate
4 Cursos
115 Tareas
Solo para Ultimate
6 Cursos
101 Tareas
Solo para Ultimate
4 Cursos
143 Tareas
Solo para Ultimate
5 Cursos
119 Tareas
Solo para Ultimate
3 Cursos
39 Tareas
Solo para Ultimate
7 Cursos
376 Tareas
Solo para Ultimate
2 Cursos
1 Proyecto
57 Tareas
Solo para Ultimate
7 Cursos
346 Tareas
Solo para Ultimate
6 Cursos
309 Tareas
Solo para Ultimate
5 Cursos
146 Tareas
Solo para Ultimate
5 Cursos
135 Tareas
Solo para Ultimate
3 Cursos
71 Tareas
Solo para Ultimate
6 Cursos
239 Tareas
Solo para Ultimate
5 Cursos
239 Tareas
Solo para Ultimate
4 Cursos
125 Tareas
Solo para Ultimate
3 Cursos
119 Tareas
Solo para Ultimate
3 Cursos
75 Tareas
Learning tracks
pista
Desarrollo Web con C#
Principiante
4.8
(2347)
pista
Python de Cero a Héroe
Principiante
4.7
(8314)
pista
SQL de Cero a Héroe
Principiante
4.7
(2583)
pista
C++ para Principiantes
Principiante
4.5
(475)
pista
Desarrollo de Juegos con Unity
Principiante
4.7
(70)
pista
Conviértete en un Desarrollador de React
Intermedio
4.7
(66)
pista
Fundamentos de Excel
Principiante
4.7
(293)
pista
Esenciales de Java
Principiante
4.7
(193)
pista
Python Más Allá del Intermedio
Principiante
4.6
(63)
pista
Desarrollo Web Full Stack
Principiante
4.7
(847)
pista
Fundamentos del Desarrollo Frontend
Principiante
4.7
(818)
pista
Análisis y Visualización de Datos con Python
Intermedio
4.7
(558)
pista
Fundamentos del Aprendizaje Automático
Intermedio
4.6
(123)
pista
Dominio de C++
Avanzado
4.8
(16)
pista
Java Web
Avanzado
4.7
(1153)
pista
Conviértete en un Ingeniero de QA
Principiante
4.7
(712)
pista
Producción de Video con Adobe
Principiante
5.0
(5)
pista
Herramientas de Diseño UI/UX
Principiante
5.0
(4)
pista
Essential Office Skills
Principiante
4.8
(235)
Become a Development expert
Interactive exercises
Learning videos
AI-assistant on all courses
Workspaces for designing your own projects
Ready to get started?
ProBest intro offer | UltimateA complete experience to kickstart your career | |
---|---|---|
85+ Top-Rated courses | ||
Completion certificates | ||
AI-Assistant in all courses | ||
20+ hands-on Real-world projects | ||
Personalized study tracks | ||
Unlimited workspaces | ||
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity Teams