What I was going to suggest is that, in I mean, so we don't lose the track of your messages and your details if you want to contact us, feel free to write the same messages in the Discord channel that we have for the workshop, or you can contact Arisa or me on Twitter that we are there. So if you want to chat later after the workshop, feel free to do that as the chat from the Zoom call will disappear after the call. But yeah, I mean, again, thank you for sharing all the details and in the case that you have any questions, feel free to ask that in the chat that Arisa or I we will be answering them.
Also, we're gonna make sure to have like quick posts like in after a couple of slides or after a few minutes doing the hands-on part. So don't worry about it, it's not going to be non-break, like non-stop three hour session. You will have couple of breaks to go get your coffees or have a quick break. So don't worry about that. And also we will make sure to take your questions if you have.
All right, if there is no more question, oh, will the recording link be shared? Yes, I believe so, Lara has shared with us an info that she's gonna upload the recording and it's gonna be shared with us. So don't worry about it.
Okay, so I would say like I will ask Facundo to take here this atomic design part. Then after that we're gonna have a quick five minutes Q&A if there will be some of the questions. So I will stop sharing my screen and Facundo you can start to share your screen. Sure, I think that there is someone, ah yeah, there we go. Amazing how you shared the information between you. No, because there was someone asking for the notion link but there we go, amazing. Cool, then I will take the lead now. Let me know if you see my screen. Yeah, I can see that. Amazing, cool. So let's talk a little bit about atomic design, probably if you have worked with design systems or if you were involved on designing or creating components for your organization or your projects, probably you are very familiar with this concept. The idea is to go through some short concepts related to the atomic design principle because we will work with some similar ideas, I would say during the workshop, the hands-on part of the workshop because Starblock works with a component approach that I think that Alisa will mention that better later.
But the idea is to get familiar with this theory with this methodology, atomic design principle is a methodology for creating design systems. The idea or the name comes from the, well, the previous table of elements, I mean, if you are familiar with chemistry, you can see here all the different elements that we can have in a periodic table. The idea is that we can create elements, HTML elements or group of HTML elements that we can reuse in different parts of our pages and in different pages of our website. So as it's called the atomic design principle, we will have the smallest part that we can have and we can reuse in different parts of our projects that is going to be called the atoms which are going to be HTML tags with a certain style.
So as you can see in this slide, we can have a label with a certain text, with a certain format, we can have an input and a button and each one of them will be what we are going to call an atom. These atoms, as you can see again, the periodic table of the elements, this cool image is trying to show you the different HTML tags that we can use on any web page. So you can identify the different atoms that we mentioned or that we are using. And this, I mean, if we group these atoms, if we pick this label, this button and this input that I mentioned before, what we can create is what we call the molecule.
A molecule is the smallest group of atoms. So as you can see here, we're using again, a label, an input and a button to create a small search box. So this is a piece of application or project that we can use on our websites or our web pages to actually add some functionality and use it to search content on our website. If we go to the same table, the same image, we will see that we can identify the different HTML elements or atoms that we included and the group of this HTML elements will be a molecule. So when we have more than one molecule or we want to wrap molecules to create a bigger group of elements, we can talk about organisms.
Organisms are group of molecules as you can see. In the example, we can have a navigation bar, for instance, where we display the logo of our website. We can use this search box that we created before and then we can have other links that are pointing to different pages of our project. If we talk about all these group of elements, or atoms, or molecules, we are talking about an organism. And this, I mean, this is a bigger group of different parts or different smaller groups of our web pages. If we group them, as you can see, we are creating different parts of our pages that we are going to reuse, again in the pages or in the different routes of our website.
Another example would be, for instance, a call-to-action block that we can have on our page with the bottom with the title, with the link to a different page. As you can see, the idea is that you can create these atoms or these small groups of atoms that we can reuse in different parts of your website. And you can keep this synchronicity between the style that you are using for your project. And you will follow the same guidelines for the different pages that you are going to create. We can have templates, too, which are groups of organisms using placeholders.
So what you can see here is the same navigation bar that we had before. We also have a header image or a call-to-action block, or we can have other organisms that we created and that we are maintaining on our project. And when we group all these organisms, what we can do is create a template, which will be, as you can see, the structure of a webpage, right? I mean, this template looks like a webpage without content, without the information. But this template is the structure that we are going to use to create the instances of our pages. We can have pages which are going to be these templates with real content. As you can see, we are replacing the call to actions with, or the images, or the content with actual, real information that we want to display to the users, to the visitors of our website.
So basically, these are the different elements, or the, or how to say, the key points of the atomic design principle. Why we should go for atomic design principle, or why we should follow this approach. As we mentioned before, we can create reusable blocks, reusable molecules, organisms, or atoms in the different parts of our pages and different pages of our website. We can manage, and organize these components in a system. We can create a design system to maintain the different elements that we are going to reuse in the different parts of our pages. What will bring to us, is scalability. Because if we have one centralized place where we are managing all the different elements that we can reuse in the different pages of our website, it will be easier to scale. And also it will be easier to maintain. If we want to apply a change to one of the elements that we are using in all our pages, we just need to go to one place and apply the change that we want there. And that will apply to all the places where we are using these elements.
We are sharing some sources with you. If you go to the slides, you can see a video. On the second link, there's a video that will explain you a little bit more in depth about the atomic design principle with a good explanation. The first link is the, I mean, the creator of the atomic design principle, a blog post that is explained with more details where the idea came from and how to achieve the idea of how to create design systems using the atomic design principle. And the last link is the book that this Brad Frost, the creator of the atomic design principle created in the case that you want to read the actual book.
So that was a quick introduction to the atomic design principle. An idea to have in mind when we work with the Starblocks, you will see that it would make sense because we are going to create reusable components, reusable nestable components that we can group into bigger components and we can reuse in different parts of our pages. Well, Storyblock is a headless content management system.