DEV Community: Dhananjay Warade

Getting Started with NPM (Node Package Manager) for Beginners

Dhananjay Warade — Tue, 13 Aug 2024 06:38:03 +0000

Welcome to the world of web development! If you're just starting out, you might have heard about something called NPM (Node Package Manager). Don't worry if it sounds confusing—I'm here to guide you through it step by step.

What is NPM?

NPM stands for Node Package Manager. It's a tool that helps developers manage and share reusable code. Think of it as an app store for your projects where you can find packages (pieces of code) written by other developers to help you build your project faster and more efficiently.

Why Use NPM?

Simplifies Dependency Management: Easily include external libraries and tools in your projects.
Keeps Your Project Organized: Manages versions and dependencies of the packages you use.
Wide Range of Packages: Access to thousands of open-source packages.

Getting Started with NPM

Step 1: Install Node.js

NPM comes bundled with Node.js, so the first step is to install Node.js.

Download Node.js:

Go to the Node.js website https://nodejs.org/en/download/package-manager

Select the required version, the OS, and click on download.

Now download it and complete the setup.

Tip: Avoid choosing the latest version as it might contain bugs

Download the LTS (Long Term Support) version. This version is recommended for most users.

Install Node.js:

Run the installer and follow the instructions.

This will also install NPM automatically.

Step 2: Verify the Installation

To make sure Node.js and NPM are installed correctly, you can check their versions:

Open your terminal (Command Prompt on Windows, Terminal on macOS, or Linux).
Type the following commands and press Enter after each one:
node -v npm -v

You should see version numbers for both Node.js and NPM.

Useful NPM Commands

Install a package: npm install
Install a package globally: npm install -g
Update a package: npm update
Uninstall a package: npm uninstall
List installed packages: npm list

Conclusion

Congratulations! You’ve taken your first steps with NPM. You now know how to install Node.js, initialize a project, install packages, and use them in your code. NPM is a powerful tool that will help you manage your project's dependencies and make your development process much smoother. Keep exploring and happy coding!

If you have any questions or need further assistance, feel free to ask the dev community. We're here to help!

🌱 Embarking on my Spring Boot and Microservices Journey!

Dhananjay Warade — Sat, 09 Dec 2023 04:52:45 +0000

Hey Dev Community! 👋

I've been delving into the world of Spring Boot and Microservices lately, and I've stumbled upon some amazing resources that have been absolute game-changers for me. Despite being a beginner, I'd love to share a few insights gleaned from my learning journey:

Master Core Java:
Building a solid foundation in core Java is key. Each Java version brings cool features that can slash your boilerplate code.

Grasp Fundamentals:
Before jumping into Spring Boot, understand the basics like JDBC, servlets, and Hibernate. This knowledge unveils the inner workings of Spring Boot.

Learn Best Practices:
While diving into Spring Boot is crucial, understanding best practices is equally vital. It's our responsibility as developers to create reliable and scalable code.

🚀 Recommended Resources:
Java 8 Cheat Sheet: Link
Spring Boot Best Practices: Link
Spring Boot Udemy Course: Link
Microservices Udemy Course: Link

These resources have been a lifeline in my day-to-day coding, helping me connect the dots between theory and real-world applications.

Got more gems to share or any burning questions for me? Feel free to drop them below. Happy coding! 🚀📚

7 Helpful tools for frontend devs 🤯

Dhananjay Warade — Sun, 27 Mar 2022 12:57:03 +0000

AnimXYZ

So AnimXYZ will help you create, customize and animate your website!

Shaper

MUST TRY!!

This interactive tool will let you play with various UI's 'LIVE' on the page!

Vizzu

MUST TRY!!

Time to play with data stories 😍
This is a JS library for animated visualizations!!

Party JS

Basically, this library will help you to brighten the UX part with amazing visual effects!

Whirl

MUST TRY!!

Whirl will help you to create sick CSS loading animations with less effort!

Theatre JS

Theatre JS is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation.
It's basically a visual editor where you can animate DOM elements 🤯

Glass UI

MUST TRY!!

So, it's an online generator that lets you build a sick 'glassmorphism' effect 😍

Hope these tools will help you 🙌

Thank you! 💜

Help others find these post.

5 Ways To Center Content With CSS

Dhananjay Warade — Mon, 14 Mar 2022 02:04:54 +0000

📌 The Absolutely Absolute way

→ The old & easy way.

📌 The Griddy Way

→ Offers a grid-based layout system.

→ Making it easier to design web pages.

📌 The Flexy Way

→ Easy & Simple.

→ Flexible width/height of elements depending on available space.

📌 The Table Way

→ The very old way when tables were the only real way to structure HTML.

📌 Power of Margins

→ margin: auto on (flex or grid) item will not only horizontally center the element as it did in block layouts, but also center it in the vertical axis.

✨ Hopefully you find something new today!! ✨

→ It was just fun to see that CSS has so many varieties to do the same things just like we have in a programming language.

→ But then it depends on your personal preference & the 𝘀𝗶𝘁𝘂𝗮𝘁𝗶𝗼𝗻 when to use each of them.🤩✨

FREE HTML Template sites for Developers

Dhananjay Warade — Sat, 12 Mar 2022 08:17:15 +0000

HTML5UP

HTML5 UP is a collection of amazing free templates, that are fully responsive, built on intelligent html5 and css3, and are fully customizable.

Graygrids

Biggest Source of Free HTML Website Templates & Bootstrap Themes for Business, Landing Page, Admin Dashboards, and Resume & Portfolio Websites. 400+ Ready to Use Templates and Themes to Ease Your Web Development Process.

Nicepage

Nicepage is a free website-building tool that requires no coding skills. This includes the WordPress, Mac OS, web app infrastructure, With a mobile-friendly interface and a responsive design, the websites look great on all modern devices.

Free-CSS

It provides 3305 free website templates, all templates are free. All of the templates have been built using CSS & HTML.

Templatemo

Download 565+ free HTML CSS website templates that included 140+ responsive Bootstrap themes from templatemo and use them for your sites.

Useful Blog To Follow As A Web Developer

Dhananjay Warade — Sun, 06 Mar 2022 06:25:26 +0000

OnextraPixel

CSS Tricks

Scotch.lo

Codrops

Simple Programmer

Tutorialzine

Sitepoint

How to design a logo with these awesome hovering effects?

Dhananjay Warade — Sat, 05 Mar 2022 04:34:56 +0000

🤔 Do you know??

→ How to design a logo like this?

→ How to design a logo with these awesome hovering effects?

👀 This is how you can design your object using box-shadow.

👀 And on hovering, just you have to use the "inset" keyword!

If you want the whole code then I uploaded a GitHub link.

💚 GitHub link:
https://github.com/Dhananjaywarade/Nemorphism-logo-design.git

But if you like make sure to

Follow me on GitHub

Thank you so much for staying to the end.

TOP 7 FREE SHOPIFY THEMES FOR E-COMMERCE SITES

Dhananjay Warade — Thu, 03 Mar 2022 13:58:22 +0000

Shopify is a popular eCommerce platform . Currently, it powers more than 600,000 online stores all over the world. Although there are many Shopify templates on the market, it’s not that easy to find free ones. So, we have collected the best free Shopify themes for you, all of which come with premium-like features and beautiful, professional designs

ANNABELLE

Annabelle is a free multi-purpose Shopify theme you can use for any kinds of shops. It’s a freebie created by SpaceSquirrel, a professional eCommerce agency specialized in Shopify development. Annabelle comes with three different styles:

Annabelle 1 for apparel, footwear, high fashion, and accessories stores;
Annabelle 2 for arts and crafts, furniture, photography, and vintage shops;
Annabelle 3 for luxury products, jewelry, eyewear, and watch stores.

All three styles are fully responsive, featuring an elegant design and beautiful typography. Annabelle also provides you with customization tools so that you can tailor your Shopify site to your own needs. It has advanced features you’ll love, such as featured product carousels, product zoom, and an Instagram gallery. However, note that you have to subscribe to SpaceSquirrel’s newsletter to download the theme.

STAR

Star is a feature-rich Shopify theme offered as a freebie by Outlane.co. As Outlane is a professional Shopify agency, Star has many features you will normally find only with premium themes. You can set up Star without any programming knowledge, just in a few minutes. It’s a responsive theme, so it looks good on mobile devices as well. You can choose from two styles that work out of the box:

Polaris (on the image above)
Sirius

You can add multi-level dropdown menus, product filters, Google Maps section, parallax sections, and product reviews to your site, too. Although you can get Star up and running without any customizations, it also provides you with advanced customization tools such as theme settings, color and image swatches, Shopify fonts, and many more.

VENTURE

Venture is an ideal choice if you want to build a Shopify store for a large number of products. It has been created specifically for big catalogs that host hundreds or thousands of items. So, it’s packed with features like multi-column menus, slideshows, product filters, and banners for discounts and promotions. Venture includes three different styles:

Snowboards
Outdoors
Boxing
As the theme is officially supported by Shopify, you don’t have to worry about its quality. The venture also lets you create a unique design for your Shopify store. It comes with built-in color palettes, free stock photos, social media icons, customizable content sections, and more.

BOUNDLESS

Boundless is a free Shopify theme for stores that want to showcase huge product photos. It has a minimalist design that puts imagery at the center of attention. Your products are displayed in a neat image grid on both the homepage and product pages. Boundless has been specifically optimized for high-resolution imagery. It comes in two different styles:

Black & white
Vibrant (on the image above)

Besides the built-in styles, it also offers a number of customization options so that you can completely tailor your online shop to your own needs. Boundless allows you to create slideshows with a fading effect, add sticky navigation to the top of your page, embed a homepage video, and feature professional product galleries.

FASHE

Fashe is a professional Shopify template offered by the Colorlib web design agency as a freebie. Originally, Fashe was a premium theme, but Colorlib decided to give it away for free. However, it still has all its pro features, so essentially, you get a premium Shopify theme at no cost.

It’s a Shopify theme primarily for fashion shops but thanks to its versatility, you can use it for any other kind of online store. You can choose from three different front page layouts (click the Home menu in the demo to see them in detail). Fashe comes with nicely animated product photos, full-width sliders, category pages, customizable product filters, and tabbed product information sections as well.

BROOKLYN

Brooklyn is a free eCommerce theme for modern-looking apparel stores, officially supported by Shopify. It’s an excellent choice if you want a theme that specifically focuses on-brand imagery. Brooklyn displays product photos in a dynamic image grid that immediately grabs the viewer’s attention. The layout of the grid automatically changes based on the number of photos on display. You can choose from two pre-designed styles:

Classic
Playful (on the image above)

Besides, Brooklyn allows you to add a full-width header slider to your homepage to showcase multiple product or brand images to your visitors, right when they’re landing on your site. If you’d rather add a YouTube or Vimeo video to your homepage, Brooklyn lets you do that, too.

MINIMAL

Minimal has a simple but elegant design that can be an ideal solution for small to medium-sized Shopify stores. With Minimal, you get access to free theme updates, built-in search engine optimization, a mobile-friendly design, and free stock photos from Shopify’s Burst image store. You can choose from three different styles:

Vintage (on the image above)
Fashion
Modern

You can also add advanced eCommerce features to your store, such as a homepage slideshow or video, product image zoom, related product widgets, product filtering, and many others. Besides all the functionalities you might need, Minimal also features beautiful typography and an easy-to-use navigation bar.

10 Amazing Website Every Developer Should Know

Dhananjay Warade — Tue, 01 Mar 2022 10:18:51 +0000

There are so many websites to make the work of developers easier. Everyone doesn’t know all.
In this article, we will see 10 Must-Visit Killer Websites For Developers.

1.DevDocs

DevDocs brings together numerous API documentation in a single, searchable interface. You will find docs related to various programming languages, technologies in one place.

2. Poet.so

This site is useful for developers who wish to post photos of their tweets on social media. Website transforms your tweet into a beautiful and editable design.

3.ray.so

This website allows you to take beautiful screenshots of codes. It also has a dark mode and some preloaded themes for different programming languages. You can also use its VS Code extension.

4. roadmap.sh

This website provides roadmaps, guidelines, and other educational content to assist developers in choosing a path and directing their learning. It is very helpful for a beginner as well as a learner who needs guidance.

5. LambdaTest

LambdaTest is a cloud-based cross-browser testing platform that lets you test web applications on over 2000 different browsers, operating systems, and devices. LambdaTest allows you to test cross-browser compatibility both manually and automatically.

6. daily.dev

It is a platform where you can find so many good articles to read daily. It shows the best articles from various platforms directly in your feed. Stay updated with quality content from various platforms directly into your browser by using its extension.

7. Showwcase

Showwcase is a new social media website specially for people who code connect, build community, and find new opportunities. It is a LinkedIn-like platform but only focused on developers. You can join and follow me there.

8. CSS-TRICKS

You can master your web development skills by learning every basics about CSS from this website. If you didn’t already know, CSS is what makes pages on the web look beautiful.

9. Medusa

An open-source Shopify alternative. Medusa is an open-source headless commerce engine that is fast and customizable. It’s Free.

10. SMARTMOCKUPS

Why give your time learning how to use Photoshop. Smartmockups allow you to generate gorgeous high-resolution mockups straight in your browser and across numerous devices using a single interface. The quickest web-based mockup tool available, No prior experience or abilities are required, and the library of professional mockups is always growing.

Want to Host Your Website for free?

Dhananjay Warade — Mon, 28 Feb 2022 08:04:08 +0000

When you create a website, you essentially create a bunch of different files. These files need to be stored somewhere in order to be accessible on the Internet. Reliable and high-performing web hosting is a crucial part of any successful website.

Lets suppose you've just started making basic projects and you want to showcase your work with others but you can't afford to pay for a hosting service. In such a case what you're supposed to do then?

No need to worry there are quite a few free web hosting services out there.

In this article, we'll come across some of them!

Netlify

Netlify is an intuitive Git-based workflow and powerful server less platform to build, deploy, and collaborate on web apps.

Create amazing experiences for the web in record time—without thinking once about servers or devops.

GitHub Pages

GitHub, Inc. is a provider of Internet hosting for software development and version control using Git.

Host your website directly from your GitHub repository. Just edit, push, and your changes are live.

Vercel

Deploy web projects with the best frontend developer experience and highest end-user performance.

Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow.

Heroku

Heroku is a platform that enables developers to build, run, and operate applications entirely in the cloud.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly.

Firebase

Firebase is a platform developed by Google for creating mobile and web applications.

With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).

Free hosting is good for anyone looking to create their first website. It is the ideal stepping stone for people who don't have much coding or design experience.

Important CSS Properties You Must Know

Dhananjay Warade — Sun, 27 Feb 2022 15:38:53 +0000

Color and Background Properties

Color
Changes the color of text.

H1 { 
    color: blue;
   }

H2 { 
   color: #000080;
   }

Background-Color
Sets the background color of an element.

BODY { 
background-color: white; 
}

H1 { 
background-color: #000080;
 }

Background-Image
Sets the background image of an element.

BODY { 
background-image: url(/images/foo.gif); 
}

P { 
background-image: url(http://www.htmlhelp.com/bg.png);
 }

Background-Repeat
Determines how a specified background image is repeated.
The repeat-x value will repeat the image horizontally while the
repeat-y value will repeat the image vertically.

BODY { 
background: white url(candybar.gif); 
background-repeat: repeat-x; 
}

Background-Attachment
Determines if a specified background image will scroll with the
content or be fixed with regard to the canvas.

BODY {
 background: white url(candybar.gif); 
background-attachment: fixed; 
}

Background
Used to combine all properties of background.

BODY { 
background: white url(http://www.htmlhelp.com/foo.gif); 
} 
BLOCKQUOTE {
 background: #7fffd4; 
}

P { 
background: url(../backgrounds/pawn.png) #f0f8ff fixed; 
} 
TABLE {
 background: red url(leaves.jpg) no-repeat bottom right; 
}

Font Properties

Font-Family
Changes the font family of certain words, sentences,
paragraphs, etc.

P {
 font-family: "New Century Schoolbook", Times, serif; 
}

Font-Style
Changes text: normal, oblique, and italics.

H1 {
 font-style: oblique; 
}

P {
 font-style: normal; 
}

Font-Variant
Used to display font in normal or small-caps.

SPAN {
 font-variant: small-caps; 
}

Font-Weight
Used to specify the weight of the font.

H1 {
 font-weight: 800; 
}

P {
 font-weight: normal; 
}

Font-Size
Used to modify the size of the displayed font.

H1 {
 font-size: large; 
}

P {
 font-size: 12pt; 
}

LI {
 font-size: 90%; 
}

STRONG {
 font-size: larger; 
}

Font
Used to combine all properties of fonts.

P {
 font: italic bold 12pt/14pt Times, serif; 
}

Text Properties

Word-Spacing
Defines an additional amount of space between words.

P EM {
 word-spacing: 0.4em; 
}

P.note {
 word-spacing: -0.2em; 
}

Letter-Spacing
Defines an additional amount of space between characters.

H1 { 
letter-spacing: 0.1em; 
}

P.note {
 letter-spacing: -0.1em; 
}

Text-Decoration
Allows text to be decorated through one of five properties:
underline, overline, line-through, blink, none.

A:link, A:visited, A:active {
 text-decoration: none; 
}

Vertical-Align
Used to alter the vertical positioning of an inline element,
relative to its parent element or to the element's line.

IMG.middle {
 vertical-align: middle; 
}

IMG {
 vertical-align: 50%; 
}

.exponent {
 vertical-align: super; 
}

Text-Transform
Allows for capitalizing the first letter of each word (capitalize),
capitalizing all letters of a word (uppercase), using all small
letters in each word(lowercase), and the inital value(none).

H1 {
 text-transform: uppercase; 
}

H2 {
 text-transform: capitalize; 
}

Text-Align
Used to justify text left, center, right, and justify.

H1 {
 text-align: center; 
}

P.newspaper {
 text-align: justify; 
}

Text-Indent
Used to specify the amount of indentation prior to the first line
of text.

P {
 text-indent: 5em; 
}

Line-Height
Used to control the spacing between baselines of text.

P {
 line-height: 200%; 
}

Classification Properties

List-Style-Type

Specifies the type of list-item marker, and is used if list-styleimage is none or if image loading is turned off.

LI.square {
 list-style-type: square; 
}

UL.plain {
 list-style-type: none; 
}

OL {
 list-style-type: upper-alpha; 
} 
/* A B C D E etc. */

OL OL {
 list-style-type: decimal; 
} 
/* 1 2 3 4 5 etc. */

OL OL OL {
 list-style-type: lower-roman; 
} 
/* i ii iii iv v etc. */

List-Style-Image
Specifies the image that will be used as a list-item marker when
image loading is turned on, replacing the marker specified in
the list-style-type property.

UL.check {
 list-style-image: url(/LI-markers/checkmark.gif); 
}

UL LI.x {
 list-style-image: url(x.png); 
}

List-Style-Position
Determines where the marker is placed in regard to the list
item. If the value inside is used, the lines will wrap under the
marker instead of being indented. outside is default.

UL {
 list-style-position: inside;
}

Box Properties

Margin-Top
Sets the top margin of an element by specifying a length or a
percentage.

BODY { 
margin-top: 5pt; 
}

Margin-Right
Sets the right margin of an element by specifying a length or a
percentage.

P.narrow {
 margin-right: 50%; 
}

Margin-Bottom
sets the bottom margin of an element by specifying a length or
a percentage.

DT {
 margin-bottom: 3em; 
}

Margin-Left
sets the left margin of an element by specifying a length or a
percentage.

ADDRESS {
 margin-left: 50%; 
}

Margin
Sets the margins of an element by specifying top, bottom, left
and right margins -- all either specifying length or percentage.

BODY {
 margin: 5em; 
} /* all margins 5em */

P {
 margin: 2em 4em; 
} /* top & bottom 2em, left & right 4em */

DIV {
 margin: 1em 2em 3em 4em; 
} 
/* top margin 1em, right 2em, bottom 3em, left 4em */

Padding-Top
Describes the amount of space between the top border and
the content of the selector.

P {
 padding-top: 20%; 
}

Padding-Right
Describes the amount of space between the right border and
the content of the selector.

P {
 padding-right: 20 px; 
}

Padding-Bottom
Describes the amount of space between the bottom border
and the content of the selector.

P {
 padding-bottom: 5 em; 
}

Padding-Left
Describes the amount of space between the left border and
the content of the selector.

P {
 padding-left: 15 pt; 
}

Padding
Shorthand for the padding-top, padding-right, padding-bottom,
and padding-left properties.

BLOCKQUOTE {
 padding: 2em 4em 5em 4em; 
}

Border-Top-Width
Used to specify the width of an element's top border.

P {
 border-top: 20%; 
}

Border-Right-Width
Used to specify the width of an element's right border.

P {
 border-right: 20%; 
}

Border-Bottom-Width
Used to specify the width of an element's bottom border.

P {
 border-bottom: 20%; 
}

Border-Left-Width
Used to specify the width of an element's left border.

P {
 border-left: 20%; 
}

Border-Width
Used to set the width of an element's border (either all
borders, or specifying top border, right border, bottom border,
left border).

P {
 border-width: 20%; 
}

P {
 border-width: 10px 5px 10px 5px; 
}

Border-Color
Used to set the color of an element's border.

P {
 border-color: #00000; 
}

Border-Style
Sets style of a border - none, dotted, dashed, solid, double.

P {
 border-style: dotted; 
}

Border-Top
Sets the width, style, and color of an element's top border.

P {
 border-top: 10px, red, double; 
}

Border-Right
Sets the width, style, and color of an element's right border.

P {
 border-right: 10px, red, double; 
}

Border-Bottom
Sets the width, style, and color of an element's bottom border.

P {
 border-bottom: 10px, red, double; 
}

Border-Left
Sets the width, style, and color of an element's left border.

P {
 border-left: 10px, red, double; 
}

Border
Sets the width, style, and color of an element's border.

P {
 border: 10px, red, double; 
}

Width
Each block-level or replaced element can be given a width,
specified as a length, a percentage, or as auto.

P {
 width: 15px; 
}

H1 {
 width: 35%; 
}

.foo {
 width: auto; 
}

Height
Each block-level or replaced element can be given a height,
specified as a length or as auto.

P {
 height: 15px; 
}

H1 {
 height: 35%; 
}

.foo {
 height: auto; 
}

Float
Allows text to wrap around an element (left, right, none).

P {
 float: left; 
}

H1 {
 float: right; 
}

.foo {
 float: none; 
}

Clear
Specifies whether an element allows floating elements to its
sides (left, right, none).

P {
 clear: left; 
}

H1 {
 clear: right; 
}

.foo {
 clear: none; 
}

9 HTML Useful Input Types

Dhananjay Warade — Fri, 18 Feb 2022 02:55:44 +0000

Hello Everyone 👋 , today I'm going to list down and concisely explain the input types of HTML that exist and are acknowledged by World Wide Web Consortium.

Without further delay, let's dive into the topic. Before that, we need to understand the input types in the HTML function to collect information or input data from our users. For example, we can find input types in registration forms, login forms, and many more components.

Now let's move on to the first input type which is a very common type.

Text

The text input is used to collect normal text and other characters too. These include words, numbers, and symbols. They look like below:

Password

Generally, when you enter most registration or log-in pages of a website, you may find that the input to enter your password is unique and usually has a show/hide toggle.

This is easily made possible by using the password input type. It looks like the example below:

Checkbox

The checkbox input is like the radio button too but with a twist. Generally, we have several checkbox options and the user can check/select all the related options they want. Here's how it looks like:

Radio

The radio input has nothing to do with a radio station or anything. It's actually a 2 option fixed input. It works like a boolean statement where the user can click on it for a true statement or leave it unclicked for a false statement. Here's how radio inputs look like:

Color

If you're running a fashion design website where you would like to collect input about the color of a design or anything, there's an easier way to do it compared to asking the user to enter the HEX code of the color in the text field.

That solution is the color input type which opens a popup mini color picker to give a better user experience and submit color options. It looks like this:

File

Cloud storage services like Google Drive, OneDrive, and more use this input type to collect files from you. It's a very useful and interactive input type that you probably would have seen before. Here's how this input type looks like:

Number

Earlier we saw about the common text input type that covers words, numbers, and symbols too. But what if you want to collect numbers only? Well, that's where the special number input type comes in. It restricts the user to only enter numbers and it will not record other types of text even if the user clicks on it.

Here's how it looks like:

Email

This input type works best with the password input we saw earlier. This input type ensures that the input type is an email type. If it isn't an email type, it will give a popup alert that you'll need to edit the input into a valid email type.

Here's how it looks like:

Submit

This is one of the most important input types. Without using the submit input, you will not be able to collect the input entered earlier by the user. Generally, forms would have the form tag, followed by any type of input inside it, and lastly, the submit input type inside it to submit the info.

It has a simple button design like below:

And that's all for this article. There are some rarely used input types too that you may explore if you want. Thanks for reading and goodbye!