<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Nicolás Vazquez</title>
    <description>The latest articles on DEV Community by Nicolás Vazquez (@nicvazquez).</description>
    <link>https://dev.to/nicvazquez</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F861480%2Feaa4ff9d-a295-40a3-a9b9-c7233135fafa.png</url>
      <title>DEV Community: Nicolás Vazquez</title>
      <link>https://dev.to/nicvazquez</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/nicvazquez"/>
    <language>en</language>
    <item>
      <title>How to get your first IT job: Focusing on modern skills</title>
      <dc:creator>Nicolás Vazquez</dc:creator>
      <pubDate>Wed, 22 Mar 2023 02:11:56 +0000</pubDate>
      <link>https://dev.to/nicvazquez/how-to-get-your-first-it-job-focusing-on-modern-skills-25oh</link>
      <guid>https://dev.to/nicvazquez/how-to-get-your-first-it-job-focusing-on-modern-skills-25oh</guid>
      <description>&lt;p&gt;The field of technology is rapidly changing and to get your first IT job, you need to focus on modern skills. Below are some tips to help you get your first IT job in an innovative and future-focused way.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Learn Emerging Skills:&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;To get your first IT job, you need to learn technologies such as artificial intelligence, machine learning, robotics, and cybersecurity. In today's fast-paced and rapidly evolving world, being able to learn new technologies quickly and efficiently is more important than ever. Learning these skills will give you a competitive advantage in the IT job market and help you stand out among other candidates.&lt;br&gt;
   There are many resources available to help you learn these emerging skills, including online courses, certification programs, and boot camps. Take advantage of these resources to gain the skills you need to succeed in the IT job market.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Work on Open-Source Projects:&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Working on open-source projects can be an excellent way to gain practical experience in the field of technology. Open-source projects are often collaborative, meaning you'll have the opportunity to work with other professionals in the industry and gain valuable experience working on real-world projects.&lt;br&gt;
   When looking for open-source projects to work on, look for projects that align with your interests and skills. This will help you stay engaged and motivated while working on the project. You can find open-source projects on websites like GitHub and GitLab.&lt;/p&gt;

&lt;p&gt;In addition to developing practical skills, working on open-source projects can also help you build your professional network. You'll have the opportunity to work with other professionals in the industry and make valuable connections.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Build a Personal Brand:&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In the IT job market, it's important to have a strong personal brand. This is how you present yourself to potential employers, and it can help you stand out in a crowded job market.&lt;br&gt;
   One of the best ways to build a personal brand in the IT industry is to create a personal website. Your website should showcase your skills and projects, and it should be designed in a professional and engaging way. You can also create online content, such as blogs or videos, to demonstrate your knowledge and skills in the field of technology.&lt;/p&gt;

&lt;p&gt;Make sure your online presence is professional and attractive to potential employers. Use social media platforms like LinkedIn to connect with other professionals in the industry and build your network.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Participate in Hackathons and Tech Events:&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Participating in hackathons and tech events can be an excellent way to meet other professionals in the industry and demonstrate your skills in real-time. These events are often fast-paced and challenging, but they can be a lot of fun and they provide an excellent opportunity to learn new skills and technologies.&lt;br&gt;
   When looking for hackathons and tech events to participate in, look for events that align with your interests and skills. These events can be a great way to learn new skills and technologies, and they can also help you build valuable professional relationships.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Be Creative in Your Job Search:&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Your job search in IT doesn't have to be limited to sending resumes and online applications. Be creative. For example, you can use online networking platforms to connect with other professionals in the industry or create a customized application that shows your skills and experience in the field of technology.&lt;br&gt;
   You can also attend job fairs or in-person networking events to meet potential employers and make valuable connections. These events provide an excellent opportunity to learn more about the IT job market and to meet other professionals in the industry.&lt;/p&gt;

&lt;p&gt;In conclusion, getting your first IT job can be a challenge, but by focusing on modern skills, working on open-source projects, building a personal brand, participating in hackathons and tech events, and being creative in your job search, you can succeed in the constantly evolving IT job market. Stay motivated, persevere, and don't be afraid to try new things to achieve your goals.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Semantic HTML</title>
      <dc:creator>Nicolás Vazquez</dc:creator>
      <pubDate>Wed, 22 Mar 2023 02:10:20 +0000</pubDate>
      <link>https://dev.to/nicvazquez/semantic-html-48kg</link>
      <guid>https://dev.to/nicvazquez/semantic-html-48kg</guid>
      <description>&lt;p&gt;Hey! Today I want to talk to you about &lt;strong&gt;Semantic HTML&lt;/strong&gt;, an important technique for web development that is rarely given the importance it deserves.&lt;/p&gt;

&lt;p&gt;Semantic HTML is a technique of writing HTML code that uses &lt;strong&gt;appropriate tags for each content&lt;/strong&gt;, giving it a clear and structured semantic meaning. Instead of using meaningless tags or giving the same meaning to different tags, you should use a specific tag for each piece of content.&lt;/p&gt;

&lt;p&gt;Some of the most common semantic HTML tags are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;header&amp;gt;&lt;/code&gt; Used to represent the &lt;strong&gt;header&lt;/strong&gt; of a web page or section of content.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;nav&amp;gt;&lt;/code&gt; Used to represent a &lt;strong&gt;navigation section&lt;/strong&gt; within a web page.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;main&amp;gt;&lt;/code&gt; It is used to represent the &lt;strong&gt;main content&lt;/strong&gt; of a web page.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; Used to &lt;strong&gt;group related content together&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;article&amp;gt;&lt;/code&gt; Used to represent an &lt;strong&gt;article or standalone piece of content&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;aside&amp;gt;&lt;/code&gt; Used to represent &lt;strong&gt;secondary content, such as a sidebar&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;footer&amp;gt;&lt;/code&gt; It is used to represent the &lt;strong&gt;footer&lt;/strong&gt; of a web page.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The use of semantic HTML is important for several reasons. First of all, it &lt;strong&gt;improves the accessibility&lt;/strong&gt; of the website for people with visual or hearing disabilities. This is because semantic tags provide additional information to screen readers, making the content easier to understand.&lt;/p&gt;

&lt;p&gt;Second, semantic HTML can also help &lt;strong&gt;improve search engine positioning&lt;/strong&gt;. Search engines can better understand the structure and content of the web page, which can result in better positioning in search results.&lt;/p&gt;

&lt;p&gt;Another benefit of semantic HTML is that it makes it easier to maintain and update the web page. &lt;strong&gt;A clear and well-defined structure makes it easier to understand and modify the HTML code&lt;/strong&gt;. Also, by using semantic tags, a precise meaning can be given to content, which helps prevent style and design issues.&lt;/p&gt;




&lt;p&gt;To conclude with the post, here is an example of how semantic HTML can be used in the structure of a web page:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;title&amp;gt;Semantic HTML Example&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
    &amp;lt;header&amp;gt;
        &amp;lt;h1&amp;gt;Website Title&amp;lt;/h1&amp;gt;
        &amp;lt;nav&amp;gt;
            &amp;lt;ul&amp;gt;
                &amp;lt;li&amp;gt;&amp;lt;a href="#"&amp;gt;Home&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;&amp;lt;a href="#"&amp;gt;About&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;&amp;lt;a href="#"&amp;gt;Contact&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
            &amp;lt;/ul&amp;gt;
        &amp;lt;/nav&amp;gt;
    &amp;lt;/header&amp;gt;

    &amp;lt;main&amp;gt;
        &amp;lt;section&amp;gt;
            &amp;lt;h2&amp;gt;Main section&amp;lt;/h2&amp;gt;
            &amp;lt;p&amp;gt;This is the main content of the web page.&amp;lt;/p&amp;gt;
            &amp;lt;article&amp;gt;
                &amp;lt;h3&amp;gt;Article 1&amp;lt;/h3&amp;gt;
                &amp;lt;p&amp;gt;This is the content of the first article.&amp;lt;/p&amp;gt;
            &amp;lt;/article&amp;gt;
            &amp;lt;article&amp;gt;
                &amp;lt;h3&amp;gt;Article 2&amp;lt;/h3&amp;gt;
                &amp;lt;p&amp;gt;This is the content of the second article.&amp;lt;/p&amp;gt;
            &amp;lt;/article&amp;gt;
        &amp;lt;/section&amp;gt;

        &amp;lt;aside&amp;gt;
            &amp;lt;h3&amp;gt;Sidebar&amp;lt;/h3&amp;gt;
            &amp;lt;p&amp;gt;This is the content of the sidebar.&amp;lt;/p&amp;gt;
        &amp;lt;/aside&amp;gt;
    &amp;lt;/main&amp;gt;

    &amp;lt;footer&amp;gt;
        &amp;lt;p&amp;gt;Copyright © 2023 Website Title&amp;lt;/p&amp;gt;
    &amp;lt;/footer&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In summary, the use of semantic HTML is a recommended practice to improve the &lt;strong&gt;accessibility&lt;/strong&gt;, the &lt;strong&gt;positioning&lt;/strong&gt; in search engines and the &lt;strong&gt;maintainability&lt;/strong&gt; of a web page. I hope this information is useful to you and helps you improve your web development skills.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>html</category>
    </item>
    <item>
      <title>Programming for IT recruiters and non-programmers 💻</title>
      <dc:creator>Nicolás Vazquez</dc:creator>
      <pubDate>Thu, 10 Nov 2022 15:44:38 +0000</pubDate>
      <link>https://dev.to/nicvazquez/programming-for-it-recruiters-and-non-programmers-36c7</link>
      <guid>https://dev.to/nicvazquez/programming-for-it-recruiters-and-non-programmers-36c7</guid>
      <description>&lt;p&gt;Are you an IT interviewer or recruiter and have you ever had a hard time understanding what a programmer was talking to you about? Or are you interested in understanding more about this field? 🤔&lt;/p&gt;

&lt;p&gt;Don't worry, in this post we are going to explain in simple words the most used concepts in the world of programming and computing.&lt;/p&gt;

&lt;h2&gt;
  
  
  👉 Frontend vs Backend
&lt;/h2&gt;

&lt;p&gt;First of all, these two sectors are based on the web. The main difference between Frontend and Backend is in the aspects they manage and their objective.&lt;/p&gt;

&lt;p&gt;A Frontend developer works to improve the user experience and interface of the website. In an application, everything visible, such as colors, buttons, links, and layout, among other things, was created by a frontend developer.&lt;/p&gt;

&lt;p&gt;Technologies like JavaScript, React, Vue, Svelte, Next.js, etc. are seen.&lt;/p&gt;

&lt;p&gt;A Backend developer is responsible for managing data storage and establishing communication with the server and databases. It is the part that the user cannot see.&lt;/p&gt;

&lt;p&gt;Its function is to access the information that is requested through the frontend, to later combine it and return it to the end user.&lt;br&gt;
You see languages like Node.js, Python, Java, .Net, etc.&lt;/p&gt;

&lt;h2&gt;
  
  
  👉 What is a programming language?
&lt;/h2&gt;

&lt;p&gt;A programming language, in simple words, is the way in which we programmers interact with computers and give them instructions. This allows us to communicate with machines through algorithms and instructions written in a syntax that the computer understands and interprets in machine language.&lt;/p&gt;

&lt;h2&gt;
  
  
  👉 JavaScript is not Java
&lt;/h2&gt;

&lt;p&gt;Something very common in people who are not dedicated to programming is to confuse JavaScript with Java due to its great popularity and similarity in name. To begin with, these two are different programming languages:&lt;/p&gt;

&lt;p&gt;JavaScript is weakly typed, which means that writing in this language is simpler and more permissive.&lt;/p&gt;

&lt;p&gt;Java is strongly typed as it has a more complex syntax or script.&lt;/p&gt;

&lt;p&gt;In addition, each one has different uses and purposes. These two languages are used for different reasons and purposes.&lt;/p&gt;

&lt;p&gt;JavaScript is mainly recommended for applications and web pages. It is dedicated to the development of so-called front-end applications, although today, due to its scope, we can also see it in back-end development with Node.js.&lt;/p&gt;

&lt;p&gt;Java is a versatile language used for back-ends, desktop apps, and Android apps, among others.&lt;/p&gt;

&lt;h2&gt;
  
  
  👉 Common terms in programming
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;API&lt;/strong&gt;: These are mechanisms that allow two software components to communicate with each other. They allow products and services to communicate with each other, no matter how they are implemented.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Bug&lt;/strong&gt;: In computing it refers to an error or defect in the software that causes a program to not work correctly. The origin of this term dates back to 1944, when Thomas Edison detected a fault in a computer and saw that this happened because there was a bug inside it, which was actually a moth.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Code&lt;/strong&gt;: It is the set of instructions that a developer orders to execute a computer. The structure of this can vary according to each programming language.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Algorithm&lt;/strong&gt;: It is a set of defined and ordered instructions to solve a problem. That is, it is a step-by-step procedure to achieve an end.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Refactoring&lt;/strong&gt;: Its objective is to improve an existing code, eliminating design and structure defects, achieving maintainability and extensibility of a system. It changes the design of the code, but never the behavior of the software.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Backup&lt;/strong&gt;: It is a backup or security copy of a set of software (files, documents, code, etc.) that is stored in a safe place, in order to be able to re-dispose of your information when necessary.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  👉 What is hardware and software?
&lt;/h2&gt;

&lt;p&gt;Devices such as computers or smartphones are made up of hardware and software.&lt;/p&gt;

&lt;p&gt;Hardware is the set of physical components of a device, such as screens, keyboards, etc.&lt;/p&gt;

&lt;p&gt;Software is the set of computer programs that make it possible to execute specific tasks on a computer. For example, operating systems, applications, web browsers, games or programs.&lt;/p&gt;

&lt;p&gt;In short, in a device the hardware is what you can see and touch and the software is what you can't.&lt;/p&gt;

&lt;h2&gt;
  
  
  👉 Programming areas
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Web development
&lt;/h3&gt;

&lt;p&gt;Web development is the process of creating and maintaining websites. Web developers are the ones who make sure that websites and web applications work properly and are efficient.&lt;/p&gt;

&lt;p&gt;As we saw earlier, web development can be divided into backend and frontend:&lt;/p&gt;

&lt;p&gt;In the backend we can see tools such as Node.js, Python, Java, among others.&lt;/p&gt;

&lt;p&gt;On the frontend there are tools like JavaScript, React, Vue, Svelte, Next.js, etc.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Mobile development
&lt;/h3&gt;

&lt;p&gt;Mobile development is the creation of applications for Android and iOS phones.&lt;/p&gt;

&lt;p&gt;On Android you can develop with languages like Java or Kotlin and on iOS with Swift.&lt;/p&gt;

&lt;p&gt;There is also React Native, Ionic, Xamarin or Flutter to develop cross-platform applications, which work on both Android and iOS.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Video game development
&lt;/h3&gt;

&lt;p&gt;In the creation of video games we have designers, storytelling, character modeling, etc. Among the most important technologies for developers are Unity 3D with C# and Unreal Engine with C++.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Desktop Application Development
&lt;/h3&gt;

&lt;p&gt;They are applications that can be installed on your computer, whether you have Windows, Linux or Mac OS, for example: Adobe Premier, Microsoft Teams, Discord. To develop these applications, languages such as Java, C#, Python, etc. are used.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Development of operating systems / Embedded
&lt;/h3&gt;

&lt;p&gt;The operating systems are Windows, Linux, Android or iOS. Languages such as Assembler or C are often used to develop them.&lt;/p&gt;

&lt;p&gt;Embedded systems are electronic programs that are designed to meet specific needs and almost always go directly on a chip. For example, the operations of a washing machine, a refrigerator, etc.&lt;/p&gt;

&lt;p&gt;They are mainly developed with Java or C. It is also related to topics such as Arduino, IoT, Raspberry, which can be programmed with languages such as Python and JavaScript.&lt;/p&gt;

&lt;h3&gt;
  
  
  6. Machine Learning
&lt;/h3&gt;

&lt;p&gt;Machine Learning is a discipline in the field of Artificial Intelligence that, through huge volumes of data, gives computers the ability to identify patterns and make predictions.&lt;/p&gt;

&lt;p&gt;The 2 most important languages in this area are Python and R.&lt;/p&gt;

&lt;p&gt;So far today's post came. We hope that it has been very helpful and that you have been able to understand these super interesting concepts. If you think something was missing, you can leave it in the comments and we will gladly add it to the post.&lt;/p&gt;

&lt;p&gt;See you next! 👋&lt;/p&gt;

</description>
      <category>programming</category>
      <category>webdev</category>
      <category>career</category>
      <category>api</category>
    </item>
    <item>
      <title>React, the need for better code</title>
      <dc:creator>Nicolás Vazquez</dc:creator>
      <pubDate>Fri, 21 Oct 2022 21:10:09 +0000</pubDate>
      <link>https://dev.to/nicvazquez/react-the-need-for-better-code-1762</link>
      <guid>https://dev.to/nicvazquez/react-the-need-for-better-code-1762</guid>
      <description>&lt;p&gt;Back in the days when web development was boiled down to 4 technologies: &lt;strong&gt;HTML&lt;/strong&gt;, &lt;strong&gt;CSS&lt;/strong&gt;, &lt;strong&gt;JavaScript&lt;/strong&gt;, and &lt;strong&gt;PHP&lt;/strong&gt;, it was probably sheer madness to dare to write JavaScript without &lt;strong&gt;jQuery&lt;/strong&gt;. This was a library that allowed to add an AJAX interaction layer between the web and the applications, controlling events, creating animations and different effects to enrich the user experience.&lt;/p&gt;

&lt;p&gt;As you can imagine, over the years technologies are becoming deprecated with the emergence of new needs and tools.&lt;/p&gt;

&lt;p&gt;In 2011, the developers of &lt;strong&gt;Facebook&lt;/strong&gt; began to face several problems when it came to maintaining the code. As the app grew and gained more functionality, the team needed to invest in employees to keep the app running smoothly. Over time, the application became increasingly difficult to scale and manage.&lt;/p&gt;

&lt;p&gt;There came a time when Facebook engineers couldn't keep up with the updates that came out. His code required an update as soon as possible to become more efficient.&lt;/p&gt;

&lt;p&gt;Thanks to this need, &lt;strong&gt;Jordan Walke&lt;/strong&gt; built a prototype that made processes more efficient. And so, in 2013, &lt;strong&gt;React.js&lt;/strong&gt; was officially born.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is react?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;It's one of the most popular JavaScript libraries, with almost 200,000 stars on GitHub.&lt;/li&gt;
&lt;li&gt;It's a library, not a framework.&lt;/li&gt;
&lt;li&gt;It's an open-source or open source project created by Facebook.&lt;/li&gt;
&lt;li&gt;It's used to create user interfaces (UI) on the front-end.&lt;/li&gt;
&lt;li&gt;It's the view of an MVC (Model View Controller) application&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One of the most important things about React is that you can create reusable and customizable HTML elements to build user interfaces quickly and efficiently.&lt;/p&gt;

&lt;p&gt;Thanks to React, the way data is handled is also streamlined, using states and props.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why use React?
&lt;/h2&gt;

&lt;p&gt;Thanks to what we read earlier, we already know that thanks to React we can create dynamic and scalable applications, with a better order and less code.&lt;/p&gt;

&lt;p&gt;But it never hurts to learn more benefits of this technology:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It facilitates the development of front-end applications.&lt;/li&gt;
&lt;li&gt;It offers greater performance, flexibility and code organization.&lt;/li&gt;
&lt;li&gt;Prevents the entire page from being rendered, dynamically generating the DOM.&lt;/li&gt;
&lt;li&gt;It provides greater fluidity in interfaces and interactivity, guaranteeing a better user experience.&lt;/li&gt;
&lt;li&gt;It allows the encapsulation of the code in components, making it more dynamic and reusable.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;At first, React may be a bit scary, but over time you will realize that it is easy to learn.&lt;/p&gt;

&lt;p&gt;My advice is don't marry a technology, always be open to new possibilities. You can research other alternatives to React, such as Vue or Svelte, and choose your favorite.&lt;/p&gt;

&lt;p&gt;Cheers! Thanks for getting here.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>react</category>
      <category>javascript</category>
      <category>programming</category>
    </item>
    <item>
      <title>How to center an element horizontally and vertically with CSS</title>
      <dc:creator>Nicolás Vazquez</dc:creator>
      <pubDate>Thu, 01 Sep 2022 19:13:28 +0000</pubDate>
      <link>https://dev.to/nicvazquez/how-to-center-an-element-horizontally-and-vertically-with-css-2m24</link>
      <guid>https://dev.to/nicvazquez/how-to-center-an-element-horizontally-and-vertically-with-css-2m24</guid>
      <description>&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.container&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;grid&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="py"&gt;place-items&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It was pretty easy, right? In just two lines of code you can center an element both vertically and horizontally.&lt;/p&gt;

&lt;p&gt;See you!&lt;/p&gt;

</description>
      <category>css</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>How to Create a Search Bar in React</title>
      <dc:creator>Nicolás Vazquez</dc:creator>
      <pubDate>Fri, 26 Aug 2022 21:21:00 +0000</pubDate>
      <link>https://dev.to/nicvazquez/how-to-create-a-search-bar-in-react-5h0g</link>
      <guid>https://dev.to/nicvazquez/how-to-create-a-search-bar-in-react-5h0g</guid>
      <description>&lt;p&gt;Liquid syntax error: 'raw' tag was never closed&lt;/p&gt;
</description>
      <category>react</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>How to Create a Pop-Up Modal in React</title>
      <dc:creator>Nicolás Vazquez</dc:creator>
      <pubDate>Tue, 23 Aug 2022 17:22:00 +0000</pubDate>
      <link>https://dev.to/nicvazquez/how-to-create-a-pop-up-modal-in-react-j3f</link>
      <guid>https://dev.to/nicvazquez/how-to-create-a-pop-up-modal-in-react-j3f</guid>
      <description>&lt;h2&gt;
  
  
  What is a modal?
&lt;/h2&gt;

&lt;p&gt;A modal is a box that appears on the page, blocking all functions to concentrate focus on a particular action. This is their differentiating feature, they ask the user to perform an action.&lt;br&gt;
To return to the main content, the user must engage with the modal by completing an action or by closing it.&lt;/p&gt;
&lt;h2&gt;
  
  
  Let's create a modal with React
&lt;/h2&gt;

&lt;p&gt;Code on GitHub: &lt;a href="https://github.com/nicvazquez/react-modal" rel="noopener noreferrer"&gt;https://github.com/nicvazquez/react-modal&lt;/a&gt;&lt;br&gt;
Demo: &lt;a href="https://react-modal-nicvazquez.vercel.app/" rel="noopener noreferrer"&gt;https://react-modal-nicvazquez.vercel.app/&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Step 1: Create App
&lt;/h3&gt;

&lt;p&gt;Let's create the React app with Vite using the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm create vite@latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After this, it will ask us to complete with some options:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;√ Project name: ... react-modal
√ Select a framework: » react
√ Select a variant: » react
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Excellent! Now run the following commands:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd react-modal
npm install
npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If everything went well, you should have the application created, with the dependencies installed and have the project running on a local server, which in my case is &lt;a href="http://127.0.0.1:5173/" rel="noopener noreferrer"&gt;http://127.0.0.1:5173/&lt;/a&gt;.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw49308jgkakd1b3faw8l.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw49308jgkakd1b3faw8l.png" alt="Vite running React app"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Step 2: Let's create the base of our application
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Open &lt;strong&gt;App.jsx&lt;/strong&gt; and create the button element.
Your code should look like this:
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./App.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"container"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Open Modal&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;Modify the &lt;strong&gt;App.css&lt;/strong&gt; file. The styles should look like this:
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.container&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;grid&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="py"&gt;place-items&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100vh&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;Now modify &lt;strong&gt;index.css&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nd"&gt;:root&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Inter&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Avenir&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Helvetica&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Arial&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;sans-serif&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="py"&gt;color-scheme&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;light&lt;/span&gt; &lt;span class="n"&gt;dark&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;rgba&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;255&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;255&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;255&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;0.87&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#242424&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;border-radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;8px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1px&lt;/span&gt; &lt;span class="nb"&gt;solid&lt;/span&gt; &lt;span class="nb"&gt;transparent&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0.6em&lt;/span&gt; &lt;span class="m"&gt;1.2em&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1em&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;font-weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;500&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;inherit&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#1a1a1a&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;cursor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;pointer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;transition&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;border-color&lt;/span&gt; &lt;span class="m"&gt;0.25s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;border-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#646cff&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="nd"&gt;:focus&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="nd"&gt;:focus-visible&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;outline&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;4px&lt;/span&gt; &lt;span class="nb"&gt;auto&lt;/span&gt; &lt;span class="n"&gt;-webkit-focus-ring-color&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;@media&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;prefers-color-scheme&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;light&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#f9f9f9&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;If we go to our local server, we should have the following:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa9ykf4icvubc58t9zy3a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa9ykf4icvubc58t9zy3a.png" alt="Local server image"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Step 3: Let's create the modal
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;In the &lt;code&gt;src&lt;/code&gt; folder, let's create the &lt;code&gt;components&lt;/code&gt; folder and inside it we need to create another folder called &lt;code&gt;Modal&lt;/code&gt;, which should contain the &lt;code&gt;Modal.jsx&lt;/code&gt; and &lt;code&gt;modal.module.css&lt;/code&gt; files.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The structure of our project should look something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;REACT-MODAL
└─── node_modules
└─── public    
│
└─── src
│   │
│   └─── assets
│   |       react.svg
│   └─── components \ Modal
│   |        Modal.jsx
│   |        modal.module.css
|   |   App.css
|   |   App.jsx
|   |   index.css
|   |   main.jsx
│   
|   .gitignore
|   index.html
|   package-lock.json
|   package.json
|   vite.config.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;To give structure to the modal, we must add the HTML to it in &lt;code&gt;Modal.jsx&lt;/code&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;styles&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./modal.module.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Modal&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;styles&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;modalBack&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;styles&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;modalContainer&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Modal&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, nisi. Dolorem est
                        esse iste perferendis.
                    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;styles&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;modal__closeBtn&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Close&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;To style the modal, we must have this code in &lt;code&gt;modal.module.css&lt;/code&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.modalBack&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;absolute&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100vh&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;grid&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="py"&gt;place-items&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;rgba&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;0.322&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.modalContainer&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;flex-direction&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;column&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;justify-content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;space-between&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;align-items&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex-start&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;30%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;max-width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;60%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;rgb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;39&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;43&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;114&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;3rem&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;border-radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;5px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Let's go to &lt;strong&gt;App.jsx&lt;/strong&gt; and import the Modal
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./App.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Modal&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./components/Modal/Modal&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"container"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Open Modal&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Modal&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Your modal should look like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh1br853cwejvx7mv2pcf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh1br853cwejvx7mv2pcf.png" alt="Modal in Local Server"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So far so good, but one thing is missing... show the modal when the user clicks on the button.&lt;br&gt;
Let's get to it!&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 4: Being able to open the modal
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Go to &lt;strong&gt;App.jsx&lt;/strong&gt; and import &lt;code&gt;useState&lt;/code&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Let's declare the useState with the default value &lt;code&gt;false&lt;/code&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;showModal&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setShowModal&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Let's add the onClick function and the conditional to display the modal:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setShowModal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Open Modal&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;showModal&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Modal&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Our &lt;strong&gt;App.jsx&lt;/strong&gt; should look like this:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./App.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Modal&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./components/Modal/Modal&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;showModal&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setShowModal&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"container"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setShowModal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Open Modal&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;showModal&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Modal&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now if we click the button, the modal should appear. We are doing well, but we still need to close the modal&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 5: Being able to close the modal
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;We must go to the &lt;strong&gt;Modal.jsx&lt;/strong&gt; file and pass a prop as a parameter to close the modal.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Modal&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;closeModal&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Put that prop as onClick event to the button of the modal:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;closeModal&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;styles&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;modal__closeBtn&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    Close Modal
&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;If we want also to close the modal when clicked outside of it, we can pass the prop to the parent div
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;closeModal&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;styles&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;modalBack&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Our &lt;code&gt;Modal.jsx&lt;/code&gt; should look like this:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;styles&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./modal.module.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Modal&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;closeModal&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;closeModal&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;styles&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;modalBack&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;styles&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;modalContainer&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Modal&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, nisi. Dolorem est
                        esse iste perferendis.
                    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;closeModal&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;styles&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;modal__closeBtn&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                    Close Modal
                &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Now we need to send the function as props from App.jsx for the onClick event to work
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;showModal&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Modal&lt;/span&gt; &lt;span class="na"&gt;closeModal&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setShowModal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Our &lt;code&gt;App.jsx&lt;/code&gt; should finally look like this:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./App.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Modal&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./components/Modal/Modal&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;showModal&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setShowModal&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"container"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setShowModal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Open Modal&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;

            &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;showModal&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Modal&lt;/span&gt; &lt;span class="na"&gt;closeModal&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setShowModal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Done! :-)
&lt;/h3&gt;

&lt;p&gt;That was it! I hope this post has been very helpful to you. Any questions or suggestions leave it in the comments.&lt;/p&gt;

&lt;p&gt;You can see the code on GitHub: &lt;a href="https://github.com/nicvazquez/react-modal" rel="noopener noreferrer"&gt;https://github.com/nicvazquez/react-modal&lt;/a&gt;&lt;br&gt;
Demo: &lt;a href="https://react-modal-nicvazquez.vercel.app/" rel="noopener noreferrer"&gt;https://react-modal-nicvazquez.vercel.app/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Internet history</title>
      <dc:creator>Nicolás Vazquez</dc:creator>
      <pubDate>Wed, 13 Jul 2022 13:03:00 +0000</pubDate>
      <link>https://dev.to/nicvazquez/historia-del-internet-10a9</link>
      <guid>https://dev.to/nicvazquez/historia-del-internet-10a9</guid>
      <description>&lt;p&gt;Something that has become commonplace in our daily lives is the &lt;strong&gt;use of the Internet&lt;/strong&gt;. Its main uses, frequented by users, cover the information routine, the use of social networks, entertainment, training, reviewing the media, etc.&lt;/p&gt;

&lt;p&gt;We can see the Internet as a &lt;strong&gt;tool that allows an unlimited number of people to communicate easily and freely&lt;/strong&gt;, without barriers. But… What is the Internet?&lt;/p&gt;

&lt;p&gt;First of all, &lt;strong&gt;Internet is basically a worldwide network of interconnected computers in the form of a spider web&lt;/strong&gt;. It is the union of all the networks and computers distributed throughout the world, defining itself as a global network in which all the networks come together.&lt;/p&gt;

&lt;p&gt;Once this is understood, we can immerse ourselves in its history.&lt;/p&gt;

&lt;h2&gt;
  
  
  Before the Internet
&lt;/h2&gt;

&lt;p&gt;The Internet revolutionized the field of communications in such a radical way that today it is the global means of daily communication in our lives. Today we can send information from one place in the world to another in just a few seconds, but this was not always the case.&lt;/p&gt;

&lt;p&gt;These are some customs that were very normal before the Internet:&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;1. The address book&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Next to the phone, there used to be a small notebook that kept contact &lt;strong&gt;numbers and addresses&lt;/strong&gt; (handwritten) of family, friends and acquaintances.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;2. Send postcards&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Before the existence of WhatsApp, email and social networks, there was no choice but to contact our loved ones through postal mail, which consisted of putting a letter in an envelope, sealing it and sending it by mail.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;3. Handwrite&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Keyboards used to be reserved for office workers and IT specialists, so everyone else had to use pen and paper to type.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;4. Phone booth&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Although telephone booths still exist today, their use is not compared to that of years ago. These were small structures that contained a telephone inside, located on public roads.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;5. Buy the newspaper&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;The newspaper is still used by many at breakfast or coffee time, but thanks to the digitization of communication, there is almost no such custom of going every day to buy your own newspaper.&lt;/p&gt;

&lt;h2&gt;
  
  
  Birth of the Internet: The Cold War
&lt;/h2&gt;

&lt;p&gt;To begin with the history of the Internet, we must go back to the year &lt;strong&gt;1947, the beginning of the Cold War&lt;/strong&gt;, a confrontation that began at the end of World War II. This conflict was between the Western and Eastern blocs, led by the United States and the Soviet Union respectively.&lt;/p&gt;

&lt;p&gt;In this war, two opposing models faced each other with the aim of implanting in a greater number of countries the system that each bloc considered “the good one”. It was called the &lt;strong&gt;Cold War&lt;/strong&gt; because the US and the Soviet Union never directly clashed militarily.&lt;/p&gt;

&lt;p&gt;At the end of the 1960s, in the midst of the war, the United States created an exclusively military tool so that, in the event of a nuclear threat or a Russian attack, state communications would be guaranteed and information could be accessed from anywhere in the country. This network was specifically created in the year &lt;strong&gt;1969&lt;/strong&gt; and was called &lt;strong&gt;ARPANET&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  ARPANET
&lt;/h2&gt;

&lt;p&gt;Starting in the 1960s, &lt;strong&gt;ARPA&lt;/strong&gt; emerged, the &lt;strong&gt;Advanced Research Projects Agency&lt;/strong&gt;, an initiative of the United States Department of Defense that had among its objectives the &lt;strong&gt;creation of a computer network capable of of communicating users on different computers&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;In &lt;strong&gt;1969 Michel Elie&lt;/strong&gt;, one of the pioneers of the Internet, enters &lt;strong&gt;UCLA (University of California at Los Angeles)&lt;/strong&gt; and joins ARPA with a research grant. At the end of that year, he &lt;strong&gt;manages to connect the computer at UCLA with another at SRI&lt;/strong&gt; (Stanford Research Institute).&lt;/p&gt;

&lt;p&gt;Shortly thereafter, &lt;strong&gt;there were four interconnected American universities&lt;/strong&gt;. This network was called &lt;strong&gt;ARPANET&lt;/strong&gt;, whose objective, as we mentioned before, was exclusively military and had to maintain communications in case of war in the face of fear and uncertainty.&lt;/p&gt;

&lt;p&gt;Two years later, there were already 40 computers connected. The network grew so much that its communication system became obsolete.&lt;/p&gt;

&lt;p&gt;In the year &lt;strong&gt;1970&lt;/strong&gt;, the American engineer &lt;strong&gt;Ray Tomlinson&lt;/strong&gt; was entrusted with the task of modifying this means used by the military to send communications, since, according to him, &lt;strong&gt;"there was no really good way of leaving messages to people”&lt;/strong&gt;. Without knowing it, Ray invented one of the most popular forms of communication today, what we know as &lt;strong&gt;email&lt;/strong&gt;. He not only accomplished his task, but also invented a new symbol, &lt;strong&gt;the at sign (@)&lt;/strong&gt;, the use of which remains to this day.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ARPANET continued to expand&lt;/strong&gt;, allowing anyone with academic or research purposes to access it. Scientists began to use and develop it so that opinions can be shared and collaborative work can be established.&lt;/p&gt;

&lt;p&gt;It was not until &lt;strong&gt;1983&lt;/strong&gt; that the ARPANET, in order to allow computers to communicate on a network, &lt;strong&gt;adopted the TCP/IP protocol, resulting in the definition of the Internet (International Network of Computers).&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  ARPANET to the Internet
&lt;/h2&gt;

&lt;p&gt;The number of users connected to the network grew significantly and the Internet began to internationalize. The use of the network was limited to the exchange of emails and to serve as a documentary collection in which to store global information. However, &lt;strong&gt;locating and identifying information is still a complex task&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The creation of the protocol &lt;strong&gt;TCP/IP&lt;/strong&gt; &lt;strong&gt;(Transmission Control Protocol / Internet Protocol)&lt;/strong&gt;, which is the heart of the Internet, despite allowing communication between different computers that are miles away, was not enough. The problem with this is that the computers communicated using IP, which is a unique address that identifies a device on the Internet, and this was a number which was impractical to memorize, for example &lt;strong&gt;192.0.2.44&lt;/strong&gt;. Thus, &lt;strong&gt;Paul Mockapetris&lt;/strong&gt; would be responsible for creating the &lt;strong&gt;DNS (Domain Name System)&lt;/strong&gt; protocol, which allows you to assign a name to an IP address, such as &lt;a href="http://www.google.com"&gt;www.google.com&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Imagine when you use GPS. If you need to go to a place, you write the address and not the coordinates. Just as remembering the name of a street is much easier than its GPS coordinates, the same thing happens with a domain. It is much easier to type the domain name in the browser than its IP address&lt;/p&gt;

&lt;p&gt;The only thing missing now was a person with enough intelligence and creativity to take all of this to the next level.&lt;/p&gt;

&lt;p&gt;In &lt;strong&gt;1989&lt;/strong&gt; a man named &lt;strong&gt;Tim Berners-Lee&lt;/strong&gt; appeared, who brought with him &lt;strong&gt;the representation of how we visualize and access information through the Internet&lt;/strong&gt;. In short, the &lt;strong&gt;websites&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Tim Berners-Lee, today known as &lt;strong&gt;the father of the web&lt;/strong&gt;, wrote a proposal for what would become the &lt;strong&gt;World Wide Web&lt;/strong&gt;. He presented software based on protocols that allowed information to be viewed from any node on the network through hypertext known as &lt;strong&gt;HTML (HyperText Markup Language)&lt;/strong&gt;. Hypertext markup language allowed embedding objects, images, and videos. All a great advance. Together with it, other specifications were developed, such as the &lt;strong&gt;URL&lt;/strong&gt; or the &lt;strong&gt;HTTP (HyperText Transfer Protocol)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The WWW &lt;strong&gt;grew rapidly&lt;/strong&gt;: in &lt;strong&gt;1993&lt;/strong&gt; there were only 100 World Wide Web Sites and by 1997 there were over 200,000. Since then it continues to grow to this day.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Web 1.0&lt;/strong&gt; was the first state of the World Wide Web, which dominated until &lt;strong&gt;1999&lt;/strong&gt;. It was the first phase that appeared in the 90s, in which the Internet was just a means to access information. These were static pages so that the user could navigate in search of data, but without the possibility of interacting. This was about to change with the arrival of the next website.&lt;/p&gt;

&lt;h2&gt;
  
  
  Social Networks: Web 2.0
&lt;/h2&gt;

&lt;p&gt;With the arrival of the new century, the Internet stopped being something static to allow the user to interact with the content, thus being called &lt;strong&gt;Web 2.0&lt;/strong&gt; or also known as &lt;strong&gt;“social web”&lt;/strong&gt;. At this time, information could not only be accessed and consulted, but also created. Users were allowed to interact and collaborate with each other, as content creators.&lt;/p&gt;

&lt;p&gt;The social network began to be a collaborative work platform, ceasing to be a simple container or source of information.&lt;/p&gt;

&lt;p&gt;The distinguishing feature of this new stage of the web is the collaborative participation of users. MySpace was one of the next social networks to appear on the scene in 2003, allowing its users to access all kinds of publishing and communication services, offering image, video and blog hosting.&lt;/p&gt;

&lt;p&gt;In the heat of this revolution, a group of social platforms were developed, which are still standing today, such as &lt;strong&gt;Facebook, Twitter or YouTube&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;In &lt;strong&gt;September 2010&lt;/strong&gt; the Internet already had 1,971 million users, that is, &lt;strong&gt;28.8% of the world's population&lt;/strong&gt;. Ten years later, &lt;strong&gt;the number of users worldwide reached 4.54 billion&lt;/strong&gt; (approximately &lt;strong&gt;60% of the world's population)&lt;/strong&gt;, of which 3,800 are active users on social networks. This is indicated by the &lt;strong&gt;We Are Social 2020 report&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Welcome to Web 3.0
&lt;/h2&gt;

&lt;p&gt;The &lt;strong&gt;web 3.0&lt;/strong&gt; is the most current type of web, whose main characteristic is democratization. It is the next generation of internet technology that relies heavily on &lt;strong&gt;machine learning&lt;/strong&gt;, &lt;strong&gt;artificial intelligence (AI)&lt;/strong&gt; and &lt;strong&gt;blockchain&lt;/strong&gt;. Its goal is to &lt;strong&gt;give users more control over their data online&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The websites in web 3.0 are built through a decentralized blockchain where there is no centralized ownership of content or platforms.&lt;/p&gt;

&lt;p&gt;Web3 promises a substantial change in the future of the Internet, with a strong emphasis on consumer privacy.&lt;/p&gt;

&lt;p&gt;This decentralized network that we are talking about is peer-to-peer (P2P) technology, which allows processing power to be distributed over hundreds of thousands of servers, where everyone owns the network in part. As we can see, there is a big difference with the centralized network, such as the servers of Amazon and Google, where they have complete control of the flow of information and, in addition, they are the ones in charge of determining its use.&lt;/p&gt;

&lt;p&gt;Web 3.0 is based on technologies such as &lt;strong&gt;blockchain&lt;/strong&gt;, something that will allow the Internet to be decentralized and give users greater power. In this way, instead of entrusting our data to large companies and depending heavily on them, a simple user will be able to create content, tools and make a more decentralized use of the Internet.&lt;/p&gt;

&lt;p&gt;The most important point is that it will eliminate the centralization of data in third parties. The users themselves are going to be able to create content or establish communications without that information first passing through a third party that can control it.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Conclusion&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The Internet, despite having its pros and cons, is the most widely used tool today for commerce, socializing, research, entertainment, education and more.&lt;/p&gt;

&lt;p&gt;Its evolution was a long journey full of changes and it will continue to expand into new iterations. Undoubtedly our way of communicating on a day-to-day basis will continue to change and hopefully it will be for the better.&lt;/p&gt;

&lt;p&gt;Thanks for getting here. We read in another post 😊&lt;/p&gt;

</description>
      <category>internet</category>
      <category>history</category>
      <category>web3</category>
    </item>
    <item>
      <title>How to start programming?</title>
      <dc:creator>Nicolás Vazquez</dc:creator>
      <pubDate>Tue, 12 Jul 2022 21:18:00 +0000</pubDate>
      <link>https://dev.to/nicvazquez/como-empezar-a-programar-12j2</link>
      <guid>https://dev.to/nicvazquez/como-empezar-a-programar-12j2</guid>
      <description>&lt;p&gt;What would you do if I told you that we all program in our day to day? That's right, since programming is giving a series of instructions to a machine so that it performs one or more tasks in an automated way. For example, when we program the washing machine, the microwave, an alarm, etc.&lt;/p&gt;

&lt;p&gt;In simpler words, programming is a kind of art of translating a person's wishes into the language of the machine.&lt;/p&gt;

&lt;p&gt;If you decided to use programming to accomplish a task, you will need to build an &lt;strong&gt;algorithm&lt;/strong&gt; for the solution. This means that it is necessary to describe the sequence of steps to solve that task. We can take this example to something everyday, like doing laundry:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Put the dirty clothes inside the washing machine off&lt;/li&gt;
&lt;li&gt; Add proportional detergent to the clothes&lt;/li&gt;
&lt;li&gt; Turn on the washing machine, choose the type of wash and select the water depending on the amount of laundry&lt;/li&gt;
&lt;li&gt; Start the washing process and wait for it to finish&lt;/li&gt;
&lt;li&gt; Hang out the washing&lt;/li&gt;
&lt;li&gt; Once the clothes are dry, fold them and store them&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;There are several &lt;strong&gt;ways to describe an algorithm&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Graphic (schemes or flow charts)&lt;/li&gt;
&lt;li&gt;verbal&lt;/li&gt;
&lt;li&gt;Pseudocode&lt;/li&gt;
&lt;li&gt;Program code&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once you understand what programming is, it's time to &lt;strong&gt;choose your path&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;A very common question that everyone asks when they want to start programming is: &lt;strong&gt;“Where do I start?”&lt;/strong&gt;. To answer that, it's important to be clear &lt;strong&gt;what you want to develop&lt;/strong&gt;. There are various branches of programming that you can choose to specialize in. They all have logical and algorithmic thinking in common, although each specialization is a different niche.&lt;/p&gt;

&lt;p&gt;Each area has its respective tools, methodologies and programming languages.&lt;/p&gt;

&lt;h4&gt;
  
  
  •    &lt;strong&gt;Web development&lt;/strong&gt;:
&lt;/h4&gt;

&lt;p&gt;It is the creation of websites for the Internet. To achieve this, server-side and client-side technologies are used that involve database processes and the use of a browser to perform certain tasks or display information.&lt;br&gt;
The languages &lt;strong&gt;HTML&lt;/strong&gt;, &lt;strong&gt;CSS&lt;/strong&gt; and &lt;strong&gt;JavaScript&lt;/strong&gt; are mainly used.&lt;/p&gt;

&lt;h4&gt;
  
  
  • &lt;strong&gt;Mobile Development&lt;/strong&gt;:
&lt;/h4&gt;

&lt;p&gt;It is the development of applications for cell phones.&lt;br&gt;
For Android you need to learn &lt;strong&gt;Java&lt;/strong&gt; or &lt;strong&gt;Kotlin&lt;/strong&gt; and for IOS you need to learn &lt;strong&gt;Swift&lt;/strong&gt;. For both operating systems you can use &lt;strong&gt;React Native&lt;/strong&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  • &lt;strong&gt;Machine Learning Programming&lt;/strong&gt;:
&lt;/h4&gt;

&lt;p&gt;Machine Learning is a branch of artificial intelligence (AI) that deals with machine learning from the supply of large volumes of data.&lt;br&gt;
The main programming languages in this branch are &lt;strong&gt;Python&lt;/strong&gt; and &lt;strong&gt;R&lt;/strong&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  •    Video games development:
&lt;/h4&gt;

&lt;p&gt;It is the process of creating a video game, from the generation of ideas for the new game to the final version.&lt;br&gt;
The most widely used development engine today is &lt;strong&gt;Unity 3D&lt;/strong&gt;, which is used with the programming language &lt;strong&gt;C#&lt;/strong&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  • Embedded Programming:
&lt;/h4&gt;

&lt;p&gt;These are simple programs that are incorporated into an electronic board or chip, hence their name "embedded". They are usually found installed in household appliances.&lt;br&gt;
The most used languages are &lt;strong&gt;C&lt;/strong&gt; and &lt;strong&gt;Java&lt;/strong&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  • Desktop Development:
&lt;/h4&gt;

&lt;p&gt;It is the development of desktop applications, whether for Windows, MacOS or Linux.&lt;br&gt;
The most used programming languages for this purpose are &lt;strong&gt;Java&lt;/strong&gt;, &lt;strong&gt;C#&lt;/strong&gt; and &lt;strong&gt;Python&lt;/strong&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  • Programming of Operating Systems:
&lt;/h4&gt;

&lt;p&gt;It is the development and/or maintenance of operating systems, such as some of those mentioned above: Windows, Linux, IOS, Android, etc.&lt;br&gt;
The most used languages in this area are called "low level", examples of which are: &lt;strong&gt;Assembler&lt;/strong&gt; and &lt;strong&gt;C&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;All programming branches have their importance and in each of them it is required to be updated with the technologies. Undoubtedly, having some knowledge of each specialty will help you make a better decision, therefore, I invite you to read even more and choose where to start your career.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt;: Once you have decided on the branch in which to specialize, it is not necessary to continue with it for the rest of your life. You are always in time to change for something that you like and where you feel more comfortable or comfortable.&lt;/p&gt;

&lt;h3&gt;
  
  
  I have already chosen my career, where do I start?
&lt;/h3&gt;

&lt;p&gt;The first thing is to investigate what are the current technologies that are used today for this branch. Once you know that, the ideal is to start studying.&lt;br&gt;
There are many options to learn programming:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Online courses&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Documentation on the internet&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Bootcamps&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It is not necessary to pay for a course, since in Google there is a lot of very good and free documentation. There are also many free courses on YouTube, which are sometimes better than some paid ones. In fact, before paying for something that you don't know if you're going to like, I recommend you start with the free content first.&lt;/p&gt;

&lt;p&gt;Having a &lt;strong&gt;university degree&lt;/strong&gt; is not mandatory in the field of programming, but it can help you in your process. There are careers like &lt;strong&gt;Systems Engineering&lt;/strong&gt; and &lt;strong&gt;Computer Science&lt;/strong&gt;. These are useful to improve your mathematics, programming logic, meet people in this field, work in a team, etc. Unfortunately, in universities they do not usually teach the most demanded technologies today, therefore, I recommend you complement by also studying on your own.&lt;/p&gt;

&lt;p&gt;A piece of advice that will be very helpful to you is: &lt;strong&gt;do not keep only what you learned in a course&lt;/strong&gt;. It is important to carry out projects on your own to test what you have learned, in this way you will also improve your ability to solve problems.&lt;br&gt;
&lt;strong&gt;Practice a lot&lt;/strong&gt; and never lose sight of your ultimate goal.&lt;/p&gt;

&lt;p&gt;Once you feel ready to work, upload projects to your GitHub, build your CV, create a LinkedIn and start looking for work.&lt;/p&gt;

&lt;p&gt;Don't forget to enjoy the process of learning 😊. At the end of the day, it doesn't really matter which technology you start programming with.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>beginners</category>
      <category>codenewbie</category>
    </item>
  </channel>
</rss>
