Frontend Components you should know
Tags: beginners, tutorial, webdev, codenewbie
Published: 2023-01-25 14:02:18

Hello Everyone today I will share with you some common website components that are used in almost every modern website.
I won't teach you how to create those components individually but you can learn how to create them with the codepen I will provide with each example.

Let's get Started...

# Responsive Navbar (Hamburgerrrrrr)-
* As the number of devices accessing the web increases, we can't rely on a navbar that doesn't fit every screen, Responsive Navbar with a dropdown effect on mobile and tablet devices is the solution for that.
* A Responsive Navbar is usually fully visible on large desktop devices but is hidden on mobile and tablet devices and can be seen with some dropdown effect with a button click (hamburger icon).

* CODEPEN Example 1 - With only HTML and CSS
{% codepen https://codepen.io/shubhamtiwari909/pen/NWBWbvG %}

* CODEPEN Example 2 - With only HTML, CSS, and JavaScript
{% codepen https://codepen.io/shubhamtiwari909/pen/QWxMwxy %}

* This is a very basic example of a responsive navbar.

# Carousels -
* Well This one you will found on many modern websites, It can be used to create an image gallery with some text, Reviews comments slider, etc.
* Codepen Example 
{% codepen https://codepen.io/shubhamtiwari909/pen/xxJrXwZ %}

# Tabs - 
* Well these are really helpful when you want to show multiple items at the same viewport without scrolling down.
* It is mostly used to show pricing sections, different features of some sections, etc.
* Codepen Example
{% codepen https://codepen.io/shubhamtiwari909/pen/BaPJNqZ %}

# Progress Bars - 
* Well these are not often used but can be helpful at places where you want to show some statistics containing numbers, it can also be created with some animation.
* Codepen Example
{% codepen https://codepen.io/shubhamtiwari909/pen/MWBOOGY %}

# Loaders - 
* This one is not hard to create but you can show some creativity here. Loaders are basically used to show that the content is being loaded, it mostly happens at slow internet connection.
* Codepen Example 
{% codepen https://codepen.io/shubhamtiwari909/pen/yLqVpyd %}

# Cards (Animated cards or hoverable cards) - 
* Whether you visit an e-commerce site or news site or blogging site, everywhere you will find card components, it is basically used to show a description of an individual item like Product description which contains image, title, intro, price, buttons.
* Codepen Example 1 - Flip Card
{% codepen https://codepen.io/shubhamtiwari909/pen/jOpPGBj %}
* Codepen Example 2 - Hoverable Card
{% codepen https://codepen.io/shubhamtiwari909/pen/GRGYJqV %}

# Accordions - 
* These are mostly used to show the FAQ section of a website.
* Codepen Example - 
{% codepen https://codepen.io/shubhamtiwari909/pen/dyKwPZv %}

# Modals - 
* These are basically used to show some forms, ads, Prompt Messages, etc.
* Codepen Example - 
{% codepen https://codepen.io/shubhamtiwari909/pen/BaVvyam %}

# Form Validations - 
* This one needs no explanation, a well-created form will never take extra, less, or unnecessary data.
* Codepen Example - 
{% codepen https://codepen.io/shubhamtiwari909/pen/VwdQXXN %}

# Custom Checkboxes and radio buttons - 
* You can create attractive checkboxes and radio buttons by using the CSS property "appearance:none", it will hide the default styling for the checkbox and radio buttons and then you can put your own styling with CSS.
* Codepen Example
{% codepen https://codepen.io/shubhamtiwari909/pen/bGKYZZY %}

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me with some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90c