Forem: OLAIDE

A Beginners Guide To Mastering HTML Semantic Tags

OLAIDE — Fri, 11 Aug 2023 17:11:40 +0000

Introduction

In the early days of web development, developers began by utilising a common "non-semantic" tag like <div>. They would frequently assign the div a class or id attribute to define their function. For example, if they wanted to create a section on a page, this was frequently written as div class="section">.

As a modern-day web developer, the constant use of the div tag typically makes your code seem polluted, making the code messy and challenging to debug or maintain. The use of semantic HTML tags improves the structure and usability of your website and makes your code readable and easy to comprehend.

In this article, we will discuss how we can make our website stand out with Semantic HTML tags.

Let us get started!

What are Semantic HTML Tags?

Semantic HTML is the syntax that makes HTML more understandable by properly describing the various sections and structures of your web pages. It improves the informativeness and adaptability of online pages, helping browsers and search engines to better comprehend content.

Semantic HTML tags aid in the structure and organisation of your code, making it more explicit and easy to read.

Before the advent of semantic HTML, developers used divs to structure things. But as of today, semantic HTML tags make sense to search engines, users, developers, and those with impairments.

What are Divs?

In HTML, the div tag is used to create sections for content such as text, graphics, headers, footers, and navigation bars.
The div tag has an opening <div> and closing </div> tag and the closing tag is required. The div element is the most useful in web development because it allows us to divide out the material on a web page and create specific sections for different types of information or functions.

<div> Hello there </div>

Why Are Sematic HTML Important?

Below is a list of popular semantic HTML tags you might want to try in your next project, stating how each of them is important to your website.

<Header>

Since it provides details about the title and heading of the Project relevant material, the HTML "header" element is used to
establish the header for a page or section.

It typically contains the site's logo, navigation, and page title. It is the section at the top of a website.

Note that, you can change the header to meet your requirements.

Below is a syntax

<header>

    <nav>
       <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#games">Games</a></li>
            <li><a href="#tournament">Tournament</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
      </nav>

     <h1>This is my navigation part of my current website</h1>
      </header>

<nav>

This element denotes a part of your HTML code that provides navigation links, either within the website, you are working on.

Examples of these include menus, tables of contents, and indexes. The nav tag commonly includes it.

Below is the syntax.

<header>

    <nav>
       <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#games">Games</a></li>
            <li><a href="#tournament">Tournament</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
      </nav>

     <h1>This is my navigation part of my current website</h1>
      </header>

<article>

The HTML article tag is used to represent an article. It is one of the new sectioning elements in HTML5. For example, you can use them to organize blog posts, magazines, product cards,forum posts, magazine or newspaper articles, user-submitted comments, or an interactive widget or gadget.

A given document may contain many articles; for example, on a blog that displays the content of each piece as the viewer scrolls, each post would be contained in an element, maybe with one or more sections within.

Below is a syntax :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <article>
        <h1>The shattered dream </h1>

        <article>
            <h3>Introduction</h3>
           <p>Names of the people mentioned in this story 
            are not the real names.</p>
         </article>

         <article>
            <h3>Chapter One</h3>
            <p> Its a good time to start again.</p>
           </article>

    </article>
</body>
</html>

<main>

The primary material of a document is indicated using the main tag. It includes information that is specifically relevant to the main subject.
The main tag represents the dominant content of the body of a
document. This area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

Under the main tag, redundant content like sidebars, navigation
links, and search forms should be avoided. Additionally, there can only be one main element per document.

An example of how the main tag can be used in an HTML document is as follows;

<html>
 <head>
 </head>
 <body>
  <main>

    <h1> Gifts </h1>
    <p> Gifts are presented during birthdays. </p>

    <article>
      <h2> Birthdays </h2>
      <p> Most birthdays are celebrated at the beach</p>
    </article>

    <article>
      <h2> Beach </h2>
      <p>The beach is situated at every part of the water.</p>
    </article>

  </main>
 </body>
</html>

<section>

Chapters, headers, footers, and other sections are all defined using the section tag, the information is divided into sections and subsections using the section tag.
When a document needs two headers, two footers, or any other section, the section tag is used, and the generic block of related elements was organized by the section tag.

The section tag's key benefit is that it is a semantic element, which means that both browsers and developers can understand what it means.

 <html>

    <body>

        <h1>The Inspirational Books</h1>

        <section>
            <h2>Introduction</h2>
            <p>The Book is a combination of motivations.</p>
        </section>


        <section>
           <h2>Chapter one:</h2>
           <p>The is a book that makes you think big</p>
        </section>

    </body>

</html>

<aside>

The aside tag is used to describe the primary object of the web page in a more concise manner that is similar to a highlighter.

It essentially identifies content that is related to the principal content of the web page but does not constitute the primary page's main objective. The aside tag primarily carries author information and links, Create sidebars for quotes, comments, or shout-outs.

This tag facilitates page design and improves the clarity of the HTML document. It allows us to quickly distinguish between the primary text and the subordinate material. Both div and aside require CSS for customized design.

It should be noted that the aside tag is new in HTML5. This tag does not render anything unusual in a browser, and for that, you must use CSS to style it.

See the syntax below:

<!DOCTYPE html>
 <html>

  <head>

  </head>

  <body>
      <div style="display: flex;">
          <main>
              Music is the art of arranging sound to create some 
              combination of sweet melody
            <ul>
              <li>Blues</li>
              <li>Hiphop</li>
              <li>Highlife</li>
              <li>RnB</li>
            </ul>
          </main>

          <aside style="margin:40px;padding:20px;border-left:4px 
          solid 
           lightblue;">
            <i>For good beats and music<br />
            subscribe on our channel<br />
            Aesthete Music.</i>
          </aside>
         </div>
  </body>

  </html>

Below is the output:

<figure>

In HTML, the figure tag is used to include self-contained information such as illustrations, diagrams, pictures, or code listings in a document.

It is connected to the main flow, but it can be used in any position of a document and the figure flows with the document, thus removing it should not disrupt the flow of the document.

This tag debuted in HTML5 and It contains mostly two tags which are listed below:

img src: This tag is used to add an image source to the
document.
figcaption: This tag is used to set the caption to the image.

The figurecaption also known as the tag in HTML is used to set a caption to the figure element in a document, this tag is new in HTML5.

Check the syntax below.

<!DOCTYPE html>

    <html>
        <body>
             <h1>Types of flowers</h1>
             <p> We have different types of flowers</p>
           <figure>
             <img src="https://cdn.britannica.com/45/5645-050- 
               B9EC0205/head-
                 treasure-flower-disk-flowers-inflorescence- 
                  ray.jpg"
                  alt="flower" style="width:50%">
               <figcaption>This is a Sunflower</figcaption>
             </figure>
        </body>
    </html>

Output:

<footer>

In HTML, the footer tag is used to specify the footer of an HTML document. This tag typically contains authorship information, copyright information, contact information, sitemap, back-to-top links, and related documents.

Within the body tag, the footer tag is used. The below example illustrates the footer tag in HTML elements:

<!DOCTYPE html>

<html>
 <body>
   <h1>Types of flowers</h1>
    <p> We have different types of flowers</p>
      <figure>
        <img src="https://cdn.britannica.com/45/5645- 
          050-B9EC0205/head-treasure-flower-disk-flowers- 
          inflorescence-ray.jpg"
          alt="flower" style="width:50%">
          <figcaption>This is a Sunflower</figcaption>
          </figure>
          style>
            footer {
            text-align: center;
            padding: 3px;
            background-color: green;
            color: white;
            width: 650px;
            }
             </style>
             <footer>
             <p>© 2023 by Sunflower</p>
             </footer>
 </body>
 </html>

Conclusion:

Using semantic HTML is critical for producing websites that are accessible, well-structured, and easy to maintain. Both consumers and developers benefit from it since it ensures accurate content interpretation, search engine visibility, and long-term adaptation. By adhering to semantic mark-up best practices, you help to create a more inclusive and user-friendly web experience.

Now that you have learnt about HTML Semantic tags, use them and see your code appear more current, readable, and presentable.

Feel free to message me on my Social accounts for any help.

Twitter

olaideoluwatobiloba1@gmail.com

How To Create A GitHub Repository

OLAIDE — Mon, 17 Jul 2023 20:55:12 +0000

As a developer, there is no denying that one of the important things you need to understand is how GitHub works and how Netlify as a hosting platform works. In this article, I will guide you through the steps of using a GitHub repository to host your website on Netlify.

Let us get started!

What is a GitHub repository?

A GitHub repository can be used to store a development project. It can contain folders and any type of file (HTML, CSS, JavaScript, Documents, Data, Images).

All the changes made to your files in a Git project are recorded and saved in your GitHub repository. This information is saved in the repository folder, often known as the git directory.

Git keeps track of all project modifications and stores them in the repository using a version control system. Users can then remove, copy, or create new repositories for active projects.

What is Netlify?

Netlify is a platform that allows web developers to host their websites in the cloud without having to manage any servers on the back end.

There are varieties of static website hosting platforms, but Netlify is almost everyones favourite. Netlify makes it extremely simple for developers to host websites in a scalable and secure manner.

In this session, I will be showing you a step-by-step guide on how to create a repository directly on your GitHub.

How To Create A GitHub Repository

Step 1

To do this, the first step is to create a repository on GitHub where you will keep the source code for your website. Here is a step-by-step guide.

Sign in to your GitHub account, or create one if you don't have any. You can sign up here
After logging in, select the "Repositories" option to get to the repositories page. if it is your first repository, there is a button at the left-hand corner of your GitHub account that says "create repository"

But if you are not new to GitHub, by the left-hand corner of your GitHub, there is a green button that says "New"

Give your repository a name that corresponds to the name of your website.
If your website is called "My New Repo" you might name the repository "my-new-repo" or any other suitable name.
While giving your repository a. name, it tells you to give a description too for you to provide context for your website.
Please note, the description part is optional, you can decide to ignore it.
The next thing to do is choose whether or not you want to make
your repository public or private. But in this context, I will suggest you leave it public.
You can choose to add additional options like the "README file" but in this context, I will say you should ignore it for now.

Scroll down to the last part of this repository page and click "Create Repository" to create your new GitHub repository.

Step 2

Now that you've set up a GitHub repository for your website, it's time to push your website code to it. This will make the source code of your website available for deployment on Netlify.

Note that when you create your new repository, an instruction shows up on your Git Hub on how to do every command in your terminal or command prompt.

What to do next?

Open your command prompt on your local machine or terminal on your VSCode
Go to the directory where the code for your website is stored.
Make sure you've used the "git init" command to create a local Git repository in this directory.

git init
Run the following command to add all of the files and folders in your website's code to your Git repository:

git add .

This particular command makes your files on your vs code turn green which means it is ready to get saved into git. Note that I mentioned earlier that the README is not necessary.

Now that the file has been added to the git versioning system and git recognizes it, then it is available to be saved and pushed to the cloud.

Create a descriptive commit message before saving the changes to the Git repository. For instance:

git commit -m "my new repo"

Note that the "m" here means message, it helps you know at what point in the particular project where changes were made.

Identify the branch you are pushing to because every GitHub repository has at least one branch which will serve as the main branch. That is why we call it "Main". So to do this, follow use the command below;

git branch -M main

Now that this is done, you should not get any errors at all.

The following command should be used to link your local Git repository to the cloud GitHub repository:

git remote add origin https://github.com/ommahhhh/my-new-repo.git

Not that all these have been done, we can now push the code
from your local repository to your GitHub repository with the
command below:

git push -u origin main

With this command, your work gets pushed to the remote GitHub repository's master branch.

Your website code will be posted to the GitHub repository when the command has been completely done. To ensure that all of your project files have been appropriately uploaded, you can now return to your GitHub page where you established the repository and reload the page, there you will see that your repository has been pushed successfully.

Here is a Youtube video from the Zuri Team that demonstrates how to create a repository on GitHub https://youtu.be/0FaJF4t5Kfo

Now that you are familiar with how the GitHub repository works, the next thing I will be showing you is how to host on your Netlify.

Let us get it done!

How To Host and Deploy On Netlify

Step 1

Before you can host your site at all on Netlify, you need to create a Netlify account and link it to your GitHub.

Open https://app.netlify.com/
To register for a new account, click the "Sign up" button on
the site.
You can then sign up using your GitHub account or establish a
new Netlify account by providing your email address and
password. whichever one works for you is fine.

Please note that If you sign up using your GitHub account, you will be taken to a page where you may authorize Netlify to access your GitHub repositories. This permission allows Netlify to launch your site directly from your GitHub repository, which is exactly what we want to happen, therefore I strongly suggest you sign up with your GitHub.

Now that you have signed up and your Netlify account has been Authorized by your GitHub account, you will then be redirected to Netlify.

Step 2

Now that you have successfully created a Netlify account and have been able to connect your GitHub account with it, so what's next?

Deploy your website on Netlify

Here is the step-by-step guide on how to deploy your website on Netlify;

Navigate to your Netlify dashboard.
When you're on the dashboard, click the "Sites" button. Then in
the right-hand corner, you will a button that states "Add new
site".

By clicking the "Add new site button", it will start the process of creating a new site with your GitHub repository.

After clicking on the button, you will see options that state: Import an existing project, Start from a template, and Deploy manually

Please note that you can use any of these mentioned options above but I will suggest you use the first option "Import an existing project"

Click on "Import an existing project" and you will see a list of Git providers that are currently accessible, choose GitHub from the list.

Now that you have clicked on GitHub, a list of your GitHub
repositories will be retrieved, it then tells you to pick a repository.
please note that there is a search box that says "search repo"
Click on the search box and search for the exact repository
name you gave the website on your GitHub repository (if you do
not search for the exact name, it won't pop up on your Netlify)
You can now select the repository that contains the website you want to deploy.
Now that the repository has shown on your Netlify, click on it,
there you scroll down a bit to see the deployment settings appear on the same page, The settings are: Base directory, Build command, and Publish directory

These are just a few of the settings you may set up here. Although I will say you should safely disregard options and rely on the default settings to function, in some situations, you can change them to suit the needs of your project.

On the same page is where the button that says "Deploy site", click on the button and start your deployment.

Netlify will start developing and launching your website. The deploy logs on the Netlify dashboard allow you to keep track of the development.

Please note: if it takes time and it is still telling you it
is deploying, I will suggest you refresh your page, by then it should have deployed. However, wait a short while before you decide to refresh.

When the deployment is finished, Netlify will provide you with a specific URL where your website can be seen online. You can now view your deployed site by visiting and sharing the URL.

Conclusion

Using Netlify to host and launch websites is a lot of fun. Overall, it is an excellent platform for developers looking to optimise their processes, build quick and dependable websites and applications.

Yipee! You have now successfully hosted your website on Netlify. Your website is ready to be viewed by anyone and give them a smooth surfing experience.

Feel free to message me on my Social accounts for any help.

Twitter

olaideoluwatobiloba1@gmail.com

Run Your Code On Different Browsers.

OLAIDE — Tue, 04 Jul 2023 19:43:14 +0000

When working on the editor (VSCode), you will have to run your code to see it displayed on the browser by going live.

Therefore, the majority of individuals indicate that when going live on VSCode, it automatically switches to Safari or Microsoft Edge, but they would want it to function on "Chrome" instead.

In this article, I will teach you how to run your live server on the browser of your choice.

The Step-By-Step Guide

In several instances, developers have encountered situations in which they needed to execute their code on Chrome, but it kept redirecting them to either Microsoft Edge or Firefox.

As developers, There is no doubt that everyone makes use of their favourite browser for work.

Here are the steps you need to take to switch to your preferred browser.

• Open your VSCode.

• Go to your settings.

On your VSCode, there is a settings icon at the bottom left of
the editor.

• Open the settings Icon.

After clicking the settings icon, select "settings" from the
menu that appears.

• After clicking on settings, a search box appears on top of your
editor, which you will type "live server" into.

The first drop-down menu you get when searching for live server states: "Specify custom browser settings for live server...."

Don't worry, we are getting there already!

• The final step is clicking the drop menu where you see
different browsers, choose your default favourite browser and
that is it.

Easy right? I know it is.

Remember, I stated at the beginning that my favourite browser would be Chrome, which is why I chose it. It is not an issue if you opt to use a different browser (everyone has different preferences).

After that, close your editor and reopen it, then go live and see your code working on Chrome or any of the default browsers you have selected.

Additionally, I made a video that clearly demonstrates how to run your code on your preferred browser. Click the YouTube link below to watch.

https://www.youtube.com/watch?v=9y0oV5h9yug

Conclusion

As a developer, you need to run/test your code on different browsers. This is called the "Cross Browser Testing".

It is a good idea to test your websites on different versions of browsers.

Feel free to message me on my Social accounts for any help.

Twitter

olaideoluwatobiloba1@gmail.com

Why I Transitioned into Technical Writing

OLAIDE — Tue, 04 Jul 2023 19:12:41 +0000

Introduction

So what do you tell someone who adores writing?

Since I was a small child, I always liked writing. I even created my first storybook at that age. But how can I convince my audience that I never wanted to write in a technical style? I never saw myself pursuing a profession in technical writing. I have been building websites for more than two years.

Who says I was going to develop my skills as a tech writer? Nobody told me, I mean nobody! I woke up one morning and said to myself that I was going to learn it and I did, as it was just me and my thoughts at the time. I discovered how resourceful I can be when putting ideas into writing.

So I said to myself "You would do well in the writing space."

The Instant I Gave Myself In
I can imagine what is going through your mind. I know you would be wondering if I eventually gave in to the thought.

Yes, I gave in. I decided to fully embrace my ability and go into the field of technical writing. I recalled sending out a tweet to inform everyone on my timeline that I was about to launch a career in technical writing.

I started preparing and asking people I know that are into writing how I can get started. I was lucky enough to get resources online, made my research, took courses online, and asked questions on how to write articles, started publishing and I later joined a community Here, then I started contributing to open source.

Am I Doing Well In The Field?
Who wouldn't succeed in the field they have prepared to explore? It now appeared to be a fulfilment of a dream for me. I took everything seriously and wrote seven (7) technical articles. I improved my CV and started submitting gig and employment applications. Writing and coding both got attractive and today I'm flourishing in the field of technical writing.

I was passionate about guiding others through the process of becoming technical writers. I recalled tweeting about how many weeks I wanted to mentor people and I received responses from interested individuals.

Observe this! I ultimately gave 20 folks the opportunity.

Indeed! We conducted the mentoring class, and everyone I choose got involved, learned the essentials, were given tasks to do, and were all prepared for the technical writing part.

We had three weeks of Mentorship class, and I can confidently state that they are all performing well in the field as we speak.

Conclusion
And so I can assure you that if you can envision it, you have the strength to live it. Your ambitions, no matter how far-fetched they look, have the potential to become a reality.

Listen to your soul's calling and let it guide your path. Whether it's a profession or a life-changing endeavour, you have the power to make it a reality. Have faith in yourself, your ability and the power of your aspirations.

There will be challenges and doubts that try to influence you, the route may appear to be obscure, but don't cave in.

I am rooting for you!

Found this article helpful?
Feel free to find me around the web for questions and clarifications

Twitter

The new intake

OLAIDE — Thu, 01 Jun 2023 18:21:13 +0000

I am trying to teach the new intakes what development tools and writing toolbox looks like and now they dem to understand it very well.

All You Need To Know About Web 3.0 And Blockchain

OLAIDE — Thu, 25 May 2023 12:29:35 +0000

Introduction

New technologies make the rounds in the tech world now and then. Given the nature of developers, learning about these new trends is critical, especially if you belong to a group of developers or you are looking to transfer to something new and more challenging.

At the moment, Web3 and Blockchain are all the rage, and this article will give you prior knowledge on these topics.

this write-up will let you understand very well the meaning of important terms, facts about web.3 and ways you can transition from wherever you are to blockchain development.

After reading this article, You will have sufficient information to decide whether to enter the blockchain development industry or not, whether to use blockchain in your upcoming project or not.

What are blockchain, smart contracts, and the web3?

Blockchain

A blockchain is a data structure used to create a decentralized ledger. A blockchain consists of blocks that are chained serially. A block contains:

A timestamp indicating when the block was created
Block reward
A set of transactions
Block number
A hash of the previous block

Every block contains a hash of the previous block, thus making a chain of blocks linked with each other. Every node in the network holds a copy of the blockchain.

Blockchain is still hot and the industry has a crazy amount of demand for developers right now. Next to awesome salaries, it's also an immensely interesting field to work in.

If you want to be a part of this and advance in your career to become a Web 3.0 developer, a structured approach can leverage your learning a lot.

Here are videos that teach everything you need to know about blockchain;

https://youtu.be/9aXHQ98TMRY

https://youtu.be/iYYf3w4RPDA

Smart Contracts

Smart contracts are a great option for automating complicated business processes and transactions since they are transparent, secure, and impervious to tampering. They are created in code and kept on a decentralized blockchain network, which makes sure that everyone has access to the same data and that the rules of the contract are automatically enforced without the involvement of a middleman or outside party. Finance, real estate, and supply chain management are just a few of the sectors using smart contracts to improve efficiency, cut costs, and streamline procedures.

Smart contracts can nearly do everything, from fungible and non-fungible tokens to the backend of your next decentralized app. They are, however, different from the code you usually write. They will make up a good portion of your future work, so better understand them well.

Web 3.0

The next generation of the internet, referred to as Web 3.0 or the decentralized web, is based on decentralized technologies including blockchain, peer-to-peer networks, and distributed storage. It intends to develop a more open, transparent, and user-centric internet that is owned and regulated by the users themselves rather than a small number of centralized companies. With Web 3.0, users should have more control over their data and online identities and new applications and services that are more secure, private, and resistant to censorship.

Blockchain, decentralized applications (dApps), smart contracts, decentralized finance (DeFi), and other technologies and ideas are all included under the umbrella name "Web 3.0."

Web 3.0 was originally termed the Semantic Web by Tim Berners-Lee, and was portrayed to be an autonomous, intelligent, and open internet.

Learn Solidity

Solidity can be learned. There are numerous blockchains available, each with its distinct method of constructing smart contracts.

Solidity, on the other hand, is the language of the Ethereum Virtual Machine (VM), which is embedded in many other blockchains. It will not only benefit you on Ethereum. It will also assist you in creating smart contracts on other chains.

Solidity developers have by far the most job opportunities. Many companies are building or planning to develop on Ethereum. It may be a long time before another blockchain reaches the degree of adoption that Ethereum has.

Despite a few issues (the chain is now overloaded), the community is actively working on shifting the consensus to Proof-of-Stake. All scalabilitySolidity can be learned. There are numerous blockchains available, each with its distinct method of constructing smart contracts.

Solidity, on the other hand, is the language of the Ethereum VM, which is embedded in many other blockchains. It will not only benefit you on Ethereum. It will also assist you in creating smart contracts on other chains.

What you must understand in particular is how gas works and how each line of code you write in Solidity influences the price of execution of your smart contract. There is no getting around that. Unfortunately, some businesses aggressively optimize for gas use.

Have questions? here is a video link that vividly explains what solidity is and how it works. click here

You can take a course here you learn this by playing a game.

Is Blockchain The New Oil Money?

If by oil money you mean blockchain development is profitable, then the answer is yes! Blockchain developers, for example, were expected to earn between $150 000 and $175 000 on CNBC. According to a popular LinkedIn job posting, a senior blockchain developer might earn up to $1 million per year.

While money is a key motivator for almost all developers to branch out into new areas, usefulness and enthusiasm for work must also be considered.

Can I Become a Blockchain Developer?

Do you want to know if you can become a blockchain developer? Yes, why not? You only need to learn the tools and principles to be successful. If you are wondering whether it is worthwhile to venture into Web3, examine the following facts: The Internet, like all other technologies, is changing. We witnessed the power and utility of Web 2.0 from Web 1.0. Web2 will not always be the sole option to create online applications. This is especially true for FinTechs. At the time of writing, the entire Web3 sector is booming, if you're in any tech group, chances are you've come across the word or a developer in it. Blockchain has the potential to be the web Future.

What Are The Programming Languages?

Solidity: Solidity was designed to be similar to JavaScript to
make the transition easier for JS developers. Solidity is the
most in-demand expertise in the Web3 arena, and it is utilized
for Ethereum client dApps and smart contracts.
Python: Because of its popularity and ease of use, Python has
gained widespread acceptance in Web3. The pyethereum project, as
well as the web3.py project are examples.
JavaScript: As the most popular web language, JavaScript offers
modules that are specifically designed for Web3. Etheruem.js,
Three.js, Ethers.js, Web3.js, and other examples are available.
Rust is a C/C++-inspired language that is used to create Solana
client dApps and smart contracts. Rust was used to create the
Parity client.
.NET: The.NET framework is not forgotten. Using Nethereum, you
can simply connect the Ethereum blockchain into your.NET apps.
C++: C++ is primarily qualified. You can never go wrong with the
language for protocol development.
Golang: The powerful Go language has also demonstrated skill in
the web3 sector. The Geth client, for example, was developed in
Go.

Where is the money at?

Many organizations are looking for blockchain talent, and Google has lately moved into the area, so you can cash in on your skills. You can earn money in this block by doing one of the following:

Hackathons.
Full-time job role here

Conclusion

You have now seen and comprehended everything necessary to begin working with blockchain technology. If you have the time and motivation to learn a new set of tools and technologies that are likely to shape the Internet of the future, you should do this. Even more, businesses will enter as a matter of survival as more declare their entry into Web 3 For developers, this means more money and business opportunities.

Still interested?

Don't be discouraged if it takes some time, especially if you don't have a lot of industry expertise. Some organizations may aim to recruit more experienced employees.

I am rooting for you!

Found this article helpful?

Feel free to find me around the web for questions and clarifications

Twitter

What Is ChatGPT?

OLAIDE — Thu, 27 Apr 2023 14:19:18 +0000

Introduction

The company OpenAI developed ChatGPT, a large language model.

Artificial intelligence is changing the way we communicate and interact, from language translation to creative writing. ChatGPT is a powerful AI language model with numerous potential applications. Though they frequently require some editing to reach a final state, ChatGPT responses can benefit both individuals and businesses.

In this article, We will go over a general description of ChatGPT and how it can be used and applied.

What is ChatGPT?

ChatGPT is a natural language processing tool driven by AI technology that allows you to have human-like conversations and much more with the chatbot. The language model can answer questions and assist you with tasks like composing emails, essays, and code.

ChatGPT was created using deep learning, a more complex type of machine learning. Deep learning tries to mimic how the human brain works, learning and improving over time. The more data the model is trained on, the better it can learn these patterns and make accurate predictions.

ChatGPT was trained on a massive amount of data, consisting of hundreds of billions of words. The dataset contains sources from:

Websites
Books
Articles
Social media posts

ChatGPT now threads together text because it has "learned" how information is often presented through digesting all of this input. It makes predictions about how a person might react to a single question, word, or collection of words.

How can you access ChatGPT?

You can get to ChatGPT by simply going to http://chat.openai.com and creating an AI account.

After you sign in, you can begin chatting with ChatGPT. Begin your conversation by asking a question because ChatGPT is still in its early stages of development, it is free to use and you can ask as many questions as you want.

How are people using ChatGPT?

In addition to answering simple questions, the model has many other functions. ChatGPT can write essays for you, describe art in great detail, generate AI art prompts, hold philosophical discussions, and even code for you.

Although ChatGPT appears to be quite remarkable, it still has limitations. These restrictions include the inability to respond to questions that are phrased in a particular way since it necessitates rephrasing to comprehend the input question. A more significant drawback is the poor quality of the replies it provides, which occasionally seem reasonable but are overly vague or lengthy.

Capabilities of ChatGPT

Through its ability to generate useful responses to questions in seconds, ChatGPT has a wide range of potential applications across various industries:

Provide personalized customer service
Assist with language translation and coding tasks
Generate content for websites or social media
Create chatbots and virtual assistants
Analyse and summarize large amounts of text data

These uses have the potential to benefit both businesses and individuals by saving time and money.

Both the way we use ChatGPT and the application itself are developing Over time, we will find new uses and ChatGPT will add new features. We are just getting started using systems like ChatGPT in our lives.

Conclusion:

ChatGPT is a powerful AI language model that has a wide range of potential applications. It was created using a complex form of machine learning and trained using hundreds of billions of words.

It can generate realistic responses to questions and conversations. These responses can serve useful purposes in both business and everyday life such as content creation and customer service. Though they often need some editing to get to a final state, ChatGPT responses can help people and businesses alike.

I know this information was at least a little bit helpful to you.

Now, ask ChatGPT anything!

Feel free to find me around the web for questions and clarifications

Twitter

How To Become A Better UI/UX Designer

OLAIDE — Wed, 05 Apr 2023 14:00:41 +0000

Introduction.

Hello there, This article will show you how to get started in the field of UI/UX and become a great Designer. I am very excited to share my knowledge and write this blog just for you.

Now let us get started!

Who Is A Designer?

Indeed, you can proudly call yourself a designer if you've ever sat down with paper and a pen or perhaps a laptop and tried to design some great stuff, but this article is about how we can improve as designers and differentiate ourselves from the competition. So let's jump right into the interesting stuff, and I'll try to keep it as simple as possible to avoid not easily understood.

A UI/UX designer's job is to create user-friendly interfaces that enable users to understand how to use complex technical products.

UI/UX designers and software developers frequently collaborate and ensuring that they do it correctly is an important part of good software development. It may be difficult for new designers to understand what the developers require of them, So I am here to share some advice based on experiences.

Get Into Some Research

If your client is paying you an amount of money to design a clean website for his new Automobile business, but you have no idea what an automobile website looks like, you should learn more about what it is before gradually learning more about other automobile shops and drawing inspiration from the most well-known ones.

Get inspired before starting the design process! Make your design even more convincing by referencing similar competitors. Explain how different is your approach and how it is better when comparing.

But wait, be a little patient, Inspirations would come up.

As a UI designer, you must sort through ideas, it is perfectly acceptable for one to be unaware of everything that a client desires or that your next project requires. Fortunately, we were given Google to handle such issues for us.

Now that you have gotten the hint that you need to get lots of cool inspirations, Here are some resources that can get you boundless inspirations;

Behance

Behance is one of the many tools that Adobe has to help creators stand out. It’s somewhat like LinkedIn, in the sense that you can use it to showcase your professional work and connect with others.

I must tell you that Being in a creative field is sometimes challenging. It is impossible to be motivated every single day, regardless of how much you love what you do, and sometimes you will find yourself lacking inspiration, but When this happens, leaning on (and learning from) other creatives can help you reignite that spark inside you. And as you might expect from a social media platform designed specifically for creators, Behance is a valuable tool for achieving this.

2. Dribbble

Dribbble is a self-promotion and social networking platform for digital designers and creatives. It serves as a design portfolio platform, jobs and recruiting site and is one of the largest platforms for designers to share their work online. it is free for Personal Use designs, themes, templates and downloadable graphic elements on Dribbble.

Mobbin

A hand-selected collection of the newest mobile design trends from applications that showcase the best in design is called Mobbin. Obtain ideas from the platform's over 25,000 patterns (screenshots from iPhone 12) and more than 250 iOS apps. all you have to do is register to save your preferred patterns.

There are many more similar articles on the internet, these were merely my preferences. So don't worry if you didn't find these to be very beneficial to you, there are diverse others.

Let us Get Started With the Proper Tools;

You have been getting calls from the client asking for the mock designs, right now, you should use the appropriate tools to sketch out all of your ideas. Now, take your time and focus on your task and don't worry too much about the client as you would not want to give the client a bad design.

Here are some of the most popular design tools available for your consideration;

Figma

Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows or Linux, and even on Chromebooks. It also offers a web API, and it's free. The Figma Mirror companion apps for Android and iOS allow the viewing of Figma prototypes on mobile devices. Here is a link to where you can find Figma easy to work on . Figma Made Easy

Sketch

Sketch subscriptions come with a shared Workspace, so your team can do everything from designing seamlessly side-by-side in the same space to sharing documents with version histories (with unique links for every version).

It excludes print design features and is mostly used for user interface and user experience design of websites and mobile apps.

Adobe XD

Adobe Inc. created and released Adobe XD, a vector-based user experience design tool for online and mobile applications. Although there are versions for iOS and Android to help preview the outcome of work immediately on mobile devices, it is only accessible for macOS and Windows.

these are the most commonly used tools but if you want to explore other tools, here is a link to see more of the tools. UI/UX Tools

Branding

In general, branding is significant to UI design.

A user interface branding design is a collection of graphics assets and visual elements such as;

. Logo

. Brand colours

. Typography

. Illustrations

. Animations

They all play an important role in brand promotion and market visibility.

As a UI designer, you must keep up with the current technologies, trends and methods to grow with the skill of being creative and adaptive as well as having to work with teams.

Conclusion

The best tip for making your design stand out is to keep up with current trends. Keeping up with trends is like listening to a million customers at once. It demonstrates that you're still in the moment and acknowledges that you are still in the modern flow.

I know this information was at least a little bit helpful to you.

Now, don’t let anything hinder you from starting your design journey today, I am rooting for you!

Feel free to find me around the web for questions and clarifications

Twitter

Is Tailwind CSS The Best Framework?

OLAIDE — Thu, 30 Mar 2023 16:05:36 +0000

What is Tailwind CSS?

In essence, Tailwind CSS is a utility-first CSS framework for quickly creating unique user experiences. It is a low-level, highly adaptable CSS framework that provides all the building pieces required to create custom designs.
Today Tailwind CSS has taken the lead as the most popular CSS framework, leaving behind previous front runners like Bootstrap.

The benefit of Tailwind CSS is that it makes it simple for developers to alter CSS classes to produce distinctive styles and personalized user interfaces. because there are no restrictions on designs with Tailwind CSS, the developer has complete freedom when it comes to selecting styles. Many developers choose Tailwind CSS over frameworks like Bootstrap that have pre-built style kits because of its design freedom.

Why Should You Use Tailwind CSS?

It is best for creating responsive websites
It has smaller CSS files
it is easy and fast to use
it has non-restrictive framework and no pre-set 5. styles/components
it has the ability to re-use component style

How to get started with Tailwind CSS

Step 1- Install package

npm install tailwindcss

Step 2- Add tailwind to your created CSS file

After creating a CSS file, copy the following code into the file. What this does it allow you to use Tailwind by adding it to your project.

@tailwind cssbase;
@tailwind component;
@tailwind utilities;

Step 3- Create your Tailwind Configuration file

Enter the code below into your terminal.

npx tailwindcss init

After running, a new file called "tailwind.config.js" will appear in your project, containing the following code.

module.exports = {
 purge: [],
 theme: {
   extend: {},
 },final
 variants: {},
 plugins: [],
}

Step 4- include the Postcss file In the terminal run

$ npm install postcss-cli autoprefixer

After the above installation is finished, enter the following code into the terminal.

$ touch postcss.configure.js

Now, you should have a file called postcss.config.js. Add the code below to the plugins.

module.exports ={
plugins :[
   require ("tailwind.css"),
   require ("autoprefixer"),
    ]
 }

I know you are wondering what "PostCSS" means, worry no more, I am here to explicitly explain everything in this blog for you.

Now, what is PostCSS?

PostCSS is a tool used for transforming CSS with JavaScript plugins. It gives you access to Tailwind by adding it to the plugin then It generates a build folder in which the processed Tailwind is saved.

Step 5- in the terminal run

npx postcss tailwind.css -o public/syle.css

lastly;

npm run build

The installation is done at this point. You must now create an index.html file where you will be running your tailwind CSS code.

Conclusion

Easy now? Yes! I know it is now made easy for you to install your tailwind CSS and now you can tell after you have practiced it that Tailwind CSS is the best CSS framework.

It's time to start experimenting with Tailwind CSS now that you are up and running. Now that you can see how interesting Tailwind CSS is and it might just become your favourite CSS framework.

Check out these links below to learn more about Tailwind CSS.

https://www.youtube.com/watch?v=ft30zcMlFao

https://www.youtube.com/watch?v=lCxcTsOHrjo

Now get to work! 😊

Feel free to message me on my Social accounts for any help.

https://twitter.com/tech_Olaide

https://www.linkedin.com/in/oluwatobiloba-olaide-15102a200/

olaideoluwatobiloba1@gmail.com

How To Get Started As A Front End Web Developer

OLAIDE — Mon, 27 Mar 2023 21:28:41 +0000

Hello there, This article will show you how to get started in the field of development and become a great front-end developer. I am very excited to share my knowledge and the hours of research I put in to write this blog just for you.

Now let us get started!

What is Front End Development?

Front-end development is the development of visual and interactive elements of a website that users interact with directly. It is a combination of HTML, CSS and JavaScript where HTML provides the structure, CSS the styling and layout, and JavaScript the dynamic behaviour and interactivity.

As a front-end developer, it will be your job to create a website's user interface, paying close attention to design principles and user experience to make sure it looks nice and is simple to use. To ensure that the finished product satisfies the client's requirements and offers the best experience to end users, you will work closely with designers, back-end developers, and project managers.

If you want to be a Front End Web Developer, Then your first step will be getting used to front-end technologies.

Every start-up or any kind of company needs a website for its brand in this age of the internet and rapidly evolving technology, Portfolio websites are a great way to showcase your personal brand.

Guidelines to becoming a frontend dev.

Before you can think of learning the common technologies and languages, you must be familiar with:

What is the web's history?

How does the internet work?

what are browsers and how do they work?

What are HTTPS and HTTP?

This video by Hitech Choudhary will help you understand Front end developer guide https://www.youtube.com/watch?v=nFQ22Wb6Qe8

This video by Dave Xiang would help you understand explicitly how browsers work https://www.youtube.com/watch?v=WjDrMKZWCt0

This video by IT k Funde would help you clearly understand the difference between HTTP and HTTPS https://www.youtube.com/watch?v=eWdPWSBKxso

Learning The Basics

HTML

HTML stands for "Hypertext Mark-up Language" and not a programming language.

As a beginner, you should start with the basics and your first language in this field will be HTML which is used to define the structure of a website. It is often called the skeleton of the website. Learn the syntax and build some simple websites with it for practice. For example, you may make a signup page, contact form or your CV with HTML.

Do you want to see how to write "Hello World" in HTML?
Here's an overview below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Hello World</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h3>Hello World</h3>
    <h4>Hello World</h4>
    <h5>Hello World</h5>
    <h6>Hello World</h6>
</body>
</html>

Now, Imagine a meal being cooked in a kitchen by a chef and this meal is being served with no ingredient in it at all. how does that sound or how will taste? or imagine a house with no interiors or painting to beautify it, how will it look like?

This is where CSS comes in.
So, while learning CSS you will have to use your HTML knowledge and use your ideas to beautify your HTML elements.

What is CSS?

CSS known as the "Cascading Style Sheets" is a language used for describing the presentation of a document written in a markup language such as HTML or XML.

note that External style sheets are saved as a CSS file (.css) and can be used to determine the appearance of an entire website through one file (rather than adding individual instances of CSS code to every HTML element you want to adjust). To use this type of style sheet, your .html files need to include a header section that links to the external style sheet and looks something like this:

The highlighted part above is the link for the external styling and below is the code of how to link an external CSS link.

<link rel="stylesheet" href="./style.css">

body{
background-color: black;
}
h1{
color: aqua;

}

h2{
color: brown;
}

h3{
color: tomato;
}

h4{
color: blue;

}

h5{
color: purple;
}

h6{
color: springgreen;
}

Below is the result of the CSS styling we sampled above:

At some point, you will come across the term "responsiveness" which has become a necessity in the age of the vastly expanding internet. People have a variety of screen sizes in their hands, and when they're exploring a website, it's normal for them to expect a good experience while visiting that particular website. So, as developers, we must always remember that media queries in CSS will be our best friend because this is the only tool that will help you make your website responsive for all screen sizes. The learning resources are listed below.

Here is how to build a responsive website with HTML and CSS by Traversey Media https://www.youtube.com/watch?v=p0bGHP-PXD4

This video by Danny Krossing will explicitly explain how to create a responsive website using HTML and CSS https://www.youtube.com/watch?v=kbLfWKGVsMQ

Start with learning HTML and CSS; don't wait to fully master these and start building simple projects as soon as possible. You could try rebuilding the front end of your favourite websites using HTML and CSS to start with. Do as many of these projects as possible as you keep learning. Once you are somewhat comfortable with HTML and CSS, start learning some basic JavaScript (DOM manipulation, making AJAX calls etc) and learn how to add interactivity to your websites. While you are at it learn some basics of Git and GitHub. At this point, Keep revisiting this roadmap and try to fill the gaps in your knowledge.

Now that you have known what HTML and CSS are, let me explain what JavaScript is and how it works;

JAVASCRIPT

JavaScript is the website's brain, where logic is implemented. It is a programming language that can be used to develop both front-end and back-end logic.

Some developers often ask if Java is the same as Javascript. often, I get questions from tech newbies if Java is different from JavaScript? I am writing to you today that These two programming languages are unrelated to one another. JavaScript is utilized in several tech industries besides programming, including machine learning, game development, Web3, and so on.

As a beginner, I would not advise you to learn it in one sitting before moving on to other subjects or technologies. Instead, I would advise learning the fundamental and crucial ideas, going over the syntaxes, creating projects, and being familiar with JavaScript's techniques. After all of this, it will be your turn to move on to studying JavaScript's frameworks and libraries because you will be discovering more of its frameworks and libraries as you construct new applications.

This resource by "Mosh" listed below will help you learn JavaScript: https://www.youtube.com/watch?v=W6NZfCO5SIk&t=2368s

Here's a complete list of JavaScript libraries and frameworks: https://www.javascripting.com/

Job Opportunities

Now it's time to think about jobs and job boards to get hired, Here's my advice: look for internships first, then full-time jobs. Internships will help you become accustomed to working on company projects. You'll learn about the work that a front-end developer does in a company. You'll also learn from your mistakes, gain new experiences, and gain inner confidence.

Meanwhile, having a portfolio website representing yourself, your work, tech stacks, in short, your brand, is required during your job search.

It is now time to select the Work type, could be On-site, Remote, Hybrid.

As a frontend developer, you may be offered positions such as Senior/Junior Frontend Engineer.

You can also pursue freelancing opportunities by creating a profile on Upwork, Fiverr and Freelancer.

Conclusion.

After learning so much, you'll be a successful front-end developer without any difficulties.

I know you are asking if there will be no difficulties. uhh? I am kidding 😅 dear friend! Struggles are an inevitable part of life. You will never learn properly if you do not fail or become stuck with problems.
aah aah! see you asking yourself again that how do you do it, do not worry here are some tips for you to scale through the difficult time;

Do not Procrastinate
Set hours for yourself in a day to watch tutorial videos and
lay your hand on a project (do not rush it, you will finish up
eventually)
You will come across bugs in your code, but do not have the
fear of debugging and solving it, yes! you can get it done.
Build your communication skills, Participate in Twitter Spaces,
Share your knowledge in the community or your socials and
follow the " learning in public" initiative and engage in
Community Events in Discord, Slack and Twitter.
Attend meetups and tech conferences. Contribute to Open Source
projects on GitHub.

Note: Asking for assistance is not a sign of weakness. Keep on Practising until you Perfect the Art. Don't give up until you do your masterpiece. And every time you do something, share it on LinkedIn, Twitter and be open to corrections.

Congratulations on taking the bold step! 😊

Feel free to message me on my Social accounts for any help.

https://twitter.com/tech_Olaide

https://www.linkedin.com/in/oluwatobiloba-olaide-15102a200/

olaideoluwatobiloba1@gmail.com

How To Contribute To Open Source

OLAIDE — Sat, 25 Mar 2023 12:22:16 +0000

What is open source?

Open source is a type of software that is designed to be publicly accessible by anyone, which means anyone can modify and distribute the code as they see it. Open-source software is developed in a decentralized and collaborative way, relying on peer review and community production.

The notion is that certain individuals from all over the world, can come together and collaborate to create something that is beneficiary to everyone. It is evident that by working together, we can come up with great ideas.

Some examples of open-source software include:

GNU/Linux
Mozilla Firefox
VLC media player
Apache web server
LibreOffice

Improving your skills and empowering yourself:

Contributing to open source is an excellent place to start if you want to improve your abilities in a certain field. You can choose projects depending on the particular skill sets you want to sharpen and rely on the community to assist you in getting better. You will have to improve your documentation and communication skills as a result of the learning and cooperation processes, which will also help you become a better team player.

As a bonus, you may feel more confident because it feels good to make even a small contribution to a project that will benefit the next person who uses it.

How can I contribute to open source?

Contributing to open-source software does not require you to be a proficient programmer. Even if you don't know how to code, there are many ways you can contribute and network with the people who have made contributions to your tech stack, but it will be much more beneficial for you and the projects if you know how to code.

You may have been considering how you might contribute to open source and how to start by getting in touch with particular programmers. Do not worry, I had the same thought when I first learned about Open Source and I told myself to "try at least, begin with something." I am going to explain how here.

*Here are the common ways you can contribute to getting started :
*

Study GitHub and Git: Before looking for repos to contribute to, familiarize yourself with the GitHub platform and Git commands by Learning the fundamentals of:

How to fork a repository
making commitments
Merging commits
submitting a pull request

These are some of the most crucial Git/GitHub ideas among many others.

Support with documentation: Understanding a project or the
job would be impossible without appropriate documentation,
which is why documentation is the core of every project. One of
the most crucial, yet frequently disregarded, components of
open-source projects are documentation. You can contribute by
authoring or modifying project documentation if you have strong
writing abilities. These could include FAQs, user manuals, and
troubleshooting manuals. With open source, you may even work
together on projects and accomplish a lot more.
Interpretation: you can contribute to open-source projects
by helping to interpret. These projects frequently require
interpretations so that users of the software who speak other
languages can use it without any difficulty. You can contribute
by interpreting the software and its documentation if you are
fluent in another language.
Help with Designs: if you are a designer, you can hep the
community create posters, images or carousels for the open-
source organization because designers are very crucial for
organizations projects.
Proofreading: you can contribute to open source by helping
to fix any typing errors and by helping in systematically
arranging all the work folders.

Inspiration To Get Started.

Your First contribution is exceptional but can also be overwhelming. Look for open-source projects in your area of expertise to find the correct GitHub repo. Connect with the individuals that have contributed to your tech stack, recognize the procedure and begin to participate.

If you make mistakes, do not worry, it is all part of the learning process.

At the beginning of my Open Source contribution, I also made a few mistakes but I also learned from them and that is how you learn. You learn from your mistakes and never be afraid to seek assistance, People in the open-source community are always willing to assist you if you run into a problem or require assistance with a task.

Not to forget, you can create a portfolio of work that showcases your abilities and experience to prospective employers by taking part in Open Source projects. It offers the chance to network with other developers and industry experts.

Let Us Start!

You are motivated now, so let's start the adventure.

what do you need to get started, Here are the steps you should take to get started:

Launch your preferred web browser
Type in Github.com
Create an account and Setup the profile
To learn more about Open Source and How Git and GitHub works,
this short yet explicit tutorial will help you get started
https://youtu.be/GbqSvJs-6W4
to find a popular open-source project on GitHub, you can click
on this link. https://github.com/topics/open-source-project

Conclusion.

With all being said above, we've covered all of the fundamentals you'll need to get started with your Open Source Contribution, I hope you find this article useful in your Open Source journey.

Happy Contributing!

Feel free to message me on my Social accounts for any help.

https://twitter.com/tech_Olaide

https://www.linkedin.com/in/oluwatobiloba-olaide-15102a200/

olaideoluwatobiloba1@gmail.com

Basics Of Javascript

OLAIDE — Thu, 23 Mar 2023 20:13:29 +0000

WHAT IS JAVASCRIPT

JavaScript is a dynamic Programming Language that is used for web development, in web applications. it allows you inplement different features on web pages that can not be done with only HTML and CSS. This foundation will set you up for understanding the more complex concepts you will encounter later.

WHAT IS CONSOLE?

The console is a panel that displays important messages like “errors” for developers. If you want to see things appear on your screen, you can print or log to your console directly.

In JavaScript, the console keyword refers to an object, a collection of data and actions that you can use in your code. Keywords are words that are built into the JavaScript language, so the computer recognizes them and treats them specially.
One method that is built into the console object is the .log()
method.
When we write console.log() what we put inside the parentheses will get printed, or logged on to the console.

Now let us look at this:

console.log (3);

In the example above, it logs 3 to the console while the semicolon indicates the end of a statement. Although in JavaScript your code will usually run as intended without a semicolon. But highly recommended, learning the habit of ending each statement with a semicolon to learn a habit of ending each statement with a semicolon so you never leave one out in the instances where they are necessary.

It is useful for you to print your values to the console, so you can see the result of what you are doing.
having said all of this, Comment is quite important in JavaScript too.

WHAT ARE THE COMMENTS?

Comments are used to explain your JavaScript Code to make it more readable for other developers.
there are different types of comments:

A single line comment will comment out a single line and it is indicated with two forward slashes **// **coming after it.

  // Prints 3 to the console
  console.log(3);

Here, " // Prints 3 to the console" is a comment.

A multi-line comment comments out multiple lines and it implies /* to begin the comment and */ to end the comment.

   /*
 This is an example of the code I used in 
 implementing my game website but I
 don't want to disclose it yet.
                     */

The comment above is a perfect example where you might use a multi-line comment.
So moving forward, I will be telling you what Data types do in Javascript.

WHAT ARE DATA TYPES?

Data Types are the classifications that specifies which type of Value a variable has. In JavaScript, there are Seven fundamentals data types:

** Numbers**: Any number, including numbers with decimals: 6, 12, 1516, 23.14

2 String: Any grouping of characters on your keyboard
(letters, numbers, spaces, symbols, etc.) surrounded by single
quotes: '....' or double quotes "...." though

single quotes most times is preferred.

Boolean: This data type only has two possible values—
either True or False (without quotes). It’s helpful to think
of Booleans as on and off switches or as the answers to a “yes”
or “no” question.
Null: This data type represents the intentional absence of
a value, and is represented by the keyword null (without
quotes).
Undefined: This data type is denoted by the keyword
undefined(without quotes). It also represents the absence of a
value though it has a different use than null. undefined means
that a given value does not exist.

These types are considered primitive data types. They are the most basic data types in the language. Objects are more complex, and you will learn much more about them as you progress through JavaScript. At first, seven types may not seem like that many, but soon you will observe the world opens with possibilities once you start leveraging each one. As you learn more about objects, you will be able to create complex collections of data.

But before we do that, I will like you to get comfortable with strings and numbers.

 console.log('The Writer address: 
 4, Broadway Street, Lagos');
 console.log(10);

Above, a string was printed. The string isn’t just a single word, it includes both upper and lowercase, spaces, and punctuation. Next, we printed the number 10 where we did not make use of quotes (").

now, let us talk about arithmetic operators, this is a character that performs a task in your code. JavaScript has several built-in arithmetic operators, that allow us to perform mathematical calculations on numbers. Below are the operators and their corresponding symbol.

Add: +

Subtract: -

Multiply: *

Divide: /

Remainder: %

 console.log(4 + 4); // Prints 8
 console.log(5 - 7); // Prints 12
 console.log(4 * 1); // Prints 4
 console.log(10 / 2); // Prints 5

When we console.log() the computer will evaluate the expression inside the parentheses and print that result to the console. If we wanted to print the characters 3 + 4, we would wrap them in quotes and print them as a string.

Recall that when we console.log() the computer will evaluate the expression inside the parentheses and print that result to the console. If we wanted to print the characters 3 + 4, we would wrap them in quotes and print them as a string.

 console.log(11 % 3); // Prints 2
 console.log(12 % 3); // Prints 0

The remainder operator returns the number that remains after the right hand number divides into the left hand number as many times as it evenly can: 11 % 3 equals 2 because 3 fits into 11 three times, leaving 2 as the remainder.

In spite of this, let us look at what Boolean is with an example below:
The data type below returns false when parsed as a value to Boolean method.

let print3 = Boolean(0);
let print4 = Boolean(NaN);

console.log(print0) //-> false
console.log(typeof print0) //-> boolean
//------------------------//
console.log(print1) //-> false
console.log(typeof print1) //-> boolean
//------------------------//
console.log(print2) //-> false
console.log(typeof print2) //-> boolean
//------------------------//
console.log(print3) //-> false
console.log(typeof print3) //-> boolean
//------------------------//
console.log(print4) //-> false
console.log(typeof print4) //-> boolean

Other values different from the above returns false.

let print0 = Boolean(' ');
let print1 = Boolean(1321);
let print2 = Boolean('Hello World');
let print3 = Boolean('true');
let print4 = Boolean(1);

console.log(print0) //-> true
console.log(typeof print0) //-> boolean
//------------------------//
console.log(print1) //-> true
console.log(typeof print1) //-> boolean
//------------------------//
console.log(print2) //-> true
console.log(typeof print2) //-> boolean
//------------------------//
console.log(print3) //-> true
console.log(typeof print3) //-> boolean
//------------------------//
console.log(print4) //-> true
console.log(typeof print4) //-> boolean





From the code example above, the boolean has the answers to “yes” or “no” and "true or false"questions. it therefore shows how the number () methods can be used to convert string, boolean and null to numbers.

In conclusion,

you have learnt about JavaScript basics, where we discussed the following:

. console

. Comments

. Arithmetic Operators

. Data types

we have come to the end of this tutorial, thank you for sparing time to read this article, feel free to ask questions. you van also reach me on twitter https://twitter.com/tech_Olaide or send me an email on olaideoluwatobiloba1@gmail.com

Thank You.