

Inseguro de dónde
empezar?
Track
Certificado
Fundamentos del Desarrollo Frontend
4.7+
★★★★★
★★★★★
821 reseñas
Beginner
Explore los pilares fundamentales de las habilidades de todo desarrollador web. Comience con HTML, donde aprenderá a estructurar el contenido web, crear una navegación intuitiva e incorporar elementos multimedia a la perfección. Mostrar más
HTML/CSS
JavaScript
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
- Build structured and accessible web pages using HTML to create a strong foundation
- Use CSS to style websites, control layout, and make pages visually appealing
- Learn JavaScript fundamentals to add interactivity, manipulate the DOM, and handle user events
- Work with JavaScript data structures, including arrays, objects, and their practical applications
- Explore advanced JavaScript topics like asynchronous programming, classes, and event-driven development
- 260 chapters
- 32 hours
- 309 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 / JavaScript Data Structures
Get a clear roadmap of what's to come, understand the prerequisites, and learn valuable tips to set you up for success as you delve into objects, arrays, and essential programming concepts.
Explore the core concepts of JavaScript objects. This section covers the fundamentals of object creation, property management, and method implementation.
- Understanding Objects in JavaScriptVista previa
- Creating Objects in JavaScriptVista previa
- Working with Nested Object PropertiesVista previa
- Challenge: Create and Structure an ObjectVista previa
- Accessing Object Properties in JavaScriptVista previa
- Challenge: Retrieve Object Property ValuesVista previa
- Managing Object PropertiesVista previa
- Challenge: Modify and Extend an ObjectVista previa
- Defining Object MethodsVista previa
- Using Properties within MethodsVista previa
- Challenge: Work with Object MethodsVista previa
- Fundamentals of JavaScript Objects Sum-UpVista previa
Dive into advanced techniques for working with JavaScript objects. This section delves into various strategies to efficiently manipulate and interact with objects.
- Iterating Over Object Properties with the for...in LoopVista previa
- Challenge: Explore Object Properties with IterationVista previa
- Using hasOwnProperty() to Check Object PropertiesVista previa
- Challenge: Object Property Iteration with hasOwnProperty()Vista previa
- Cloning and Merging Objects with the Spread OperatorVista previa
- Challenge: Combine Objects with the Spread OperatorVista previa
- Destructuring Objects for Cleaner CodeVista previa
- Challenge: Extract Data with Object DestructuringVista previa
- Advanced Object Manipulation Sum-UpVista previa
Embark on a journey into the JavaScript arrays. This section provides a strong foundation for creating arrays, managing elements, and executing basic array operations.
- Understanding JavaScript ArraysVista previa
- Challenge: Access Array ElementsVista previa
- Modifying Arrays and Accessing ElementsVista previa
- Challenge: Modify Array ElementsVista previa
- Iterating Over Arrays with the for LoopVista previa
- Challenge: Loop Through Arrays with forVista previa
- Using the for...of Loop for Array IterationVista previa
- Challenge: Efficient Array Iteration with for...ofVista previa
- Mastering JavaScript Arrays Sum-UpVista previa
Master the advanced array manipulation skills, covering various techniques and methods for handling arrays effectively in multiple scenarios.
- Transforming Arrays with the map() MethodVista previa
- Challenge: Modify Array Elements Using map()Vista previa
- Filtering Arrays with the filter() MethodVista previa
- Challenge: Select Specific Data Using filter()Vista previa
- Finding Elements in an Array with the find() MethodVista previa
- Challenge: Search for Items Using find()Vista previa
- Sorting Arrays with the sort() MethodVista previa
- Challenge: Sort and Extract Data with sort()Vista previa
- Advanced Array Methods and Transformations Sum-UpVista previa
- Course SummaryVista previa
Module 6 / Advanced JavaScript Mastery
Learn the fundamentals of JavaScript classes, from class declarations to defining methods that enhance functionality. Discover how to use parameter objects effectively, manage private properties, and control access with getters and setters. Master static properties and static methods and unlock the power of class inheritance using "extends" and "super()" to build scalable and reusable code.
- Getting StartedVista previa
- Understanding Class Declarations in JavaScriptVista previa
- Challenge: Create a JavaScript ClassVista previa
- Defining Methods in JavaScript ClassesVista previa
- Challenge: Add Methods to a ClassVista previa
- Using Parameter ObjectsVista previa
- Working with Private Properties in ClassesVista previa
- Challenge: Implement Private Properties in a ClassVista previa
- Managing Properties with Getters and SettersVista previa
- Challenge: Implement Getters and Setters in a ClassVista previa
- Exploring Static Properties in JavaScriptVista previa
- Using Static Methods in JavaScriptVista previa
- Challenge: Implement Static Properties and Methods in a ClassVista previa
- Understanding Inheritance with extends and super()Vista previa
- Challenge: Implement Class Inheritance with extends and super()Vista previa
Master DOM manipulation to create dynamic, interactive web applications. Navigate and modify the DOM's structure, dynamically update content, and implement best practices for security and performance. Differentiate between properties and attributes to optimize your code.
- What Is the Document Object Model (DOM)?Vista previa
- Querying and Selecting Elements in the DOMVista previa
- Challenge: Query and Select DOM ElementsVista previa
- Understanding the DOM Hierarchy and RelationshipsVista previa
- Challenge: Navigate the DOM HierarchyVista previa
- Exploring DOM Properties in JavaScriptVista previa
- Working with Element Attributes in the DOMVista previa
- Challenge: Manage Element Properties and AttributesVista previa
- Adding Elements to the DOM DynamicallyVista previa
- Removing Elements From the DOMVista previa
- Challenge: Add and Remove DOM ElementsVista previa
- Modifying Element Styles with JavaScriptVista previa
- Challenge: Apply Dynamic Styles to DOM ElementsVista previa
Unlock the interactivity of your web applications by mastering JavaScript events. Understand event propagation, control event behavior, and implement efficient event handling for user interactions. Optimize performance with advanced techniques like event delegation.
- Introduction to Events and Event ListenersVista previa
- Understanding the Event Object in JavaScriptVista previa
- Challenge: Implement Event ListenersVista previa
- Event Propagation and Delegation ExplainedVista previa
- Challenge: Handle Event Propagation and DelegationVista previa
- Working with Keyboard and Mouse EventsVista previa
- Managing and Removing Event ListenersVista previa
Dive into asynchronous JavaScript, including callbacks, Promises, and async/await. Learn how to fetch data from APIs, integrate third-party libraries, and handle multiple requests efficiently, building skills for creating data-driven applications.
- Introduction to Asynchronous JavaScriptVista previa
- Understanding Callbacks in JavaScriptVista previa
- Handling Asynchronous Operations with PromisesVista previa
- Using Async/Await for Cleaner Asynchronous CodeVista previa
- Fetching and Working with APIs in JavaScriptVista previa
- Integrating APIs in JavaScript ApplicationsVista previa
- Challenge: Fetch and Use API DataVista previa
- Integrating Third-Party Libraries in JavaScriptVista previa
- Challenge: Work with Third-Party LibrariesVista previa
- Handling Multiple Asynchronous RequestsVista previa
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
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
(2353)
pista
Python de Cero a Héroe
Principiante
4.7
(8332)
pista
SQL de Cero a Héroe
Principiante
4.7
(2589)
pista
C++ para Principiantes
Principiante
4.5
(483)
pista
Desarrollo de Juegos con Unity
Principiante
4.7
(72)
pista
Conviértete en un Desarrollador de React
Intermedio
4.7
(66)
pista
Fundamentos de Excel
Principiante
4.7
(301)
pista
Esenciales de Java
Principiante
4.7
(195)
pista
Python Más Allá del Intermedio
Principiante
4.6
(66)
pista
Desarrollo Web Full Stack
Principiante
4.7
(850)
pista
Análisis y Visualización de Datos con Python
Intermedio
4.7
(563)
pista
Fundamentos del Aprendizaje Automático
Intermedio
4.6
(124)
pista
Dominio de C++
Avanzado
4.8
(16)
pista
Java Web
Avanzado
4.7
(1158)
pista
Conviértete en un Ingeniero de QA
Principiante
4.7
(715)
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
(240)
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