Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.
Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.
For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Data Science and Machine Learning - 16 wks
Full-Stack Software Developer - 16w
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions, and more.
Guides on different topics related to the technologies that we teach in our courses
Nobody likes applications that are based on the console... Can you imagine using Uber from the command line?
Thankfully, we have browsers! They let us render our application in a visual interface that we call a website.
As you already know, the responsibility of the browser is to transform HTML/CSS code into visual elements. Those elements are mapped into a hierarchy that is stored in RAM memory, and it’s called The DOM.
<script> tag, like this:
There are several ways to manipulate the DOM, but the most simple one is
document.write(). Every time you create a
document.write() you will be writing onto the HTML whatever string you decide to pass as a parameter to the write function.
It does not matter where you write the code. The only thing that matters is that it is wrapped inside a
<script> tag. For example:
Just like we did with CSS, we can select any element in the document. There are 4 methods that allow us to search for whatever we want:
Returns an instance of the first element found that fits the CSS selector that you specified.
Returns an instance of the element with the
id="elementId" in the HTML document.
Returns an array of all elements with the
class="exampleClass" in their HTML tag property.
Returns an array with all the instances representing each paragraph element in the HTML document.
Returns an array with all the elements that have
name="name_value" in the name property of their HTML tag in the HTML document.
It is very common to need to change an element’s child. For example:
<li>children of a specific
<ul>to make their background red.
<tr>row of a
The best way to retrieve the child elements of any DOM element is by using its childNodes properties, like this:
This returns an array with all the element’s children nodes.
As you already know, each element in the HTML document can have some sort of HTML content. It does not matter if it is a
<a> or any other HTML element; it can have its own innerHTML combined with more HTML content.
☝️ You can find another 2 properties on the internet:
textContent, but they are not really universally used and are more limited in functionality.
There are 2 functions we can use for that:
Let's say that you have selected a
<div> with the
id="myFirstDiv" and you want to add a new
<h1> inside of that
You can use the appendChild function like this:
Now, let's say that we have a
<ul> with 2 elements, but we want to insert a new
<li> at the beginning of that list.
We can use the function
insertBefore for that case – like this:
removeChild() function is great for removing an element from the DOM and, consequentially, from the HTML document as well. You will have to specify who is the parent of the element that you are trying to delete.
For example, if we want to remove all the elements from a
To change any attribute of any object in the DOM, we need to use the
.attribute property just like this:
You can also change any CSS rule or property applied to the HTML elements by using the
.style attribute, like this:
For more information about accessing the DOM, see: https://developer.mozilla.org/en-US/docs/Web/API/Document